m3u8格式的视频是将文件分成一小段一小段的ts文件,播放完一个在播放下一个,由于每次请求的ts文件都很小,所以基本可以做到无延时播放。目前WEB上主流的直播方案主要是HLS和RTMP,移动端主要是HLS,PC端主要是RTMP。
HLS是苹果推出的,移动端不管是IOS还是Android都天然支持HLS协议,直接在h5页面直接配置即可使用;PC端只有safari浏览器支持,其他浏览器均不支持。
可以用video.js和videojs-contrib-hls.js。video.js是非常好用的插件,关于它如何使用这里就不一一介绍了。
参考代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>前端播放m3u8格式视频</title><link rel="stylesheet" href="./video.css"><script src="./video.js"></script><script src="./videojs-contrib-hls.js"></script>
</head>
<body><video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'> <source id="source" src="./assets/video/1080.m3u8" type="application/x-mpegURL"></video>
</body>
<script> // videojs 简单使用var myVideo = videojs('myVideo',{bigPlayButton : true, textTrackDisplay : false, posterImage: false,errorDisplay : false,})myVideo.play() // 视频播放myVideo.pause() // 视频暂停
</script>
</html>
对应的路径必须要有切片的ts文件,如何切片可以看这篇文章,否则的话就必须需要后台服务推流