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

作者: 猫南北
发布时间: 2024-12-11 07:36:18 (1月前)
转自：

6 条回复

0#
回复此人
哈哈哈哈 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 实际上有很多解决方案。一种解决方案是检测是否可以播放HLS： </p> <pre> <code> document.createElement('video').canPlayType('application/vnd.apple.mpegURL') !== '' </code> </pre> <P> 但是，这不允许您在不支持播放的设备上播放HLS内容。此时，仅在Microsoft Edge，iOS Safari，OS X Safari和Android上支持播放（ <a href="https://www.overdigital.com/2013/07/12/how-bad-is-really-hls-on-android/" rel="noreferrer"> 但是，由于局限性，我强烈建议不要在Android上使用HLS </A> ） </p> <P> 在HTML5中跨所有平台播放HLS的另一种解决方案是使用HTML5 HLS播放器，例如 <a href="https://www.theoplayer.com" rel="noreferrer"> THEOplayer </A> 。他们成功地允许玩HLS <a href="https://www.theoplayer.com/documentation/hls.html#hls-features" rel="noreferrer"> 所有流行的平台和设备 </A> 包括没有的人 <a href="http://caniuse.com/#feat=mediasource" rel="noreferrer"> 媒体来源扩展 </A> 支持。目前，支持的浏览器和平台列表包括：Windows，Linux，Mac OS X，Android，iOS和Windows Phone上的Internet Explorer，Edge，Firefox，Chrome，Opera和Safari。 </p> </DIV>

编辑
1#
回复此人
Moso31 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 论浏览器支持 <a href="http://caniuse.com/#feat=mediasource" rel="nofollow"> 媒体来源扩展 </A> 您可以使用 <a href="https://github.com/dailymotion/hls.js" rel="nofollow"> https://github.com/dailymotion/hls.js </A> </p> </DIV>

编辑
2#
回复此人
我头上有犄角 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 尝试 <a href="https://flowplayer.org/" rel="nofollow"> 的Flowplayer </A> 。它在服务器端提供最少的工作量，提供完整的HLS支持！ </p> </DIV>

编辑
3#
回复此人
筱梨 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这些是您可以使用html5源标记播放的格式。 </p> <P> 将视频格式视为包含编码视频流和音频流的zip文件。您应该关注的三种格式是（webm，mp4和ogv）： </p> <pre> <code> .mp4 = H.264 + AAC .ogg/.ogv = Theora + Vorbis .webm = VP8 + Vorbis </code> </pre> </DIV>

编辑
4#
回复此人
听风～ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 有关使用闪存的变通方法，您可以使用 <a href="https://github.com/mangui/flashls" rel="nofollow"> FlasHLS </A> 无铬玩家。 </p> </DIV>

编辑

登录后才能参与评论