網頁引入騰訊視頻小記

前言：更多詳細內容能夠參考騰訊開發平臺的文檔，我在這裏簡單備忘一下

騰訊視頻開放平臺： http://v.qq.com/open/index.html
文檔： http://v.qq.com/open/doc/tvpa...

方法一：引入iframe

在視頻播放界面的左下方，鼠標移動到分享，複製通用代碼放在頁面上便可

方法二：引入js

一、引入js:

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

二、html部分：

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

3.一、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.二、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，咱們也能夠直接改播放按鈕的樣式。