Skip to content

如何让 video 标签支持 hls/m3u8 视频流直播

苹果的 safari 直接支持 hls。但是其他的浏览器却没有提供相应的支持。根据我的测试,android 手机的 webview 可以支持 hlsPC 上的 chrome 却不行,很令人费解。

下面是 videojs 给出的一套 hls 解决方案:

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>m3u8player</title>
    <link href="js/video-js.css" rel="stylesheet">
  </head>
  <body>
    <video id="my-video" class="video-js">
      <source src="http://live.xwei.tv/channels/njtv/video_xwzh/m3u8:250k" type='application/x-mpegURL'></source>
    </video>
    <script type="text/javascript" src="js/video.js" ></script>
    <script type="text/javascript" src="js/videojs-contrib-hls.js" ></script>
    <script>
      var player = videojs('my-video');
      player.play();
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>m3u8player</title>
    <link href="js/video-js.css" rel="stylesheet">
  </head>
  <body>
    <video id="my-video" class="video-js">
      <source src="http://live.xwei.tv/channels/njtv/video_xwzh/m3u8:250k" type='application/x-mpegURL'></source>
    </video>
    <script type="text/javascript" src="js/video.js" ></script>
    <script type="text/javascript" src="js/videojs-contrib-hls.js" ></script>
    <script>
      var player = videojs('my-video');
      player.play();
    </script>
  </body>
</html>

需要引入 video.jsvideojs-contrib-hls.js,可以从 github 上找到。

最后编辑时间:

Version 4.0 (framework-1.0.0-rc.20)