Question

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

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

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

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

注意：我已经使用Android 4.0.3和4.1

进行了检查

提前感谢，

Sagar Joshi

Answer 1

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

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

Answer 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的脚本标签中添加视频链接，它将适用于android chrome。

Answer 3

我最终使用 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。

hls在html5中无法在android chrome浏览器中运行

3 个答案: