网页引入腾讯视频小记

前言：更多详细内容可以参考腾讯开发平台的文档，我在这里简单备忘一下

腾讯视频开放平台：http://v.qq.com/open/index.html
文档：http://v.qq.com/open/doc/tvpa...

方法一：引入iframe

在视频播放界面的左下方，鼠标移动到分享，复制通用代码放在页面上即可

方法二：引入js

1、引入js:

<script src="//imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2_jq.js"></script>

2、html部分：

<div id="videoId" class="video-wrapper"></div>

3.1、js部分（保留播放按钮）

<script type="text/javascript">(function(){var videoSet={vid:'w0378xrv3dh',poster:'//****/poster.jpg',//手机端poster图width:$(".video-wrapper").width,height:$(".video-wrapper").height}var video = new tvp.VideoInfo();video.setVid(videoSet.vid);var player = new tvp.Player();player.create({video: video,modId: "videoId",width:videoSet.width,height:videoSet.height,pic:videoSet.poster,isHtml5ShowPosterOnEnd:true,isiPhoneShowPosterOnPause:true,vodFlashSkin:'http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf',//精简皮肤onwrite: function() {console.log("播放器显示完毕");},onpause:function(){console.log('暂停了')},onallended:function(){console.log('播放完了')}});player.addParam("wmode","transparent");})();
</script>

还有一种需求是 播放按钮 要求用其它样式的，我们可以把原本的播放按钮隐藏掉，然后把在视频封面图上加上视频按钮，如下图：

于是有了3.2
3.2、js部分 ：（去掉了播放按钮）

<script type="text/javascript">(function(){var videoSet={vid:'w0378xrv3dh',poster:'//***/poster.jpg',//手机端poster图width:$(".video-wrapper").width,height:$(".video-wrapper").height}var video = new tvp.VideoInfo();video.setVid(videoSet.vid);var player = new tvp.Player();player.create({video: video,modId: "videoId",width:videoSet.width,height:videoSet.height,pic:videoSet.poster,isHtml5ShowPosterOnEnd:true,isiPhoneShowPosterOnPause:true,vodFlashSkin:'http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf',//精简皮肤onwrite: function() {console.log("播放器显示完毕");$('.tvp_overlay_play').css({'background-color': 'rgba(255, 255, 255, 0)'});$(".tvp_button_play").css({'border':'none'});},
onplaying:function(){console.log('开始播放');},onpause:function(){console.log('暂停了')$('.tvp_overlay_play').css({'background-color': 'rgba(255, 255, 255, 0)'});$(".tvp_button_play").css({'border':'none'});$(".tvp_overlay_replay .tvp_button_replay").css({'background':'transparent'});$(".tvp_overlay_play, .tvp_overlay_play_try, .tvp_overlay_replay").css({'background':'transparent'});},onallended:function(){console.log('播放完了')$('.tvp_overlay_play').css({'background-color': 'rgba(255, 255, 255, 0)'});$(".tvp_button_play").css({'border':'none'});$(".tvp_overlay_replay .tvp_text").css({'font-size':0});}});player.addParam("wmode","transparent");})();
</script>

对于3.2，我们也可以直接改播放按钮的样式。