使用HTML視頻標籤播放m3u8文件

我正在嘗試使用HTTP直播流式（HLS）將視頻傳輸到我的電腦和我的iPhone。在閱讀了Apple的'HTTP Live Streaming Overview'以及'爲iPhone和iPad創建和部署HTTP Live流媒體的最佳實踐'之後，我有點卡住了。使用HTML視頻標籤播放m3u8文件

我把我的源文件（MKV），並使用的ffmpeg該文件的MPEG-TS格式和蘋果推薦的設置和基線3.0配置文件編碼：

ffmpeg -i "example.mkv" -f mpegts -threads:v 4 -sws_flags bicubic -vf "scale=640:352,setdar=16/9,ass=sub.ass" -codec:v libx264 -r 29.970 -b:v 1200k -profile:v baseline -level:v 3.0 -movflags faststart -coder 1 -flags +loop -cmp chroma -partitions +parti8x8+parti4x4+partp8x8+partb8x8 -me_method hex -subq 6 -me_range 16 -g 239 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -b_strategy 1 -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4 -direct-pred 1 -fast-pskip 1 -af "aresample=48000" -codec:a libvo_aacenc -b:a 96k -ac 2 -y "output.ts"

不用擔心那裏。我使用pre-compiled segmenting tool來分割視頻並構建.m3u8播放列表。得到的文件是這樣的：

#EXTM3U 
#EXT-X-TARGETDURATION:10 
#EXTINF:10, 
http://localhost/media/stream/stream-1.ts 
#EXTINF:10, 
http://localhost/media/stream/stream-2.ts 
#EXTINF:10, 
http://localhost/media/stream/stream-3.ts 
#EXT-X-ENDLIST

我檢查，對一些Example Playlist Files for use with HTTP Live Streaming，我看不出有什麼問題。我也嘗試在VLC中播放.m3u8文件，它像一個魅力。

我創建一個HTML頁面來播放該文件：

<html lang="en"> 
    <head> 
     <meta charset=utf-8/> 
    </head> 
    <body> 
     <div id='player'> 
      <video width="352" height="288" src="stream.m3u8" controls autoplay> 
      </video> 
     </div> 
    </body> 
</html>

而這個頁面不會在Chrome，Safari瀏覽器的工作，在我的iPhone。 w3schools上的html5視頻標籤示例在我的電腦上運行良好，上面提到的官方Apple概述給出了一個與我的頁面非常相似的HTML示例。不過，當我訪問我自己的.m3u8頁面時，我的視頻播放器完全沒有反應。

來源

2013-11-05 drucifer

你可以顯示mediastreamvalidator工具的輸出嗎？ – vipw

感謝您的回覆！不幸的是，我還沒有分出現金來成爲一個「真正的」蘋果開發者，所以我沒有那個特定的工具。我一直在尋找一個可能的替代品，但沒有多大成功。任何建議你可以在這方面給予歡迎！ – drucifer

也許你可以把文件放在公共網絡服務器上。如果您需要免費的網絡服務器，您可以使用微型Amazon EC2實例。然後有人可以使用更多的工具來看看。其實，這讓我想知道你的web服務器返回的MIME類型......看看這可能有所幫助：http://stackoverflow.com/questions/6438680/http-live-streaming-not-working-on- apache/15696465 – vipw

可能有點晚了，但您需要在視頻標記中提供MIME類型屬性：type =「application/x-mpegURL」。我用於16：9流的視頻標籤看起來像這樣。

<video width="352" height="198" controls> 
    <source src="playlist.m3u8" type="application/x-mpegURL"> 
</video>

來源

2014-04-22 16:50:58

+12

如果其他人已經測試過這個答案，應該指出，它不適用於Chrome。在Edge中運行良好。請查看[answer]（http://stackoverflow.com/a/23388308/4092887）以獲取關於瀏覽器兼容性解決方案的更多信息。 –

由於HLS不是HLS的本地瀏覽器，因此HLS不會在Chrome瀏覽器中的一個視頻標籤中進行流式傳輸。 – HeidiWF

添加到ben.bourdin答案，你至少可以在任何基於HTML的應用程序，檢查瀏覽器中的視頻元素支持HLS：

Let's假設你的視頻元素ID爲「爲myVideo」，然後通過JavaScript可以使用「canPlayType」功能（http://www.w3schools.com/tags/av_met_canplaytype.asp）

var videoElement = document.getElementById("myVideo"); 
if(videoElement.canPlayType('application/vnd.apple.mpegurl') === "probably" || videoElement.canPlayType('application/vnd.apple.mpegurl') === "maybe"){ 
    //Actions like playing the .m3u8 content 
} 
else{ 
    //Actions like playing another video type 
}

的canPlayType函數，返回：

「」當沒有suppo RT指定的音頻/視頻類型

「也許」的時候，瀏覽器可能支持指定的音頻/視頻類型

「可能」時，它最有可能支持指定的音頻/視頻的類型（你可以只使用這在驗證值更確保您的瀏覽器支持特定類型）

希望這有助於:)

最好的問候！

來源

2016-08-11 14:19:25 MaxTomasello

<html> 
<body> 
    <video width="600" height="400" controls> 
     <source src="index.m3u8" type="application/x-mpegURL"> 
    </video> 
</body>

流HLS或使用上述代碼M3U8文件。它適用於邊緣瀏覽器，鉻，歌劇迷你（手機瀏覽器）（不與PC鉻合作）

要在所有瀏覽器上使用基於閃存的媒體播放器。 media player to support all browser

來源

2017-01-03 09:53:35

使用的Flowplayer：

<link rel="stylesheet" href="//releases.flowplayer.org/7.0.4/commercial/skin/skin.css"> 
    <style> 

    </style> 
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script src="//releases.flowplayer.org/7.0.4/commercial/flowplayer.min.js"></script> 
    <script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script> 
    <script> 
    flowplayer(function (api) { 
    api.on("load", function (e, api, video) { 
     $("#vinfo").text(api.engine.engineName + " engine playing " + video.type); 
    }); }); 
    </script> 

<div class="flowplayer fixed-controls no-toggle no-time play-button obj" 
     style=" width: 85.5%; 
    height: 80%; 
    margin-left: 7.2%; 
    margin-top: 6%; 
    z-index: 1000;" data-key="$812975748999788" data-live="true" data-share="false" data-ratio="0.5625" data-logo=""> 
     <video autoplay="true" stretch="true"> 

     <source type="application/x-mpegurl" src="http://live.wmncdn.net/safaritv2/live2.stream/index.m3u8"> 
     </video> 
    </div>

不同的方法在flowplayer.org網站上提供。

來源

2017-12-14 12:58:56

使用HTML視頻標籤播放m3u8文件

回答

相關問題