如何使用 html5 视频标签播放 Apple HLS 直播

Posted 2023-03-04

【中文标题】如何使用 html5 视频标签播放 Apple HLS 直播

【英文标题】：How can I play Apple HLS live stream using html5 video tag

【发布时间】：2013-08-28 09:25:03

【问题描述】：

<video id="live"  autoplay controls>
    <source src="http://[WOWZA-IP]:1935/Live/mp4:[LIVESTREAMNAME]/playlist.m3u8" type="video/mp4" />
</video>

我正在尝试使用 html5 视频标签播放 h264 编码的直播流。直播由 wowza 媒体服务器广播，当访问 src 链接时，我得到一个有效的播放列表文件。尝试在 android chrome 浏览器上播放流时，播放器不执行任何操作并显示黑屏。

这是与 html5 视频标签相关的问题还是广播公司？

【问题讨论】：

Wowza 有内置转码器，可以使用 strobe.js API 将发布流转换为在 HTML5 视频标签内播放的 Manifest.f4m 格式。链接 - sourceforge.net/adobe/smp/wiki/javascript%20API

你可以使用一些 hls 支持模块。***.com/a/48003736/9143855

【参考方案1】：

试试FlowPlayer。它以最少的工作量在服务器端提供了完整的 HLS 支持！

【参考方案2】：

实际上有很多解决方案。一种解决方案是检测 HLS 是否可以播放：

document.createElement('video').canPlayType('application/vnd.apple.mpegURL') !== ''

但是，这将不允许您在不支持播放的设备上播放 HLS 内容。目前，播放仅支持 Microsoft Edge、ios Safari、OS X Safari 和 Android (however, I strongly advise against using HLS on Android due to limitations)

在 HTML5 中跨所有平台播放 HLS 的另一种解决方案是使用 HTML5 HLS 播放器，例如 THEOplayer。他们设法允许在 all popular platforms and devices 上播放 HLS，包括那些没有 Media Source Extension 支持的人。目前，支持的浏览器和平台列表包括：Windows、Linux、Mac OS X、Android、iOS 和 Windows Phone 上的 Internet Explorer、Edge、Firefox、Chrome、Opera 和 Safari。

【参考方案3】：

在支持Media Source Extension的浏览器上，您可以使用https://github.com/dailymotion/hls.js

【参考方案4】：

对于使用 flash 的解决方法，您可以使用FlasHLS chromeless player。

【参考方案5】：

这些是您可以使用 html5 源代码标签播放的格式。

将视频格式想象成一个 zip 文件，其中包含编码的视频流和音频流。您应该关注的三种网络格式是（webm、mp4 和 ogv）：

.mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis

【讨论】：

谢谢。我通过 MP3 而不是 AAC 流式传输 H.264。

我尝试了来自developer.apple.com/streaming/examples 的示例流，但即使所有格式都是 H.264 + AAC，它们也没有播放。知道是什么问题吗？