腾讯视频统一播放器

使用场景：PC端和移动端
腾讯视频统一播放器是视频应用于全平台播放(电脑，手机，平板电脑，电视[Sumsang],支持点播和直播,支持自定义插件的JavaScript框架。
可根据实际需要，选择使用JavaScript 或 IFrame两种方式来使用

[success] 提醒

目前互娱大部分产品域名已添加至白名单，播放视频时不会再播放广告，如页面上的播放器依然播放广告，或者需要添加新域名到广告白名单，请产品联系内部重构审核

JavaScript 方式

点播

<div id="container"></div>
<!-- 使用相对协议，同时支持http和https -->
<script src='//vm.gtimg.cn/tencentvideo/txp/js/txplayer.js'></script>
<script>
    var player = new Txplayer({
        containerId: '点播容器dom的ID',
        vid: '点播vid',
        width: '600',
        height: '400',
        autoplay: true
    });
</script>

用法示例:[点击查看]

直播

    <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>

API：

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); //设置封面图

事件：

ready [播放器初始化完成]
error [播放出错]
volumeChange [音量发生变化]
timeupdate [播放时间点变化]
playStateChange [播放状态变化]
definitionChange [清晰度发生变化]
vidChange [播放的视频发生变化]
smallWindowModeChange [进入或退出小窗口模式]
browserFullscreenChange [浏览器全屏状态变化]
windowFullscreenChange [系统全屏状态变化]

例：

player.on('volumeChange', function(){  // do sth...});

DEMO:[点击查看]

iframe方式

JS API方式

点播

<div id="video_container"></div>
<script type="text/javascript" src="//vm.gtimg.cn/tencentvideo/txp/js/iframe/api.js"></script>
<script>
    // 点播方式
    var player = new Txp.Player({
        containerId: 'video_container',
        width:800,
        height:600,        
        vid: '点播ID',
        autoplay:false,
        mini:false  //是否使用迷你皮肤
    });

</script>

直播

<div id="video_container"></div>
<script type="text/javascript" src="//vm.gtimg.cn/tencentvideo/txp/js/iframe/api.js"></script>
<script>
    // 直播方式
    var player = new Txp.LivePlayer({
        containerId: 'video_container',
        vid: '直播ID',
        width:800,
        height:600,
        autoplay:false,
        livepid: '',    
    });

</script>

嵌套iframe直播

<iframe src="v.qq.com/txp/iframe/live.html?vid=140313501&livepid=1825" allowFullScreen="true"></iframe>

参数说明：

vid : string 直播流id
livepid : number 直播节目id
width : number | string 指定视频的宽度
height : number | string 指定视频的高度
autoplay : boolean 控制视频是否自动播放
bullet: boolean 是否显示弹幕输入框（需要搭配openLogin事件，如果是直接引用iframe的方式，那么点击弹幕输入框的登录，会直接跳转到v.qq.com首页）
allowFullScreen: boolean 是否显示全屏按钮

其他

某些H5需要用到视频，在不能使用腾讯视频组件的情况下，可以联系该专题的重构审核上传视频到内部蜘蛛。

并且让重构审核给到一段JS拉取视频地址的脚本和视频ID。

如：//ossweb-img.qq.com/images/spiderMediaData/jtlq_new/mediaURLData.js，ID为：599.

页面中载入该脚本，根据ID为599可以获取到视频地址。需要注意的是，不要直接从JS内容里面复制地址在页面上用。

因为视频如果重新上传或更改后，视频地址也会更改。

腾讯视频