Html 如何使用 html5 视频标签播放 Apple HLS 直播流
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18434803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I play Apple HLS live stream using html5 video tag
提问by jM2.me
<video id="live" autoplay controls>
<source src="http://[WOWZA-IP]:1935/Live/mp4:[LIVESTREAMNAME]/playlist.m3u8" type="video/mp4" />
</video>
I am trying to play h264 encoded live stream using html5 video tag. Live stream is broadcasted by wowza media server and when visiting src link I get a valid playlist file. When trying to play the stream on android chrome browser, player does nothing and shows black screen.
我正在尝试使用 html5 视频标签播放 h264 编码的实时流。实时流由 wowza 媒体服务器广播，当访问 src 链接时，我得到一个有效的播放列表文件。尝试在 android chrome 浏览器上播放流时，播放器什么也不做并显示黑屏。
Is this html5 video tag related issue or maybe broadcaster?
这是 html5 视频标签相关问题还是广播公司？
采纳答案by robert
These are the formats you can play using html5 source tags.
这些是您可以使用 html5 源标签播放的格式。
Think of a video format as a zip file which contains the encoded video stream and audio stream. The three formats you should care about for the web are (webm, mp4 and ogv):
将视频格式视为包含编码视频流和音频流的 zip 文件。您应该关心的三种网络格式是（webm、mp4 和 ogv）：
.mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis
回答by MrP
There is actually a good range of solutions for this. One solution would be to detect if HLS can be played:
实际上有很多解决方案。一种解决方案是检测是否可以播放 HLS：
document.createElement('video').canPlayType('application/vnd.apple.mpegURL') !== ''
However, this would not allow you to play HLS content on devices which do not support playback. At this moment, playback is only supported on Microsoft Edge, iOS Safari, OS X Safari and Android (however, I strongly advise against using HLS on Android due to limitations)
但是，这将不允许您在不支持播放的设备上播放 HLS 内容。目前，仅在 Microsoft Edge、iOS Safari、OS X Safari 和 Android 上支持播放（但是，由于限制，我强烈建议不要在 Android 上使用 HLS）
An other solution to play HLS across all platforms in HTML5 is to use an HTML5 HLS player such as THEOplayer. They managed to allow HLS to be played on all popular platforms and devices, including those without Media Source Extensionsupport. Currently, the list of supported browsers and platforms includes: Internet Explorer, Edge, Firefox, Chrome, Opera and Safari on Windows, Linux, Mac OS X, Android, iOS and Windows Phone.
在 HTML5 中跨所有平台播放 HLS 的另一种解决方案是使用 HTML5 HLS 播放器，例如THEOplayer。他们设法让 HLS 在所有流行的平台和设备上播放，包括那些没有媒体源扩展支持的平台和设备。目前，支持的浏览器和平台列表包括：Windows、Linux、Mac OS X、Android、iOS 和 Windows Phone 上的 Internet Explorer、Edge、Firefox、Chrome、Opera 和 Safari。
回答by mangui
On Browsers supporting Media Source Extensionyou can use https://github.com/dailymotion/hls.js
在支持媒体源扩展的浏览器上，您可以使用https://github.com/dailymotion/hls.js
回答by XlbrlX
Try FlowPlayer. It provides a full HLS support with the least effort in server side!
试试FlowPlayer。它在服务器端以最少的努力提供完整的 HLS 支持！
回答by flavioribeiro
For workarounds using flash, you can use FlasHLSchromeless player.
对于使用 Flash 的解决方法，您可以使用FlasHLS chromeless播放器。
