m3u8视频播放暂停不了,解决方法分享

2024-08-26  本文已影响0人  Limolovely

我一直用的是之前随笔中分享的【处理播放多个m3u8类型的视频】的方式,最近这个播放方法在结合轮播组件使用的时候,发现很多video事件居然用不了。
然后做出修改以后可正常使用了
之前获取videoList的方式

var videoList = document.getElementsByTagName('video');//通过video标签获取

修改后

var videoList = document.getElementsByClassName('myVideo');//通过myVideo的class名获取

结合轮播使用的完整代码

<video  class="head-img video-js vjs-default-skin myVideo" controls preload="auto" width="980"
    height="520" data-setup='{}' src="{content.linkUrl}" poster="{content.ImageUrl}"
    autoplay>
</video>
slideChange: function(){//swiper方法中调用
   var videoList = document.getElementsByClassName('myVideo');
    for(var i=0;i<videoList.length;i++){
        if(i==this.activeIndex){
                   videoList[i].play();
        }else{
            videoList[i].pause();
        }
    }
 }

 if(Hls.isSupported()) {//调用hls.js初始化
            var videoList =  document.getElementsByClassName('myVideo');
            for(var i=0;i<videoList.length;i++){
              if(videoList[i]){
                var videoSrc=$(videoList[i]).attr("src")
                var index=videoSrc.lastIndexOf(".");
                var type=videoSrc.substring(index+1);
                if(type=="m3u8"){
                  var hls = new Hls();
                  hls.loadSource(videoSrc);
                  hls.attachMedia(videoList[i]);
                  hls.on(Hls.Events.MANIFEST_PARSED,function() {
            videoList[i].play();
                  });
                }
              }
            }
          }     

上一篇 下一篇

猜你喜欢

热点阅读