如何使用 HTML5 <video> 元素播放 m3u8(文件)视频?

Posted

技术标签:

【中文标题】如何使用 HTML5 <video> 元素播放 m3u8(文件)视频?【英文标题】:How can I play a m3u8 (file) video using the HTML5 <video> element? 【发布时间】:2017-04-22 04:53:33 【问题描述】:

我遇到了这个关于播放 m3u8 文件的 *** 链接:Playing m3u8 Files with html Video Tag

我尝试做类似的事情来播放 m3u8 文件中的视频链接,比如在 phpfiddle 上:

    echo '<video   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/

感谢您的帮助。

【问题讨论】:

【参考方案1】:

使用github 上的 javascript HLS 客户端 hls.js 包。被许多已建立的组织使用。适用于所有浏览器。

快速示例页面:

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></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”。

【讨论】:

【参考方案2】:

通常html5视频播放器会直接支持mp4、WebM、3gp和OGV格式。

<video controls>
      <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
      <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
      <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
      <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
    </video>

我们可以在 Web 应用程序中添加一个外部 HLS js 脚本。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>Your title</title>
      
    
      <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>
       
    </head>
    <body>
      <video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto"
      data-setup=''>
        <source src="https://cdn3.wowza.com/1/ejBGVnFIOW9yNlZv/cithRSsv/hls/live/playlist.m3u8" type="application/x-mpegURL">
      </video>
      
    <script>
    var player = videojs('my_video_1');
    player.play();
    </script>
      
    </body>
    </html>

希望这有用!

【讨论】:

【参考方案3】:

m3u8 文件是 HLS 清单,可启用自适应流。要播放 HLS 流,您需要找到 HLS 视频播放器才能在每个浏览器上跨设备播放。您甚至可以自己构建一个,例如使用 JavaScript。

或者,您可以google free HLS players(通常缺少功能),或使用商业 HLS 播放器,如THEOplayer。

【讨论】:

以上是关于如何使用 HTML5 <video> 元素播放 m3u8(文件)视频?的主要内容,如果未能解决你的问题,请参考以下文章

如何将 Youtube 视频嵌入 HTML5 <video> 标签?

如何使用 Spring MVC 返回视频,以便可以使用 html5 <video> 标签进行导航?

如何使用 HTML5 <video> 元素播放 m3u8(文件)视频?

如何在 iOS 上自动播放 HTML5 <video> 和 <audio> 标签?

html5如何更改video的src属性

浏览器如何计算 HTML5 <video> 的帧速率 (fps) 以实现准确的帧搜索?