使用video.js在网页中播放m3u8格式视频

32人浏览 / 0人评论

概念

m3u8

m3u8格式的视频是将文件分成一小段一小段的ts文件,播放完一个在播放下一个,由于每次请求的ts文件都很小,所以基本可以做到无延时播放。目前WEB上主流的直播方案主要是HLSRTMP,移动端主要是HLS,PC端主要是RTMP

HLS是苹果推出的,移动端不管是IOS还是Android都天然支持HLS协议,直接在h5页面直接配置即可使用;PC端只有safari浏览器支持,其他浏览器均不支持。

video.js

Video.js是一个基于HTML5构建的网络视频播放器。它支持HTML5和Flash视频,以及YouTube和Vimeo(通过插件)。它支持桌面和移动设备上的视频播放。

可以用video.jsvideojs-contrib-hls.js 来实现在web端播放m3u8格式的视频。

其中videojs-contrib-hls.js是用于使用video.js来播放hls视频的,即使本地机器不支持。不过该项目将在video.js v7.*之后废弃,由videojs-http-streaming项目继承。VHS将支持HLS和DASH,并直接内置于video.js v7.*中。

本文将继续使用videojs-contrib-hls.js。关于新版的VHS,后期如有机会将再做尝试。

使用方法

引入相关资源

    <link href="https://cdn.bootcss.com/video.js/6.3.3/video-js.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/video.js/6.3.3/video.min.js"></script>
    <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.11.0/videojs-contrib-hls.js"></script>
    <!–[if lt IE 9]>
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]–>

说明:

  • video-js.min.css 是播放器的主题样式
  • video.min.jsvideo.js的核心代码
  • videojs-contrib-hls.js 用于支持HLS的库文件
  • html5shiv.min.js 由于video.js是基于H5构建的播放器,所以在浏览器不支持H5的时候,需要将相关资源引入到浏览器

放置播放器控件

<video  id="myVideo"  class="video-js vjs-default-skin vjs-big-play-centered"  width="400"
        controls="controls" autoplay="autoplay"
       x-webkit-airplay="true" x5-video-player-fullscreen="true"
       preload="auto" playsinline="true" webkit-playsinline
       x5-video-player-typ="h5">
    <source type="application/x-mpegURL" src="https://cn4.creativemas.cn/ppvod/DD7AB8D25F6AD21E4291775FEAC1F710.m3u8">
</video>

说明:

  • 该控件中用于播放一个网络上找的m3u8的视频资源
  • 给控件一个id主要方便video.js获取控件对象

使用video.js

<script>
    // videojs 简单使用
    var myVideo = videojs('myVideo',{
        bigPlayButton : true,
        textTrackDisplay : false,
        posterImage: false,
        errorDisplay : false,
    })
    myVideo.play() // 视频播放
    myVideo.pause() // 视频暂停
</script>

本文中的代码基本参照《前端如何播放m3u8格式的视频》

关于video.js参看:https://github.com/videojs/video.js

全部评论