1.0.0 • Published 4 years ago
tmkhevcwebplayer v1.0.0
视频 使用说明
引入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不播放
```javascript
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
1.0.0
4 years ago