tmkhevcwebplayer

视频 使用说明

引入js文件夹下的webPlayer.mini.js,与style文件夹下的webPlayer.mini.css

第一步 创建播放器

var pl=new Player(options);

其中,options值为下列表格

键	类型	说明
video	Element	video组件,用于定位.可对其进行样式设置,以及定位.在没有硬解接口的浏览器,此控件将被重置.
pauseCallback	function	暂停后执行的函数
stopCallback	function	停止后执行的函数
playCallback	function	播放后执行的函数
timeChangeCallback	function	播放时间改变后执行的函数,其中参数为当前播放时间(单位:秒)
loadedCallback	function	视频加载后执行的回调函数,其中参数为视频相关参数.
decoderJsPath	string	这里设置decoder.Js的路径,方便cdn,不设置则默认当前js路径下的decoder.js
downloadJsPath	string	这里设置download.Js的路径,方便cdn,不设置则默认当前js路径下的download.js

---

注意:如果html页面中使用了内嵌script则必须传值decoderJsPath与downloadJsPath,并且保持js文件的文件结构(index.js除外,js不建议放在html内嵌中执行.而是单独使用js文件进行执行)

上表中loadedCallback参数

    v = { // 视频相关参数
      a: { // 音频参数 safari才有此值
        f: 0, // 比特率
        c: 0, // 声道数
        r: 0, // 采样率
      },
      v: { // 视频参数(分辨率)
        w: 0, // 宽度 非容器样式宽度
        h: 0// 高度 非容器样式高度
      },
      duration: 100, // 时长,单位:秒,
      canvas: this.canvas // 画布
    }
 

注意: 在执行第二步之前且首次手指触控事件时必须执行如下语句,其目的是为了兼容safari,否则在safari不播放

GlobalAudioCtx = new (window.AudioContext || window.webkitAudioContext)();
GlobalAudioCtx.suspend();

第二步 加载视频

以第一步定义的变量pl作为例子 使用pl的方法loadSource(url,options,callback);

const opt = {
  preload: "auto",
  fluid: true,
  language: "zh_CN",
  inactivityTimeout: false,
  controlBar: {
    children: [
      { name: 'playToggle' }, // 播放按钮
      { name: 'currentTimeDisplay' }, // 当前已播放时间
      // { name: "timeDivider" },
      { name: 'durationDisplay' }, // 总时间
      { name: 'progressControl' }, // 播放进度条
      { // 倍数播放
        name: 'playbackRateMenuButton',
        'playbackRates': [0.5, 1, 1.5, 2]
      },
      { name: 'FullscreenToggle' }, // 全屏
      {
        name: 'volumePanel', // 音量控制
        inline: false, // 不使用水平方式
      },
    ]
  },
};
 
pl.loadSource("视频url地址(首尾不能有空格,换行符,要是真正的url)", opt, () => {
  // pl.play();
}); // 加载视频

至此,视频就算是正常加载完毕.

方法

---

方法名称	说明
loadSource	加载视频,参数为 (视频url,options,回调函数)
play	播放
pause	暂停
stop	停止
seek	跳转,参数(时间(单位:秒))
volume	设置视频声音,参数:百分比,1代表100% 2表示200% 0.5表示50%(页面声音,非设备声音)

---

广告 部分使用说明

用法

前置依赖jquery.js 引入文件 mad.js

ad = new mad(param);

param数据类型为数组.其成员为对象,详情见下表

键	类型	说明
img	string	广告图片url
audio	string	广告音频url
video	string	广告视频url,**注意:**此值添加后,将取缔img与audio的值.
url	string	点击广告后跳转的url
style	string	当前广告外框的样式
class	string	当前广告的class列表,定义广告出现的位置等信息均在此设置
start	string	自动出现广告的时间.需要配合方法time一起使用.
createFun	function	广告创建后执行的函数
closeFun	function	广告关闭后执行的函数

---

对象方法

var time="当前播放时间(单位:秒)" ad.time(time); 此方法使用后,当time大于之前设置的start值时,相应的广告将会弹出.

ad.show(index,run) 此方法使用后,将显示param下标index的广告. ad.close(index,run) 此方法使用后,将关闭param下标index的广告. index: 定义广告时,param数组的下标. run为bool型数据,为true时,将会在 show/close 时运行之前定义的函数 createFun/closeFun