以下是自己對 PC瀏覽器播放HLS協議視訊 的解決方法的一個蒐集總結。

背景

專案要求PC端瀏覽器播放HLS直播視訊，並且不能使用Flash外掛播放器[PS:聽說給政府人員使用的，不允許瀏覽器下載外掛啥的]。

解決方法

videojs

• 功能

支援PC端播放m3u8格式的視訊

• 注意點

可能會出現 跨域 問題，需要服務端的配合，讓視訊允許跨域

• 程式碼展示

//引入的檔案
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"
 
>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>

//html部分
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'
 
>
    <source src="http://www.tony.com/hls/test.m3u8" type="application/x-mpegURL">
 </video>

//js部分 --這部分別忽略了[我自己沒寫，調的快崩潰]
var player=videojs('#my_video_1');
player.play();
複製程式碼

hlsJs

• 程式碼展示

//檔案引入
<script type="text/javascript" src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>

//html部分
<div class="video"
 
 id="HLSPlayer" >

//js部分
var video = document.getElementById('video');
var hls = new Hls();
var hlsUrl = 'http://域名/hls/123.m3u8';
hls.loadSource(hlsUrl);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function(){
    video.play();
});

複製程式碼

TcPlayer 騰訊播放器

• 知識點

點播：視訊源是一個伺服器上的檔案，有進度條

直播：實時直播，無進度條

• 程式碼展示

//引入檔案
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.0.js" charset="utf-8"></script>

// html部分
<div id="id_test_video" style="width:400px; height:300px;"></div>

//js部分
var player =  new TcPlayer('id_test_video', {
   "m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8",
    //"flv": "http://2157.liveplay.myqcloud.com/live/2157_358535a.flv", //增加了一個flv的播放地址，用於PC平臺的播放 請替換成實際可用的播放地址
    "autoplay" : true,      //iOS下safari瀏覽器，以及大部分移動端瀏覽器是不開放視訊自動播放這個能力的
    "coverpic" : "http://img4.imgtn.bdimg.com/it/u=4038339613,2609508265&fm=200&gp=0.jpg",
    "width" :  '480',//視訊的顯示寬度，請儘量使用視訊解析度寬度
    "height" : '320'//視訊的顯示高度，請儘量使用視訊解析度高度
});

複製程式碼

注意：存在跨域問題，並且不能在本地測試，詳情請看以下 TcPlayer 騰訊播放器 的連結

知識點

• 知識點1：
     PC 端需要通過其他手段（videojs-contrib-hls）來解碼 .m3u8 格式的視訊, 才能夠通過 video 標籤或者 Flash 來播放
• 知識點2：
     無 Flash 時代，讓直播擁抱 H5(完整篇)    [可以瞭解一下這篇文章，多學無害嘛]
• 知識點3：
     RTMP: 瀏覽器中只能使用 Flash實現播放器，無法支援移動端 WEB播放
• 知識點4：
    其他 PC瀏覽器播放技術：

1、sewise-player    [Flash和HTML5播放器]Flash播放m3u8檔案
2、mediaelement    [Flash和Sliverlight播放器] 
3、Jwplayer [Flash和HTML5播放器]  網頁媒體播放器 
複製程式碼

遇到的問題

• 跨域問題

解決方法：服務端增加支援跨域請求

參考連結

videojs

• videoJS使用例子

• PC瀏覽器播放m3u8 --videoJs

• 前端video標籤播放m3u8格式視訊

• 前端如何播放m3u8格式的視訊

• PC瀏覽器播放m3u8

• HLS流無法在web端播放解決方案（video.js）

TcPlayer 騰訊播放器

• Web播放器 TcPlayer——騰訊直播sdk的網頁播放器

hlsjs

• hlsJs

• 純HLS（m3u8）跨平臺html5視訊播放外掛

• html5 <video>解析m3u8播放視訊

原始碼

demo地址