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