【JS】video播放m3u8格式连续播放以及播放列表

清疚 2022-05-28 06:12 414阅读 0赞

### 解决m3u8播放失败的问题 ###

*当不需要动态加载视频源的时候 直接引入插件的地址即可*

*当需要动态加载视频源*

> 插件下载地址：https://github.com/videojs/videojs-contrib-hls/releases/tag/v5.14.1  
> 官网案例地址：http://videojs.github.io/videojs-contrib-hls/

以下是播放列表：（友情支持-小平平）  
主要实现：上一个 下一个 点击具体视频的按钮切换 是否自动播放>

插入js文件

HTML代码部分

*  视频播放代码段

*  自动播放下一节复选框

<label>
    	<input id="autoNext" type="checkbox" name="autoNext"/>自动播放下一小节
    </label>

*  按钮列表

JS部分

*  定义当前播放那个视频的变量

var currentIndex = 0;//当前播放的小节

*  视频列表数据

var vdoList = [
    	{id:1,src:'http://1256144954.vod2.myqcloud.com/0df5a8e8vodgzp1256144954/f13da5507447398155231379472/playlist.m3u8'},
    	{id:2,src:'video_data/03.mp4'},
    	{id:4,src:'video_data/iu.mp4'}
    ];

*  添加上一个 按钮，添加在暂停键的有两侧

var player = videojs('myPlayer',{},function(){
    	//在菜单项暂停键前后添加上一节下一节
    	$(".vjs-play-control").before('<button class="vjs-previous-control" id="previous">上一个</button>');
        $(".vjs-play-control").after('<button class="vjs-next-control" id="next">下一个</button>');
    });

*  更换当前播放器播放的视频源

*  监听是否结束 根据用户选择是否自动播放下一个

player.on('ended',function(){
    	if( $('#autoNext').is(':checked')  && (currentIndex + 1) <= vdoList.length ){
    		var src = getSrc('src',currentIndex + 1,vdoList)
    		changeVideo( src );
    	}
    })

*  切换播放源是哪一个小节

$('.playVideo').on('click',function(){
    	var index = $(this).index() + 1;
    	src = getSrc('src',index,vdoList);
    	changeVideo( src );	
    })

*  上一个按钮

> 这里用事件委托以及事件冒泡的原理给上一个按钮绑定点击事件  
> 下一个按钮同理

$('body').on('click','#previous',function(){
       	if( (currentIndex - 1) > 0 ){
       		var src = getSrc('src',currentIndex - 1, vdoList);
       		changeVideo( src );
       	}else{	
       		console.log('没有上一个了')
       	}
       })

*  下一个点击按钮

//下一个
    $('body').on('click','#next',function(){
       if( (currentIndex + 1) <= vdoList.length ){
       	var src = getSrc('src',currentIndex + 1, vdoList);
       	changeVideo( src );
       }else{	
       	console.log('没有下一个了');
       }
    })

*  获取数据的src以及当前第几个视频

// 获取数组中对象的视频源或者当前id
    var getSrc = function(type,params,vdoList){
    	for( var i = 0;i < vdoList.length; i++){
    		if( type == 'current' ){
    			if( vdoList[i].src == params ){
    				return i+1;
    			}
    		}else if( type == 'src' ){
    			if( (i+1) == params ){
    				return vdoList[i].src;
    			}
    		}	
    	}
    }

踩的坑：

1.  iis搭建本地服务器，无法播放mp4格式的视频；  
    解决办法：MIME类型，添加文件扩展名称".mp4",MIME类型：“video/mp4”
2.  对于当前所在的视频 currentIndex，  
    由于视频列表的id是顺序数字，并且还给button添加了data-id属性，导致currentIndex的值并不十分准确，导致跳转链接的时候出错，  
    解决办法：currentIndex等于实际的第几个 例如：点击详细小节按钮的时候用index()+1 ，上一个下一个切换，直接-1或者+1