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

解决m3u8播放失败的问题

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

<div class="videoBox">
	<video class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" data-setup="{}">
		<source id="changeVideo" src="http://1256144954.vod2.myqcloud.com/0df5a8e8vodgzp1256144954/f13da5507447398155231379472/playlist.m3u8" type="application/x-mpegURL">
	</video>
</div>
<script src="video.min.js"></script>
<script src="videojs.hls.min.js"></script>

当需要动态加载视频源

var player = videojs('myPlayer');

var changeVideo = function(vdoSrc){
	console.log(vdoSrc);
	if(/\.m3u8$/.test(vdoSrc)){//判断视频源是否是m3u8的格式
		player.src({
			src: vdoSrc,
			type: 'application/x-mpegURL'//在重新添加视频源的时候需要给新的type的值
		})
	}else{
		player.src(vdoSrc)
	}
	player.load();
	player.play();
}
var loadVdo = document.getElementById('loadVdo');
var src = 'http://1256144954.vod2.myqcloud.com/0df5a8e8vodgzp1256144954/f13da5507447398155231379472/playlist.m3u8';

loadVdo.addEventListener('click',function(){
	changeVideo(src);
})

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

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

插入js文件

<script src="jquery.js"></script>
<script src="video.min.js"></script>
<script src="videojs.hls.min.js"></script>

HTML代码部分

• 视频播放代码段

<video id="myPlayer" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" data-setup="{}">
	<source id="changeVideo" src="http://1256144954.vod2.myqcloud.com/0df5a8e8vodgzp1256144954/f13da5507447398155231379472/playlist.m3u8"
          type="application/x-mpegURL">
</video>

• 自动播放下一节复选框

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

• 按钮列表

<div class="chapter">
	<button class="playVideo active">1</button>
	<button class="playVideo">2</button>
	<button class="playVideo">4</button>
</div>

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>');
});

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

var changeVideo = function(vdoSrc){
	//判断播放的是哪一个
	currentIndex = getSrc('current',vdoSrc,vdoList);
	console.log(currentIndex)
	if(/\.m3u8$/.test(vdoSrc)){//判断视频源是否是m3u8的格式
		player.src({
			src: vdoSrc,
			type: 'application/x-mpegURL'//在重新添加视频源的时候需要给新的type的值
		})
	}else{
		player.src(vdoSrc)//普通视频
	}
	player.load();
	player.play();
	//添加点击样式 eq是从0开始
	$('.playVideo').removeClass('active').eq(currentIndex-1).addClass('active');
}

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

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