Question

在AMP中，我无法正常显示m3u8视频。

以下是AMP转换前的代码：

我得到之后：

<amp-video ...>
<video>
<source type="application/vnd.apple.mpegurl" src="https://something/video.hls">
</amp-video>

Answer 1

以下内容可用于在AMP中显示HLS视频：

<amp-video width="480"
  height="270"
  poster="/img/tokyo.jpg"
  layout="responsive"
  controls
  autoplay>
  <div fallback>
    <p>Your browser doesn't support HTML5 video.</p>
  </div>
  <!-- displayed if HLS is supported -->
  <source type="application/vnd.apple.mpegurl" src="/video/tokyo.m3u8">
  <!-- displayed if HLS is not supported -->
  <source type="video/mp4" src="/video/tokyo-no-hls.mp4">
</amp-video>

有关详细信息，请参阅annotated demo（simplified version）。

Answer 2

Safari可能是唯一原生支持hls（.m3u8视频扩展名）的amps-video和amp-ima-video的视频。我用

进行了测试

Chrome v67.0.3396.99
Firefox v61.0.1
Safari v11.1.1

您可以在此处检查浏览器是否支持hls： https://codepen.io/kenanbalija/pen/GBgmxG

...
<amp-video width="480" height="270" 
         layout="fixed"
         controls>

<source type="application/vnd.apple.mpegURL" src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8">
<source type="video/webm" src="https://ampbyexample.com/video/tokyo.webm">

（不是我的自定义密码笔，我忘了从哪里分叉的）

如何在放大器视频中显示m3u8 URL视频

2 个答案: