网页引入腾讯视频小记

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页引入腾讯视频小记相关的知识,希望对你有一定的参考价值。

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

腾讯视频开放平台: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,我们也可以直接改播放按钮的样式。

以上是关于网页引入腾讯视频小记的主要内容,如果未能解决你的问题,请参考以下文章

腾讯视频嵌入网页的方法 腾讯视频嵌入网页代码

抓腾讯视频真实地址总结

急!加分!如何获取网页视频中的URL地址?如优酷、腾讯这些在线的URL格式。

怎么免费看腾讯视频网页版

vue-awesome-swiper图片视频混播小记

引入腾讯视频的播放器组件在页面直接播放视频