//vm.gtimg.cn/tencentvideo/txmp/js/txminiplayer_multiplay.js
//vm.gtimg.cn/tencentvideo/txmp/js/txminiplayer.js
1.单个小视频
引入txminiplayer.js
文件,执行
var player = new Txminiplayer({
containerId: 'mod_video_1', //容器id
muted: false, //默认静音
preload: true, //预加载
autoplay: true, //自动播放
vid: 'n1753jrv56k' //视频id
defaultStyle: false //false时不使用默认样式,默认使用
})
2.列表联播
引入txminiplayer_multiplay.js
,执行
//小视频宽高取决于外部容器宽高,所以必须设置宽高属性并将position设为relative
<div id="mod_video_1" style="width: 220px; height: 123px;position: relative;"></div>
<div id="mod_video_2" style="width: 220px; height: 123px;position: relative;"></div>
<div id="mod_video_3" style="width: 220px; height: 123px;position: relative;"></div>
Txminiplayer.multiVideo({
list: [ //bitian
{
containerId: 'mod_video_1' , //容器id
vid:'n1753jrv56k' //视频id
},
{
containerId: 'mod_video_2' , //容器id
vid:'n1753jrv56k' //视频id
},
{
containerId: 'mod_video_3' , //容器id
vid:'n1753jrv56k' //视频id
}
....
]
type:1, //必填
muted: true, 静音 默认为true
preloadNum:1, 预加载数量
autoplay: true, 自动播放 默认true
loop: true, 循环播放 默认false
defaultStyle:true
})
页面若需要懒加载新的小视频,并与已加载形成一个队列,只须再次调用该方法。
3.标签联播
引入txminiplayer_multiplay.js
,执行
//小视频宽高取决于外部容器宽高,所以必须设置宽高属性并将position设为relative
<div id="mod_video_wrapper1" style="width: 220px; height: 123px;position: relative;"></div>
<ul class="changeTag">
<li id="tag1"></li>
<li id="tag2"></li>
<li id="tag3"></li>
</ul>
Txminiplayer.multiVideo({
list: [ //必填
{
lid: 'tag1' , //标签id
vid:'n1753jrv56k' //视频id
},
{
lid: 'tag2' , //标签id
vid:'n1753jrv56k' //视频id
},
{
lid: 'tag2' , //标签id
vid:'n1753jrv56k' //视频id
}
....
]
type:2, //必填
containerId: "mod_video_wrapper1", //必填
cssActive:'active' 标签点击时激活的样式 默认为'active'
muted: true, 静音 默认为true
preloadNum:1, 预加载数量
autoplay: true, 自动播放 默认true
loop: true, 循环播放 默认false
defaultStyle:true
})