我一直用的是之前隨筆中分享的【處理播放多個(gè)m3u8類型的視頻】的方式徒爹，最近這個(gè)播放方法在結(jié)合輪播組件使用的時(shí)候嘉蕾，發(fā)現(xiàn)很多video事件居然用不了非凌。
然后做出修改以后可正常使用了
之前獲取videoList的方式
var videoList = document.getElementsByTagName('video');//通過video標(biāo)簽獲取
修改后
var videoList = document.getElementsByClassName('myVideo');//通過myVideo的class名獲取
結(jié)合輪播使用的完整代碼
<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方法中調(diào)用
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()) {//調(diào)用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();
});
}
}
}
}
