了解m3u8(hls)视频格式及如何在原生video标签上播放m3u8或flv媒体流 |
您所在的位置：网站首页 › m3u8是什么格式的 › 了解m3u8(hls)视频格式及如何在原生video标签上播放m3u8或flv媒体流 |
|
“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第14篇文章，点击查看活动详情” 背景介绍：之前接个公司外包出来的项目，给某公安局做个大屏可视化的项目，里面涉及到使用直播流获取央媒播报的内容，在视频播放上加深了自己对媒体播放资源的一些认识，故此记录总结下。 HLS 文件视频介绍我们之前项目里关于课程播放、活动直播之类的流媒体资源都是m3u8的格式。使用的阿里云直播和点播服务，但是video标签是无法直接播放m3u8格式的，所以采用阿里云提供的播放器播放。说实话，那时候只知道是m3u8格式，对该格式其实并不了解。其实我们学习还是需要深入源头，对不清楚的东西多加以了解。 HLS （HTTP Live Streaming）是由苹果公司率先提出的一种协议标准，可用于直播。m3u8是一种基于 HLS 文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。不同于 mp4 大文件，m3u8 是由一系列的 ts 文件组成，一般一个 ts 文件大概 5-10 秒，这些 ts 文件通过一个 .m3u8 文件做索引。用户播放视频时，可随意拖动视频进度，会读取相应进度的 ts 文件继续观看视频，不必等到下载完整的视频。因此在播放 m3u8 的时候很少有卡顿的现象。现在越来越多的视频应用使用了 m3u8 格式的视频，包括点播流/直播流。相比 mp4 等视频源，m3u8 可以减轻服务器压力（按需加载）。 查看演示：https://www.helloweba.net/demo/2018/hls/ 由于 HLS 是由 Apple 公司提出的，所以在 iOS 电脑或手机上，你可以直接使用 Safari 浏览器的 播放 m3u8 格式视频文件。而其他浏览器则需要借助 hls.js 来兼容m3u8。 使用 hls.js，不需要任何定制的播放器，只需要 元素就能播放 m3u8。项目地址：github.com/video-dev/h… hls.js 如何使用1、加载js和播放元素：在需要放置视频的页面位置上加入video元素和hls.js文件。 // 提供播放元素 // 加载 hls.js 文件2、调用 hls.js：演示页面查看源代码就可以了解 首先判断浏览器是否支持hls，如果支持就实例化 new Hls()，加载m3u8源，然后播放。如果不支持hls，而支持苹果原生应用，则播放另一个m3u8源。 var video = document.getElementById('video'); if(Hls.isSupported()) { var hls = new Hls(); hls.loadSource('https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8'); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED,function() { video.play(); }); } else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8'; video.addEventListener('loadedmetadata',function() { video.play(); }); }运行，试着用PC浏览器和手机访问，你会发现m3u8的播放很流畅 3、在Vue中使用hls.js // 1、使用Vue框架可以用npm先安装hls npm install --save hls.js // 2、然后添加组件 // 3、最后挂载代码： import Hls from 'hls.js'; export default { mounted: function() { var hls = new Hls(); hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8'); hls.attachMedia(this.$refs.videoRef); hls.on(Hls.Events.MANIFEST_PARSED,function() { this.$refs.videoRef.play(); }); } } 使用flv.js实现flv格式的监控视频流播放以上我们所说的是点播流，直播流也可以用 m3u8，也是可以播放的。但是业务方因为一个跨域的问题一直没有配置好，所以最终又使用 flv 的直播要我来适配下直播播放。好吧，那就继续干呗，了解到 flv.js 可以播放 flv 视频格式。 1、flv.js常用方法 flvjs.isSupported()：判断当前浏览器是否支持播放 flvPlayer = flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config)：创建一个播放实例 flvPlayer.attachMediaElement(mediaElement: HTMLMediaElement)：将播放实例注册到video节点 flvPlayer.load()：加载视频 flvPlayer.play()：播放视频 flvPlayer.pause()：视频暂停 flvPlayer.unload()：去除视频加载 flvPlayer.detachMediaElement()：将播放实例从节点中取出 flvPlayer.destroy()：销毁播放实例2、flv.js简单使用 // html // 引入flv.js // 使用flv.js实现播放flv格式流 onMounted(() => { const videoRef = document.getElementById('videoRef') if (flvjs.isSupported()) { const flvPlayer = flvjs.createPlayer({ type: 'flv', isLive: true, url: videoUrl //flv格式流地址 },{ enableWorker: false, //不启用分离线程 enableStashBuffer: false, //关闭IO隐藏缓冲区 reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等 autoCleanupSourceBuffer: true //自动清除缓存 }) flvPlayer.attachMediaElement(videoRef) flvPlayer.load() //加载 flvPlayer.play() //播放 } }) // 关闭视频流 flvPlayer.pause(); flvPlayer.unload(); flvPlayer.detachMediaElement(); flvPlayer.destroy(); flvPlayer = null;所以如果 rtmp 视频流不支持的，可以转为 flv 视频流来进行播放，这里给一个 flv 的演示视频：http://1011.hlsplay.aodianyun.com/demo/game.flv |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |