腾讯视频
组件说明
-
目前互娱大部分产品域名已添加至白名单，播放视频时不会再播放广告，如页面上的播放器依然播放广告，或者需要添加新域名到广告白名单，请产品联系内部重构审核
[-]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...});
DEMO:[点击查看]
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
--------------------------------------------------------------------------------------------------------------------------------------------------------
[-]V2
主要代码(PS:调用tvp.player.js时必须加上charset="utf-8"以防止乱码问题,调用精简皮肤需要补全http://，自适应无法生效)
<script src="//imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2.js" charset="utf-8"></script><script>
var video = new tvp.VideoInfo();
video.setVid("i001216370f");
var player = new tvp.Player();
player.create({
width: 480,
height: 360,
video: video,
modId: "mod_player",
pic: "http://ossweb-img.qq.com/images/roco/act/a20120925movie/video_pic.jpg", //视频封面地址
autoplay: true //是否自动播放
});
</script>
PS：2.0需要服务器环境
DEMO地址，猛戳这里
[-]直播
<div id="mod_player"></div>
<script src="http://imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2.js" type="text/javascript"></script>
<script>
var video = new tvp.VideoInfo();
video.setChannelId("18091377");
var player = new tvp.Player();
player.create({
width: 480,
height: 360,
type: 1,
video: video,
modId: "mod_player",
autoplay: true
});
</script>
[-]其他
某些H5需要用到视频，在不能使用腾讯视频组件的情况下，可以联系该专题的重构审核上传视频到内部蜘蛛。
并且让重构审核给到一段JS拉取视频地址的脚本和视频ID。
如：//ossweb-img.qq.com/images/spiderMediaData/jtlq_new/mediaURLData.js，ID为：599.
页面中载入该脚本，根据ID为599可以获取到视频地址。需要注意的是，不要直接从JS内容里面复制地址在页面上用。
因为视频如果重新上传或更改后，视频地址也会更改。