前端如何播放m3u8格式的视频

最新推荐文章于 2024-02-29 16:35:32 发布

lch_cui

最新推荐文章于 2024-02-29 16:35:32 发布

阅读量4.7w

点赞数 3

文章标签： m3u8 video.js

本文链接：https://blog.csdn.net/lch_cui/article/details/79688894

版权

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文件，如何切片可以看这篇文章，否则的话就必须需要后台服务推流

lch_cui

关注

3
点赞
踩
27

收藏

觉得还不错? 一键收藏
6
评论
前端如何播放m3u8格式的视频

m3u8格式的视频是将文件分成一小段一小段的ts文件，播放完一个在播放下一个，由于每次请求的ts文件都很小，所以基本可以做到无延时播放。目前WEB上主流的直播方案主要是HLS和RTMP，移动端主要是HLS，PC端主要是RTMP。HLS是苹果推出的，移动端不管是IOS还是Android都天然支持HLS协议，直接在h5页面直接配置即可使用；PC端只有safari浏览器支持，其他浏览器均不支持。...
复制链接

扫一扫