html5标签大全(html5的video标签实现m3u8格式的支持)

切图网站的踩坑笔记,vue开发项目中通过api接口获取到了m3u8格式的音频,但是有的浏览器默认不支持,所以需要借助辅助手段来实现,下面介绍详细方法。


html5标签大全(html5的video标签实现m3u8格式的支持)(1)


什么是m3u8?

m3u8是m3u的一种,是utf-8格式的,Apple 为了提高流播效率开发的技术,特点是将流媒体切分为若干 TS 片段(比如每10秒一段),然后通过一个扩展的 m3u 列表文件将这些 TS 片段集中起来供客户端播放器接收。可以做多码率的适配,根据网络带宽,客户端会自动选择一个适合自己码率的文件进行播放,保证视频流的流畅。

html5的video标签实现对HLS(m3u8格式)的支持方法

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script> <video id="video"></video> <script> if(Hls.isSupported()) { var video = document.getElementById('video'); var hls = new Hls(); hls.loadSource('http://www.streambox.fr/playlists/test_001/stream.m3u8'); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED,function() { video.play(); }); } </script>

来源:http://www.qietu.com/hml5-video-m3u8-hls-min-js/

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页