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