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

问题描述：

<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视频标签播放Apple HLS直播视频流

这是与html5视频标签相关的问题或者广播者？

Wowza建立了转码器，将发布流转换为使用strobe.js API在HTML5视频标签内播放的Manifest.f4m格式。链接 - https://sourceforge.net/adobe/smp/wiki/JavaScript%20API/ – Altanai

您可以使用一些hls支持模块。
https://stackoverflow.com/a/48003736/9143855 – 2017-12-28 07:59:38

答

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

将视频格式视为包含编码视频流和音频流的zip文件。你应该关心的网页的三种格式是（支持WebM，MP4和OGV）：

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

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

我尝试了https://developer.apple.com/streaming/examples/中的示例流，但它们都不在播放，即使所有格式都是H.264 + AAC。任何想法是什么问题？ – MA1

答

使用Flash的解决方法，你可以使用FlasHLS控件播放器。

答

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

答

其实是有一个良好的范围。这个解决方案的。一个解决办法是，以检测是否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。他们设法让HLS在all popular platforms and devices上播放，包括那些没有Media Source Extension支持的播放器。目前，受支持的浏览器和平台列表包括：Windows，Linux，Mac OS X，Android，iOS和Windows Phone上的Internet Explorer，Edge，Firefox，Chrome，Opera和Safari。

答

尝试FlowPlayer。它提供了一个完整的HLS支持，在服务器端最少的努力！

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

相关推荐