tinyPlayer
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。
概述
tinyPlayer播放器，支持点播 直播
插件概述
1.支持点播,直播 2.缓存,分集播放 4.android 支持视频格式 m3u8,flv,mp4,webm,ts,mpd,mkv 支持rtmp直播 5.ios 支持视频格式 m3u8,flv,mp4,mov 支持rtmp直播 6.component 等自定义控件 温馨提示
监听事件(播放器)
ox.addEventListener(function(ret) {
var code= ret.code;
// 0 小屏状态下返回按钮点击
// 1 播放进度实时返回position
// 5 准备播放
// 6 播放
// 7 暂停
// 8 缓冲返回
// 9 网络错误
// 11 选集列表 点击 返回选择的集数信息
// 16 下一集事件
}
});
插件接口
addEventListener
监听统一接口 取消原来的api.addEventListener
addEventListener(callback)
返回格式
{code:0,vid:vid,uid:uid} //vid 视频id uid 用户id
code 值代表放回 事件 请参考 上面 温馨提示
示例代码
tinyPlayer.addEventListener(function(ret) {
var code= ret.code;
});
);```
## 可用性
Android,ios系统
可提供的1.1.5
<div id="a1"></div>
# **showInView**
指定区域显示播放器,点播，可分集播放
showInView({param})
## params
```js
//component 自定义控件 radius 圆角值 backgroundColor 背景色 border 边框 borderColor边框颜色
//alignment 文字对齐0:居中 1上左对齐 2上中对齐 3上右对齐 4上两端对齐 5下左对齐 6下中对齐 7下右对齐 8下两端对齐 9居中两端对齐
//textSize:14 文字大小 textColor:'#C0FF3E' 文字颜色 alpha 背景透明度
//hidden 是否隐藏
//code:16//控件标识 同时作为点击事件返回码 0-13占用 不能使用 组件 code值不能重复 rect 图片位置(相对父组件component位置)
//type为full显示在全屏 small 显示在小屏
//autoHidden 是否随控件一起隐藏显示
var htmltext = "<div>"+
"<font face='微软雅黑' size='4' color='#3333FF'>西安科技大学高新学院</font>"+
"<img src='https://scpic.chinaz.net/files/pic/pic9/202008/bpic20921.jpg' width='20px' height='20px' />"+
"<font face='微软雅黑' size='4' color='#3333FF'>西安科技大学高新学院35544554</font>"+
"<img src='https://scpic.chinaz.net/files/pic/pic9/202001/zzpic22406.jpg' width='20px' height='20px' />"+
"</div>";
var component={x:w-50,y:100,w:50,h:50,pic:'widget://image/timg.jpg',
rect:{x:0,y:2,w:50,h:50},radius:25,backgroundColor:'#EE0000',
alpha:0.5,border:1,borderColor:'#E066FF',isHtml:true,text:htmltext,
textSize:14,textColor:'#C0FF3E',alignment:0,type:'small',code:26,autoHidden:true};//自定义组件
var styles= [component];
{
rect:{x:0, y:0,w:'auto', h:220},
fixedOn:api.frameName,
fixed:true,
coreType:0,//0 avplayer 1 ijk ios有效
forceDeviceOrientation:false,//旋转方向 true 全屏视频不旋转
radius:2,//圆角大小 默认 0 没有圆角
showBack:true,//返回按钮是否显示小屏幕
showSelect:true,//选集按钮是否显示
showSpeed:true,//倍速按钮是否显示
showShot:true,//截图按钮是否显示
showBottomProcess:true,//最底部播放进度条是否显示
autoPlay:true, //默认false
openCache:false, //是否开启缓存
hideControl:false,//是否隐藏所有控件
backgroundHolder:'widget://launch/launch.png',//视频背景图片
backgroundAlpha:0.3,//0 背景透明度
loop:false,//是否单急循环
styles:styles, //自定义组件样式
index:0,
data:[
{
uid:'',//扩展字段 用户id(可选，会随事件返回)
vid:'',//扩展字段 视频id(可选，会随事件返回)
title:'第一集',
index:'01',
thumb:'https://cms-bucket.nosdn.127.net/eb411c2810f04ffa8aaafc42052b233820180418095416.jpeg',
url:'https://v.feimandao.com/sv/55519dae-17101fcf8f1/55519dae-17101fcf8f1.mp4',
headers:{}//视频 headers json格式 没用可以为空
},
{
uid:'',//扩展字段 用户id(可选，会随事件返回)
vid:'',//扩展字段 视频id(可选，会随事件返回)
title:'第二集',
index:'02',
thumb:'https://cms-bucket.nosdn.127.net/eb411c2810f04ffa8aaafc42052b233820180418095416.jpeg',
url:'https://v.feimandao.com/sv/55519dae-17101fcf8f1/55519dae-17101fcf8f1.mp4',
headers:{}//视频 headers json格式 没用可以为空}
]
}
示例代码
```js var ox = api.require('tinyPlayer'); ox.showInView({ rect:{x:0, y:0,w:'auto', h:220}, fixedOn:api.frameName, fixed:true, radius:2,//圆角大小 默认 0 没有圆角 showBack:true,//返回按钮是否显示小屏幕 showSelect:true,//选集按钮是否显示 showSpeed:true,//倍速按钮是否显示 showShot:true,//截图按钮是否显示 showBottomProcess:true, autoPlay:true,//默认false openCache:false,//是否开启缓存 hideControl:false,//是否隐藏所有控件 backgroundHolder:'widget://launch/launch.png',//视频背景图片 backgroundAlpha:0.3,//0 背景透明度 loop:false,//是否单急循环 styles:styles, index:0, data:[ { uid:'',//扩展字段 用户id(可选，会随事件返回) vid:'',//扩展字段 视频id(可选，会随事件返回) title:'第一集', index:'01', thumb:'https://cms-bucket.nosdn.127.net/eb411c2810f04ffa8aaafc42052b233820180418095416.jpeg', url:'https://v.feimandao.com/sv/55519dae-17101fcf8f1/55519dae-17101fcf8f1.mp4', headers:{}//视频 headers json格式 没用可以为空}, { uid:'',//扩展字段 用户id(可选，会随事件返回) vid:'',//扩展字段 视频id(可选，会随事件返回) title:'第二集', index:'02', thumb:'https://cms-bucket.nosdn.127.net/eb411c2810f04ffa8aaafc42052b233820180418095416.jpeg', url:'https://v.feimandao.com/sv/55519dae-17101fcf8f1/55519dae-17101fcf8f1.mp4', headers:{}//视频 headers json格式 没用可以为空}
]
});```
可用性
Android,ios系统
可提供的1.1.5
updateAtIndex
更新索引 播放数据
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.updateAtIndex({index:0,data:{uid:'',//扩展字段 用户id(可选，会随事件返回) vid:'',//扩展字段 视频id(可选，会随事件返回) title:'第二集', index:'02', thumb:'https://cms-bucket.nosdn.127.net/eb411c2810f04ffa8aaafc42052b233820180418095416.jpeg', url:'https://v.feimandao.com/sv/55519dae-17101fcf8f1/55519dae-17101fcf8f1.mp4', headers:{}//视频 headers json格式 没用可以为空}});
可用性
Android,ios系统
可提供的1.1.5
updateAll
更新所有视频数据
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.updateAll({data:[{uid:'',//扩展字段 用户id(可选，会随事件返回) vid:'',//扩展字段 视频id(可选，会随事件返回) title:'第二集', index:'02', thumb:'https://cms-bucket.nosdn.127.net/eb411c2810f04ffa8aaafc42052b233820180418095416.jpeg', url:'https://v.feimandao.com/sv/55519dae-17101fcf8f1/55519dae-17101fcf8f1.mp4', headers:{}//视频 headers json格式 没用可以为空}]});
可用性
Android,ios系统
可提供的1.1.5
next
播放下一集，只对fixdPlay接口有效
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.next();
可用性
Android,ios系统
可提供的1.1.5
prev
播放上一集，只对fixdPlay接口有效
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.prev();
可用性
Android,ios系统
可提供的1.1.5
playIndex
播放索引集视频，只对fixdPlay接口有效
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.playIndex({index:4});
可用性
Android,ios系统
可提供的1.1.5
start
开始播放
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.start();
可用性
Android,ios系统
可提供的1.1.5
stop
停止播放
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.stop();
可用性
Android,ios系统
可提供的1.1.5
replay
重新播放
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.replay();
可用性
Android,ios系统
可提供的1.1.5
duration
视频时长
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.duration(function(ret) { if (ret.code==0) { alert(ret.duration); } });
可用性
Android,ios系统
可提供的1.1.5
seekTo
指定位置播放
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.seekTo({position:100000});
可用性
Android,ios系统
可提供的1.1.5
position
播放位置
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.position(function(ret) { if (ret.code==0) { alert(ret.position); } });
可用性
Android,ios系统
可提供的1.1.5
screenShot
截屏
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.screenShot(function(ret) { if (ret.code==0) { var base64 = ret.base64; document.getElementById('image').src = 'data:image/png;base64,'+base64; } });
可用性
Android,ios系统
可提供的1.1.5
remove
移除播放器
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.remove();
可用性
Android,ios系统
可提供的1.1.5
showPlay
显示播放器
showPlay()
示例代码
```js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.showPlay(}
);```
可用性
Android,ios系统
可提供的1.1.5
hidePlay
隐藏播放器
hidePlay()
示例代码
```js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.hidePlay(}
);```
可用性
Android,ios系统
可提供的1.1.5
isFull
是否全屏
isFull()
示例代码
```js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.isFull(function(ret) { if (ret.code==0) { alert(ret.isFull); } }
);```
可用性
Android,ios系统
可提供的1.1.5
setVolume
设置音量
setVolume({volume:1.5})
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.setVolume({volume:1.5});
可用性
Android,ios系统
可提供的1.1.5
setMuted
设置静音
setVolume({isMuted:true})
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.setVolume({isMuted:true});
可用性
Android,ios系统
可提供的1.1.5
setSpeed
设置倍速
setSpeed({speed:1.5})
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.setSpeed({speed:1.5});
可用性
Android,ios系统
可提供的1.1.5
exitFullScreen
退出全屏
exitFullScreen()
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.exitFullScreen();
可用性
Android,ios系统
可提供的1.1.5
enterFullScreen
进入全屏
enterFullScreen()
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.enterFullScreen();
可用性
Android,ios系统
可提供的1.1.5
clearCache
清理缓存
clearCache(function(ret) {});
示例代码
```js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.clearCache(function(ret) { if (ret.code==0) {
}
}
);```
可用性
Android,ios系统
可提供的1.1.5
isLock
是否锁屏 fixdPlay fixePlay 有效
isLock()
示例代码
```js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.isLock(function(ret) { if (ret.code==0) { alert(ret.isLock); } }
);```
可用性
Android,ios系统
可提供的1.1.5
getInfo
获取当前视频信息
示例代码
```js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.getInfo(function(ret) {
}
);```
可用性
Android,ios系统
可提供的1.1.5
showSelectView
显示选集 全屏
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.showSelectView();
可用性
Android,ios系统
可提供的1.1.5
showSpeedView
显示倍速 全屏
示例代码
js var tinyPlayer = api.require('tinyPlayer'); tinyPlayer.showSpeedView();
可用性
Android,ios系统
可提供的1.1.5