了解m3u8(hls)视频格式及如何在原生video标签上播放m3u8或flv媒体流

7,594 阅读4分钟

“我报名参加金石计划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 浏览器的 <video> 播放 m3u8 格式视频文件。而其他浏览器则需要借助 hls.js 来兼容m3u8。

使用 hls.js,不需要任何定制的播放器,只需要 <video> 元素就能播放 m3u8。项目地址:github.com/video-dev/h…

hls.js 如何使用

1、加载js和播放元素:在需要放置视频的页面位置上加入video元素和hls.js文件。

// 提供播放元素
<video id="video" controls width="100%"></video>
// 加载 hls.js 文件
<script src="hls.js"></script>

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、然后添加组件
<video ref="videoRef" width="400" controls></video>

// 3、最后挂载代码:
<script>
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();
      });
    }
}
</script>

使用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
<video id="my-player" preload="auto" muted autoplay type="rtmp/flv">
    <source src="">
</video>

// 引入flv.js
<script src="./flv.js/flv.min.js"></script>

// 使用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