腾讯超级播放器

腾讯超级播放器

 <!-- 引入播放器 css 文件 -->
  <link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.css" rel="stylesheet">
  <!-- 如需在IE8、9浏览器中初始化播放器,浏览器需支持Flash并在页面中引入 -->
  <!--[if lt IE 9]>
  <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
  <![endif]-->
  <!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls,需要引入 hls.js -->
  <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.12.4.js"></script>
  <!-- 引入播放器 js 文件 -->
  <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js"></script>

  <style>
      html,body{
        margin: 0;
        padding: 0;
      }
      /* 通过 css 设置播放器尺寸 这时<video>中的宽高属性将被覆盖*/
      #player-container-id {
        width: 100%;
        max-width: 100%;
        height: 0;
        padding-top: 56.25%; /* 计算方式:播放器以16:9的比率显示,这里的值为 9/16 * 100 = 56.25  */
      }
      /* 外部容器也需要是自适应的*/
      #wrap {
        width: 80%;
        margin: 0 auto;
      }
      /* 设置logo在高分屏的显示样式 */
      @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
        .tcp-logo-img {
          width: 50%;
        }
      }
  </style>

  <script type="text/javascript">
      var FileID = "{$course['field_id']}"
      var VideoKeyParam = {php echo json_encode(getVideoKeyParam($course[field_id]))};
  </script>
<!-- 设置播放器容器 -->
<div id="wrap">
  <video id="player-container-id" preload="auto" playsinline webkit-playsinline>
  </video>
</div>
<!--
注意事项:
* 播放器容器必须为 video 标签
* player-container-id 为播放器容器的ID,可自行设置
* 播放器区域的尺寸请按需设置,建议通过 css 进行设置,通过css可实现容器自适应等效果
* playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放,此处仅作示例,请按需使用
* 设置 x5-playsinline 属性会使用 X5 UI 的播放器
-->


var defaults = { // player-container-id 为播放器容器 ID,必须与 html 中一致
  	fileID: FileID, // 请传入需要播放的视频 filID(必须)
	appID: '1251763412', // 请传入点播账号的 appID(必须),
	autoplay: 1,
}
var options = $.extend({}, defaults, VideoKeyParam);
_Player = TCPlayer('player-container-id', options);