腾讯云点播播放器TCPlayer开发文档整理edusoho

首先在你的页面中引入css、js文件

<link href="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
 <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频,
 需要在 tcplayer.v4.min.js 之前引入 hls.js。-->
 <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.12.4.js">
 </script>
 <!--播放器脚本文件-->
 <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.min.js">
 </script>

播放器初始化需要传入两个参数,第一个为播放器容器 ID,第二个为功能参数对象。var player = TCPlayer(‘player-container-id’, options);
案例演示地址http://tx.shop1a.cn/(直接注册进去就可以看视频)
1、续播功能
开启续播功能的前提,必须通过 fileID 播放。有了唯一的 fileID,播放器才能记录该视频的播放时长,当播放未结束时关闭页面,在同一个浏览器中再次打开播放页面,可从上次观看的时间点继续播放。通过以下参数开启续播功能:

var player = TCPlayer('player-container-id', {
    fileID: '', // 请传入需要播放的视频 filID(必须)
    appID: '', // 请传入点播账号的 appID(必须)
    plugins:{
        ContinuePlay: { // 开启续播功能
          // auto: true, //[可选] 是否在视频播放后自动续播
          // text:'上次播放至 ', //[可选] 提示文案
          // btnText: '恢复播放' //[可选] 按钮文案
        },
      }
  });


2、倍速播放调取使用

  var player = TCPlayer('player-container-id', {
    fileID: '', // 请传入需要播放的视频 filID(必须)
    appID: '', // 请传入点播账号的 appID(必须)
    playbackRates: [0.511.251.52] 
    // 设置变速播放倍率选项,仅 HTML5 播放模式有效
  });


3、切换 fileID 播放
通过实例化对象的 loadVideoByID(args) 方法,可以更换视频进行播放。该方法支持的参数如下:

player.loadVideoByID({
  fileID: '', // 请传入需要播放的视频 filID(必须)
  appID: '', // 请传入点播账号的 appID(必须)
  t: '', // 参考 Key 防盗链说明
  us: '', // 参考 Key 防盗链说明
  sign:'', // 参考 Key 防盗链说明
  exper:'' // 参考 试看功能说明
});

4、HLS 自适应码率播放
HLS 规范的 Master Playlist 可以根据网络速度自适应码率播放,在视频下载过程中,如果网络速度满足下载高码率的 TS 分片时,播放器将切换播放高码率的 TS 分片,反之播放低码率的 TS 分片。移动端和桌面端大部分浏览器都支持该特性。
播放 HLS Master Playlist 时,播放器的清晰度选择功能将会变成选择特定的码率或者根据网络速度自动选择。如下图所示:
腾讯云点播播放器TCPlayer开发文档整理edusoho_第1张图片
5、Referer 防盗链

var player = TCPlayer('player-container-id', {
fileID: '', // 请传入需要播放的视频 filID(必须)
appID: '', // 请传入点播账号的appID(必须)
flash:{
  swf: '//[腾讯云隔离域名]/vod-player/[appID]/[fileID]/tcplayer/player.swf'
   //swf 文件地址(必须)
 }
   });

6、试看功能:使用试看功能需要先开启 Key 防盗链

var player = TCPlayer('player-container-id', {
     fileID: '', // 请传入需要播放的视频 filID(必须)
     appID: '', // 请传入点播账号的 appID(必须)
     psign:''
   });

你可能感兴趣的:(腾讯云点播播放器TCPlayer开发文档整理edusoho)