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

Question

在“Android 手机的 chrome 浏览器”中播放视频时出现问题。

在那里我放置了 HTML5 视频标签并提供 m3u8 文件的链接作为视频标签的来源。但它不能在“Android 的 chrome 浏览器”中播放。

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

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

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

提前致谢，

萨加尔乔希

Answer 1

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

这真的很不幸，因为股票浏览器用来播放 h264 视频就很好。

Answer 2

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

就我而言，我使用的是 Android 的原生 HLS 支持不支持的碎片化 MP4。要解决此问题，您需要强制 VHS 覆盖本机支持：

<video id="player" class="video-js" width="360" height="640" 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。

Answer 3

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。