zoukankan      html  css  js  c++  java
  • JS截取腾讯视频和去除视频广告

    一:腾讯视频截取

    H5视频播放除了video标签以外,还有iframe嵌套视频

    项目需求是用户输入腾讯视频的html链接,如

    https://v.qq.com/x/page/y0116k2vspw.html

    需要把这个html转化为视频,在这里最最关键的一点就是视频videoId的获取,正常情况下videoId就是.html前面字段

    用JS把视频ID拿出来

    var startIndex=data.info.video.link.lastIndexOf('/') //data.info.video.lonk是后台返回的用户输入的视频链接
    var video=data.info.video.link.substr(startIndex+1)
    var endIndex=video.split('.')[0] //最后得到视频的videoid(endindex=y0116k2vspw)

    接下来及就是JS调用腾讯统一播放器(参考地址 https://www.jianshu.com/p/081a4b1cdfc8)

    一:Version1.0

    1、

    首先引入<script language="javascript" src="http://qzs.qq.com/tencentvideo_v1/js/tvp/tvp.player.js" charset="utf-8"></script>

    2、参数配置

    <script>
        var video = new tvp.VideoInfo();  //初始化视频对象
        video.setVid(vid);                //向视频对象传入视频vid ,这个是点播的时候使用,vid就是视频的videoid
        //video.setChannelId(cnlid);      //向视频对象传入直播频道cnlid ,这个是直播的时候使用
    
        /*点播跟直播的区别主要是:
            点播是通过video.setVid(vid); 
            而直播是通过video.setChannelId(cnlid); 设置直播id
            点播需要player.addParam('type','2');或者省略,因为默认播放器为点播状态;
            直播必须通过player.addParam('type','1');设置播放器为直播状态,。
        */
        
        var player = new tvp.Player(width, height);  //初始化播放器对象并设置宽、高,可以直接写具体数字,页可以通过JS动态改变
        player.setCurVideo(video);                   //设置播放器初始化时加载的视频
        player.addParam('type','1');                 //设置播放器为直播状态,1表示直播,2表示点播,默认为2
        player.addParam("wmode","transparent");      //设置透明化,不设置时,视频为最高级,总是处于页面的最上面,此时设置z-index无效
        player.addParam('autoplay',false);           //是否自动播放
        player.addParam('pic','');                   //播放器默认图,当autoplay=0时有效;不传入则使用视频截图                                  
        player.addParam('showend',0)                 //结束时是否有广告

         player.addParam("adplay","0");       //去除广告 ,默认 1 是显示广告,0是屏蔽广告

         player.addParam("player","html5");   //播放器类型为html5,还可以设置为控件播放,flash播放,以及auto 自动选择等

        player.addParam("flashskin", "http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf"); //flash播放器精简皮肤;不传入则使用默认皮肤
        player.addParam("loadingswf", "http://imgcache.qq.com/minivideo_v1/vd/res/skins/web_small_loading.swf");   //加载视频时的swf动画; 不传入则使用默认样式
        player.write(DOMid);                         //输出播放器,DOMid为播放器的容器
        //events
        player.onplaying = function(vid) {
            console.log(vid);
        }
        player.onended = function(vid) {
            console.log(vid);
        }
        
    </script>

    二:Version2.0

    1、

    首先引入<script language="javascript" src="http://imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2.js" charset="utf-8"></script>

    2、参数配置

    <script>
      var video = new tvp.VideoInfo();
      video.setVid(vid);
      var player =new tvp.Player();
      player.create({
         width,       //播放器的宽度
        height: height, //播放器的高度
        video: video,       //默认的视频对象
        modId: DOMid,       //默认的 DOM 元素 ID
        autoplay: false,
        pic: imgURL
      });
      player.onplaying = function (vid){
        console.log(vid)
      }
      player.onallended = function (vid){
        console.log(vid)
      };
    </script>

     完美去除腾讯视频广告

  • 相关阅读:
    Building Performant Expand & Collapse Animations
    选取图片上对应区域
    css绝对对齐
    如何在node.js中使用neo4j
    io.js的六大新特性
    npm-install once
    C# EF & linq &重定向等常用操作
    js 数组
    jquery/js iframe 元素操作
    js on 和 bind 绑定click的区别 事件的冒泡 捕获 委托
  • 原文地址:https://www.cnblogs.com/xxflz/p/10115100.html
Copyright ? 2011-2022 开发猿


http://www.vxiaotou.com