解決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);
})

以下是播放列表：（友情支援-小平平）
主要實現：上一個 下一個 點選具體視訊的按鈕切換 是否自動播放>

插入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