如何在 amp-video 中显示 m3u8 URL 视频
How to display a m3u8 URL video in amp-video
在 AMP 中,我无法正确显示 m3u8 视频。
AMP转换前的代码如下:
然后我得到:
<amp-video ...>
<video>
<source type="application/vnd.apple.mpegurl" src="https://something/video.hls">
</amp-video>
以下内容可用于在 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)。
Safari 可能是唯一一个原生支持 (amp-video & amp-ima-video) hls(.m3u8 视频扩展名)的。
我用
测试过
- 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">
(不是我的自定义代码笔,我忘了我从哪里分叉出来的)
在 AMP 中,我无法正确显示 m3u8 视频。
AMP转换前的代码如下:
然后我得到:
<amp-video ...>
<video>
<source type="application/vnd.apple.mpegurl" src="https://something/video.hls">
</amp-video>
以下内容可用于在 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)。
Safari 可能是唯一一个原生支持 (amp-video & amp-ima-video) hls(.m3u8 视频扩展名)的。 我用
测试过- 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">
(不是我的自定义代码笔,我忘了我从哪里分叉出来的)