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

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

前端web如何播放m3u8格式的视频相关推荐

vue使用原生videojs 播放m3u8格式的视频——播放m3u8格式视频（一）
vue使用原生video播放m3u8格式的视频 1.安装依赖 2.页面引入插件(这里我是页面单独引入,减少项目体积) 3.页面中的使用常见问题 4.实现过程 5.实现.m3u8格式视频播放方法 1. ...
HLS播放：html5下用video标签来播放m3u8格式的视频
HLS播放:html5下用video标签来播放m3u8格式的视频 <video class="tvhou" width="100%" height=&qu ...
vue-video-player播放m3u8格式的视频
一.vue-video-player的使用: 1.安装 npm i vue-video-player -D 2.引入(组件内引入) import { videoPlayer } from 'vue- ...
h5播放m3u8格式的视频
前提: 最近有个需求需要 h5界面播放一个1G的视频,害怕卡顿解决方式: 用视频切片的方式解决操作验证我们先来一个m3u8 格式的视频文件随便找一个视频文件,按照这个操作我们就成功得到了 ...
video标签播放m3u8格式视频-------html页面
m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频文件,然后存在服务器中(现在为了减少I/o访问次数,一般 ...
Video 标签播放 m3u8 格式视频
在不借助流媒体播放器的前提下,直接播放 m3u8 格式的视频文件更多精彩更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线写在前面的话为什么要播放 m3u8 格式的视频对于一 ...
androidTV在html中集成饺子播放器并播放m3u8格式视频
饺子播放器的默认引擎是MediaPlayer,只能播放一些常见格式的视频.想要播放m3u8格式,需要切换引擎 jzvdStd.setUp("http://youku.cdn-iqiyi.co ...
h5播放m3u8格式视频流
h5播m3u8格式视频流在微信公众号的某个页面接入监控视频(.m3u8格式的),需求相对简单,能够播放就可以,之前没有处理过mp4格式外的视频文件,记录一下: ###1.使用video.js来播放 ...
第一次在Vue项目中播放m3u8格式视频遇到的问题和解决方法
一.m3u8文件第一次接触这种m3u8格式的视频文件,开始以为类似与.mp4这种,所以在项目中我通过html5提供的video标签做播放功能发现并不能成功,后来了解到M3U8文件是一种UTF-8编码 ...

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

前端web如何播放m3u8格式的视频相关推荐

最新文章

热门文章