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代码部分

• 视频播放代码段

• 自动播放下一节复选框

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

• 按钮列表

<div class="chapter">
    <button class="playVideo active">1button>
    <button class="playVideo">2button>
    <button class="playVideo">4button>
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('" id="previous">上一个');
    $(".vjs-play-control").after('" id="next">下一个');
});

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

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