HTML5点播m3u8(hls)格式视频

原创文章 作者:月光光 2018年07月18日 20:11helloweba.net 标签:JavaScript  HTML5  网页播放器 

这两年来我们发现越来越多的视频应用使用了m3u8格式的视频,因为可以兼容PC、移动端。相比mp4等视频源,m3u8可以减轻服务器压力(按需加载)。HLS是由苹果公司率先提出的一种协议标准,可用于直播。

m3u8是一种基于HLS(HTTP Live Streaming) 文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成。不同于mp4大文件,m3u8是由一系列的ts文件组成,一般一个ts文件大概5-10秒,这些ts文件通过一个.m3u8文件做索引。用户播放视频时,可随意拖动视频进度,会读取相应进度的ts文件继续观看视频,不必等到下载完整的视频。因此在播放m3u8的时候很少有卡顿的现象。

关于HLS直播的技术示例以及m3u8切片技术我们会在后面有文章介绍。本文只做HLS点播讲解,与直播不同,点播是指视频文件已经在编辑好,随时可播放。

由于HLS是由Apple公司提出的,所以在iOS电脑或手机上,你可以直接使用Safari浏览器的<video>播放m3u8格式视频文件。而其他浏览器则需要借助hls.js来兼容m3u8。

使用hls.js,不需要任何定制的播放器,只需要<video>元素就能播放m3u8。

加载js和播放元素

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

<video id="video" controls width="100%"></video>
<script src="hls.js"></script>

调用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的播放很流畅。

在Vue中使用hls.js

使用Vue框架的同学可以用npm先安装hls。

npm install --save hls.js

然后添加组件。

<video ref="videoRef" width="400" controls></video>

最后挂载代码:

<script>
import Hls from 'hls.js'; 

export default {
    data () {
        return {
            //
        }
    },
    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>

其他

基于hls.js开发了很多用于html5播放器的插件,让这些播放器也支持m3u8格式播放。

Video.js使用videojs-contrib-hls.js

Flowplayer使用 flowplayer-hlsjs

更多信息请参考hls.js项目地址:https://github.com/video-dev/hls.js

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/571.html

7条评论

  • 我心定

    我也是在使用hls.attachMedia(this.$refs.videoRef);,一直报错Uncaught TypeError: Cannot read property 'readyState' of null

  • yoyo

    Uncaught TypeError: Cannot read property 'readyState' of null
    at XhrLoader.readystatechange (hls.js?ba56:14379)
    at MockXMLHttpRequest.dispatchEvent (mock.js?411c:8517)
    at XMLHttpRequest.handle (mock.js?411c:8335)

  • yoyo

    博主你好,我用下面的vue示例,hls.js也安装了,但是到了这一步hls.attachMedia(this.$refs.videoRef);,一直报错Uncaught TypeError: Cannot read property 'readyState' of null
    at XhrLoader.readystatechange

  • 我说

    鼠标停留在进度条上出现画面怎做

  • 我说

    有进行m3u8 进行加密的播放吗,在开发模式下 network 中也找到地址,虽然是一点一点的也可以下载下来进行合并

  • Jack

    谢谢博主无私分享...

  • 筷子

    我正想要这个m3u8播放器,谢谢博主。