案例解析:腾讯视频组件的多种添加方式
目前互娱大部分产品域名已添加至白名单,播放视频时不会再播放广告。.
V3
V3录播:主要代码
<div id=”container”></div>
<!– 使用相对协议,同时支持http和https –>
<script src=//vm.gtimg.cn/tencentvideo/txp/js/txplayer.js></script>
<script>
var player = new Txplayer({
containerId: container,
vid: r0018hmh1pa,
width: 600,
height: 400,
autoplay: true
});
</script>
V3直播:
<script src=”//ossweb-img.qq.com/images/js/jquery/jquery-1.11.3.min.js”></script>
<script src=”//vm.gtimg.cn/tencentvideo/txvlive/2017/txvlive.js”></script>
<script>
var config = {
containerId: 直播容器dom的ID,
vid: 直播ID,
livepid: ,
width: 670,
height: 377,
autoplay: true
};
var player = new TxvLive(config);
player.on(ready, function () {
//准备完成开始播放
});
</script>
V3API:
player.play(); //播放视频,可用作无刷新切换
// 播放视频对象参数
player.play({vid: xxx, autoplay: true})
// 播放视频vid 字符串参数
player.play(xxx)
player.pause(); //暂停视频
player.togglePlayPause(); //暂停或播放视频
player.seekTo( Number::time ) //跳到指定时间点播放
player.getPlayerState() //获取视频播放状态(-1(未开始)、0(已结束)、1(正在播放)、2(已暂停)、3(正在缓冲))
player.mute(); //静音
player.unMute();//取消静音
player.setPoster(String::url); //设置封面图
V3事件:
ready [播放器初始化完成]
error [播放出错]
volumeChange [音量发生变化]
timeupdate [播放时间点变化]
playStateChange [播放状态变化]
definitionChange [清晰度发生变化]
vidChange [播放的视频发生变化]
smallWindowModeChange [进入或退出小窗口模式]
showUIVipGuide [显示vip付费浮层]
browserFullscreenChange [浏览器全屏状态变化]
windowFullscreenChange [系统全屏状态变化]
adStart [广告开始]
adEnd [广告结束]
例:
player.on(volumeChange, function(){ // do sth…});
iframe方式:
将下面这段html嵌入到页面中即可。
<iframe src=”//v.qq.com/iframe/txp/player.html?vid=a00221hqpko&width=600&height=400&autoplay=false” allowFullScreen=”true”></iframe>
DEMO
将参数配置iframe的src可以实现自定义配置。
参数说明:
vid:
作用说明: 点播id或者直播id
参数说明: vid::String
videotype
作用说明: 指定视频播放类型
参数说明(videotype取值如下):
vod 指定为播放点播视频
live 指定为播放直播视频
width
作用说明: 指定视频的宽度
参数说明: width::Number/String
height
作用说明: 指定视频的高度
参数说明: height::Number/String
autoplay
作用说明:控制视频是否自动播放
参数说明:autoplay::Boolean
其他
某些H5需要用到视频,在不能使用腾讯视频组件的情况下,可以联系该专题的重构审核上传视频到内部蜘蛛。
并且让重构审核给到一段JS拉取视频地址的脚本和视频ID。
如:
//ossweb-img.qq.com/images/spiderMediaData/jtlq_new/mediaURLData.js,ID为:599.页面中载入该脚本,根据ID为599可以获取到视频地址。需要注意的是,不要直接从JS内容里面复制地址在页面上用。
因为视频如果重新上传或更改后,视频地址也会更改。