美文网首页
小视频播放器使用说明

小视频播放器使用说明

作者: 小小小小小小豪 | 来源:发表于2016-09-05 12:46 被阅读0次

//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
})

相关文章

网友评论

      本文标题:小视频播放器使用说明

      本文链接:https://www.haomeiwen.com/subject/zterettx.html