html5 中的 hls 在 android chrome 浏览器中不起作用

Posted 2023-05-08

【中文标题】html5 中的 hls 在 android chrome 浏览器中不起作用

【英文标题】：hls in html5 not working in android chrome browser

【发布时间】：2012-08-30 02:55:00

【问题描述】：

我在“android 手机的 chrome 浏览器”中播放视频时遇到问题。

我正在放置 html5 视频标签并提供 m3u8 文件的链接作为视频标签的来源。 但它在“Android 的 chrome 浏览器”中无法播放。

但是，如果我提供相同的 m3u8 文件链接到浏览器而不是它在 Android 的视频播放器中播放视频。

那么在 HTML5 video 标签中播放视频应该怎么做呢？

注意：我已经在 Android 4.0.3 和 4.1 上进行了检查

提前致谢，

萨加尔·乔希

【问题讨论】：

this: shaka-player-demo.appspot.com/demo/#asset=//… 这些天似乎可以正常工作，也许 5.0+？

【参考方案1】：

我认为这取决于编码，通过查看服务器日志请求播放列表，但由于没有找到 webm 内容，因此没有播放任何内容。

这真的很不幸，因为股票浏览器过去可以播放 h264 视频。

【参考方案2】：

hls 链接不能直接在 android chrome 上工作，你需要一个 hls javascript 库才能让它工作，看看这段代码

<video id="my-video" style="width:640px height:480px;" controls>
                            <source src="put your source link here">
                        </video>
                    </div>
<script src="http://hlsbook.net/wp-content/examples/hls.min.js"></script>
<script>
  if ( Hls.isSupported() ) 
    var video = document.getElementById('my-video');
    var hls = new Hls();
    hls.loadSource('put your source link here');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function() 
      video.play();
    );
  
</script>

请记住源链接不适用于 android 平台，它仅适用于 ios-safari 平台，因为 ios-safari 平台不需要 hls javascript，因为 Safari 移动版不支持媒体源扩展，因此无法使用hls.js。 所以对于 android 你需要在 hls.loadSource 的 script 标签中添加视频链接，它可以在 android chrome 上运行。

【参考方案3】：

我最终使用 video.js 的 VHS 解决了这个问题https://github.com/videojs/http-streaming。

在我的例子中，我使用的是 Android 的原生 HLS 支持不支持的分段 MP4。要解决此问题，您需要强制 VHS 覆盖本机支持：

<video id="player" class="video-js"   controls playsinline muted preload="auto" poster="https://example.com/poster.jpg">
  <source src="https://example.com/stream.m3u8" type="application/x-mpegURL">
</video>

<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
<script src="https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.min.js"></script>
<script>
  const player = videojs('player');
  player.play(
    overrideNative: true // <-- this fixes Android Chrome
  );
</script>

我之前使用的是 hls.js，但在使用片段 MP4 时遇到了一些问题。绝对推荐 video.js/VHS。