美文网首页
m3u8视频播放暂停不了,解决方法分享

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

作者: Limolovely | 来源:发表于2024-08-26 17:01 被阅读0次

我一直用的是之前随笔中分享的【处理播放多个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();
                  });
                }
              }
            }
          }     

相关文章

  • 书签-视频

    视频 Android 离线播放 (HLS)m3u8文件 - CSDN博客Android 实现m3u8视频缓存 - ...

  • 记录一次逆向分析解密某课堂加密视频

    视频是某课堂加密了的,直接抓包得到m3u8文件下载是下载不了的,直接下载m3u8内的ts文件也是播放不了的。通过下...

  • vue+videojs九宫格切换播放(含源码)

    vuecli中引入videojs进行m3u8视频播放以及分栏切换,内容涉及视频播放、宫格切换、选中窗口视频替换功能...

  • M3U8视频播放与下载

    现在很多视频都采用了M3U8格式播放视频,不同于MP4整个文件URL直接播放,iOS要针对M3U8文件作特殊处理,...

  • 微信小程序多视频播放

    需求:播放某个视频,暂停其他正在播放的视频。 解决代码如下:

  • ios 11 safari上的video奇葩问题

    video标签如下设置: 在获取到摄像头视频流后,视频正中间有个大大的播放按钮,或者暂停按钮。 解决方法如下: /...

  • ❖ 网页视频流m3u8/ts视频下载

    现在很多视频网站播放流视频,都不是采用mp4/flv文件直接播放,而是采用m3u8/ts这种方式播放。 简单说就是...

  • H5视频兼容安卓、IOS踩坑相关

    1.视频暂停和播放 将JQ对象转换为原生JS对象 有遮罩层的视频播放和暂停 2.音乐开关 3.视频切换+音量播放 ...

  • iOS 视频播放

    方式1:AVPlayer 通过AVPlayer播放视频,视频播放样式如上图所示。可以看到没有对视频播放的控制(暂停...

  • WMPlayer - 网络视频播放

    WMPlayer视频播放器,AVPlayer的封装,继承UIView,想怎么玩就怎么玩。支持播放mp4、m3u8、...

网友评论

      本文标题:m3u8视频播放暂停不了,解决方法分享

      本文链接:https://www.haomeiwen.com/subject/aylakjtx.html