如何使用HTML5 <video>元素播放m3u8（文件）視頻？

我碰到談到有關播放M3U8文件，這個計算器鏈接：Playing m3u8 Files with HTML Video Tag 如何使用HTML5 <video>元素播放m3u8（文件）視頻？

我試圖做類似在劇中M3U8文件中的視頻鏈接像phpfiddle東西：

echo '<video width="352" height="198" controls> 
<source src="https://udemy-adaptive-streaming-prod.udemy.com/9287/72689/2012-04-30_04-09-49-f5ad53b1736807ee7f8837b37115aeeb/hls/677cda5a7077be8d22348b5edebd77db.m3u8?sign=%252BCIehx2LKCxUcNSU33mWdfm5SbA%253D&mign=EEsJDxEabAoMa1kFRgIfbEkIDw8RHGwKDGtZXAFYS3lHSwgIGEoJUl57U1sfTBQlBTYIFRkNEVlZfVtaAl5Dc15fAQ==&quality=HD" type="application/x-mpegURL"></video>';

但它的不工作。它似乎顯示視頻元素，但視頻並未加載。這樣可以播放m3u8文件嗎？我想玩M3U8文件是「https://www.udemy.com/excel-tutorial/

感謝您的幫助內。

來源

2016-12-07 vjks

是的，你可以用HTML5視頻標籤播放。

<html> 
<body> 
    <video width="600" height="400" controls> 
     <source src="https://udemy-adaptive-streaming-prod.udemy.com/9287/72689/2012-04-30_04-09-49-f5ad53b1736807ee7f8837b37115aeeb/hls/677cda5a7077be8d22348b5edebd77db.m3u8?sign=%252BCIehx2LKCxUcNSU33mWdfm5SbA%253D&mign=EEsJDxEabAoMa1kFRgIfbEkIDw8RHGwKDGtZXAFYS3lHSwgIGEoJUl57U1sfTBQlBTYIFRkNEVlZfVtaAl5Dc15fAQ==&quality=HD" type="application/x-mpegURL"> 
    </video> 
</body>

它的工作原理EDGE PC瀏覽器，Chrome &的Opera Mini（手機瀏覽器）（不與PC鉻工作）

要在所有兄弟玩wser使用基於閃存的媒體播放器。 media player to support all browser

來源

2017-01-03 10:48:40

m3u8文件是HLS清單，它啓用自適應流式傳輸。要播放HLS流，您需要找到HLS視頻播放器，以便在每個瀏覽器上播放跨設備。你甚至可以自己創建一個，例如使用JavaScript。

或者，您可以google free HLS players（經常缺乏功能），或使用商業HLS播放器，如THEOplayer。

來源

2017-01-04 10:26:31

使用在github上找到的JavaScript HLS客戶端hls.js包。由許多成立組織使用。適用於所有瀏覽器。

一個簡單的例子頁：

<html> 
    <body> 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> 
    <video id="video" controls></video> 
    <script> 
    if(Hls.isSupported()) 
    { 
     var video = document.getElementById('video'); 
     var hls = new Hls(); 
     hls.loadSource('playlist.m3u8'); 
     hls.attachMedia(video); 
     hls.on(Hls.Events.MANIFEST_PARSED,function() 
     { 
      video.play(); 
     }); 
    } 
    else if (video.canPlayType('application/vnd.apple.mpegurl')) 
    { 
     video.src = 'playlist.m3u8'; 
     video.addEventListener('canplay',function() 
     { 
      video.play(); 
     }); 
    } 
    </script> 
    </body> 
</html>

替換 'playlist.m3u8' 與您的播放列表。

來源

2018-02-08 15:10:46 Jahmic

如何使用HTML5 <video>元素播放m3u8（文件）視頻？

回答

相關問題