video.js支持m3u8格式直播

https://www.cnblogs.com/saysmy/p/6429835.html

爲什麼要使用video.js？

1. PC端瀏覽器並不支持video直接播放m3u8格式的視頻

2. 手機端各式各樣的瀏覽器定製的video界面風格不統一，直接寫原生的js控制視頻兼容性較差

3. video.js解決以上兩個問題，還可以有各種視頻狀態接口暴露，優化體驗

核心代碼：

<!DOCTYPE html>
<html>
<head>
    <title>videojs支持hls直播實例</title>
    <link href="./video.css?v=bcd2ce1385" rel="stylesheet">
</head>
<body>

    <video id="roomVideo" class="video-js vjs-default-skin vjs-big-play-centered" x-webkit-airplay="allow" poster="" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
        <source src="/chat/playlist.m3u8"  type="application/x-mpegURL">
    </video>

    <script src="./video.js?v=fc5104a2ab23"></script>
    <script src="./videojs-contrib-hls.js?v=c726b94b9923"></script>
    
    <script type="text/javascript">
        var myPlayer = videojs('roomVideo',{
            bigPlayButton : false,
            textTrackDisplay : false,
            posterImage: true,
            errorDisplay : false,
            controlBar : false
        },function(){
            console.log(this)
            this.on('loadedmetadata',function(){
                console.log('loadedmetadata');
                //加載到元數據後開始播放視頻
                startVideo();
            })

            this.on('ended',function(){
                console.log('ended')
            })
            this.on('firstplay',function(){
                console.log('firstplay')
            })
            this.on('loadstart',function(){
            //開始加載
                console.log('loadstart')
            })
            this.on('loadeddata',function(){
                console.log('loadeddata')
            })
            this.on('seeking',function(){
            //正在去拿視頻流的路上
                console.log('seeking')
            })
            this.on('seeked',function(){
            //已經拿到視頻流,可以播放
                console.log('seeked')
            })
            this.on('waiting',function(){
                console.log('waiting')
            })
            this.on('pause',function(){
                console.log('pause')
            })
            this.on('play',function(){
                console.log('play')
            })

        });

        var isVideoBreak;
        function startVideo() {

            myPlayer.play();

            //微信內全屏支持
            document.getElementById('roomVideo').style.width = window.screen.width + "px";
            document.getElementById('roomVideo').style.height = window.screen.height + "px";


            //判斷開始播放視頻，移除高斯模糊等待層
            var isVideoPlaying = setInterval(function(){
                var currentTime = myPlayer.currentTime();
                if(currentTime > 0){
                    $('.vjs-poster').remove();
                    clearInterval(isVideoPlaying);
                }
            },200)

            //判斷視頻是否卡住，卡主3s重新load視頻
            var lastTime = -1,
                tryTimes = 0;
            
            clearInterval(isVideoBreak);
            isVideoBreak = setInterval(function(){
                var currentTime = myPlayer.currentTime();
                console.log('currentTime'+currentTime+'lastTime'+lastTime);

                if(currentTime == lastTime){
                    //此時視頻已卡主3s
                    //設置當前播放時間爲超時時間，此時videojs會在play()後把currentTime設置爲0
                    myPlayer.currentTime(currentTime+10000);
                    myPlayer.play();

                    //嘗試5次播放後，如仍未播放成功提示刷新
                    if(++tryTimes > 5){
                        alert('您的網速有點慢，刷新下試試');
                        tryTimes = 0;
                    }
                }else{
                    lastTime = currentTime;
                    tryTimes = 0;
                }
            },3000)

        }
    </script>

</body>
</html>

源碼請移步github：

videojs支持hls直播實例

附：

一.　　視頻狀態分析：

EVENTS

durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited

currentTime()可以用來發輔助判斷視頻播放情況

HLS 直播協議m3u8詳解：

https://blog.csdn.net/aoshilang2249/article/details/82012187

一、HLS是什麼

HTTP Live Streaming（縮寫是HLS）是一個由蘋果公司提出的基於HTTP的流媒體網絡傳輸協議。是蘋果公司QuickTime X和iPhone軟件系統的一部分。它的工作原理是把整個流分成一個個小的基於HTTP的文件來下載，每次只下載一些。當媒體流正在播放時，客戶端可以選擇從許多不同的備用源中以不同的速率下載同樣的資源，允許流媒體會話適應不同的數據速率。

在開始一個流媒體會話時，客戶端會下載一個包含元數據的extended M3U (m3u8)playlist文件，用於尋找可用的媒體流。HLS只請求基本的HTTP報文，與實時傳輸協議（RTP)不同，HLS可以穿過任何允許HTTP數據通過的防火牆或者代理服務器。它也很容易使用內容分發網絡來傳輸媒體流。

RTMP指Adobe的RTMP(Realtime Message Protocol)，廣泛應用於低延時直播，也是編碼器和服務器對接的實際標準協議，在PC（Flash）上有最佳觀看體驗和最佳穩定性。

HLS指Apple的HLS(Http Live Streaming)，本身就是Live（直播）的，不過Vod（點播）也能支持。HLS是Apple平臺的標準流媒體協議，和RTMP在PC上一樣支持得天衣無縫。

二、HLS主要的應用場景

跨平臺：PC主要的直播方案是RTMP，也有一些庫能播放HLS，譬如jwplayer，基於osmf的hls插件也一大堆。所以實際上如果選一種協議能跨 PC/Android/IOS，那就是HLS。

IOS上苛刻的穩定性要求：IOS上最穩定的當然是HLS，穩定性不差於RTMP在PC-flash上的表現。

友好的CDN分發方式：目前CDN對於RTMP也是基本協議，但是HLS分發的基礎是HTTP，所以CDN的接入和分發會比RTMP更加完善。能在各種CDN之間切換，RTMP也能，只是可能需要對接測試。

簡單：HLS作爲流媒體協議非常簡單，apple支持得也很完善。Android對HLS的支持也會越來越完善。至於DASH/HDS，好像沒有什麼特別的理由，就像linux已經大行其道而且開放，其他的系統很難再廣泛應用。

總之，SRS支持HLS主要是作爲輸出的分發協議，直播以RTMP+HLS分發，滿總各種應用場景。點播以HLS爲主。

三、HLS協議詳解

HLS是提供一個m3u8地址，Apple的Safari瀏覽器直接就能打開m3u8地址，譬如：

http://demo.srs.com/live/livestream.m3u8

Android不能直接打開，需要使用html5的video標籤，然後在瀏覽器中打開這個頁面即可，譬如：

<video width="640" height="360"

autoplay controls autobuffer

src="http://demo.srs.com/live/livestream.m3u8"

type="application/vnd.apple.mpegurl">

</video>

HLS協議規定

視頻的封裝格式是TS。

視頻的編碼格式爲H264,音頻編碼格式爲MP3、AAC或者AC-3。

除了TS視頻文件本身，還定義了用來控制播放的m3u8文件（文本文件）。

HLS協議說明

HLS的m3u8，是一個ts的列表，也就是告訴瀏覽器可以播放這些ts文件，譬如：

#EXTM3U

#EXT-X-VERSION:3

#EXT-X-ALLOW-CACHE:YES

#EXT-X-TARGETDURATION:13

#EXT-X-MEDIA-SEQUENCE:430

#EXT-X-PLAYLIST-TYPE:VOD

#EXTINF:11.800

news-430.ts

#EXTINF:10.120

news-431.ts

#EXT-X-DISCONTINUITY

#EXTINF:11.952

news-430.ts

#EXTINF:12.640

news-431.ts

#EXTINF:11.160

news-432.ts

#EXT-X-DISCONTINUITY

#EXTINF:11.751

news-430.ts

#EXTINF:2.040

news-431.ts

#EXT-X-ENDLIST

EXTM3U

每個M3U文件第一行必須是這個tag，提供標示作用

EXT-X-VERSION

用以標示協議版本。這裏是3，那麼這裏用的就是HLS協議第三個版本，此標籤只能有0或1個，不寫代表使用版本1

EXT-X-TARGETDURATION

所有切片的最大時長，有些Apple設備這個參數不正確會無法播放。

EXT-X-MEDIA-SEQUENCE

切片的開始序號。每一個切片都有唯一的序號，相鄰之間序號+1。這個編號會繼續增長，保證流的連續性。

EXTINF

ts 切片的實際時長。duration : 媒體持續時間

#EXTINF <duration>,<title>

EXT-X-PLAYLIST-TYPE

類型，vod 表示點播。

EXT-X-ENDLIST

文件結束符號。表示不再向播放列表文件添加媒體文件。

nginx解決跨域原理及相關配置

https://blog.csdn.net/qq_30130355/article/details/82220532

1、什麼是跨域

從某一個域請求其他域的各類資源，其中只要兩個地址的域名、端口以及協議有不同的地方就會視爲跨域，跨域資源無法直接獲取。

比如：

域名不同 www.a.com/1.html 請求 www.b.com/1.js

端口不同 www.a.com:8000/1.html 請求 www.a.com:8001/1.js

協議不同 http://www.a.com/1.html 請求 https://www.a.com/1.html

2、nginx如何解決跨域問題

拿上面的來舉例，a網站向b網站請求1.js文件時，向b網站發送一個獲取的請求，nginx根據配置文件接收這個請求，代替a網站向b網站來請求這個資源，nginx拿到這個資源後再返回給a網站，以此來解決了跨域問題。

3、nginx配置

server {

#監聽8000端口

listen 8000;

#監聽指定的ip地址

server_name 10.10.2.116;

#對對應url路徑執行反向代理,如10.10.2.116:8000/demo

location /demo {

#目標的ip地址

proxy_pass http://10.10.2.116:10037;

}

通過此配置可以實現訪問10.10.2.116的8000端口來獲取同ip下10037端口下的相應資源

視頻直播m3u8協議以及跨域問題和Videojs加載m3u8視頻彙總

video.js支持m3u8格式直播

HLS 直播協議m3u8詳解：

nginx解決跨域原理及相關配置

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

free AI online tools All In One

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU啓動那些事（12.A）- uSDHC eMMC啓動時間(RT1170)

linux安裝cuda和cudnn

Mellanox網卡開啓SR-IOV

模擬手機設備：使用 Playwright 實現移動端自動化測試

HTML 00 Tutorial

全面系統的AI學習路徑，幫助普通人也能玩轉AI

從零開始：使用 Playwright 腳本錄製實現自動化測試

uni-app實現上拉加載

修改瀏覽器滾動條樣式（兼容火狐，谷歌)

mysql-connector-java各版本及與mysql、JDK版本的對應

視頻直播m3u8協議以及跨域問題和Videojs加載m3u8視頻彙總

html2canvas以及domtoimage的使用踩坑總結

ArcGIS JS 加載WMTS服務（超圖示例）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結