m3u8是苹果公司推出的视频播放标准，是m3u的一种，只是编码格式采用的是UTF-8。m3u8准确来说是一种索引文件，使用m3u8文件实际上是通过它来解析对应的放在服务器上的视频网络地址，从而实现在线播放。

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

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

需要借助hls插件，可以用video.js和videojs-contrib-hls.js。video.js是非常好用的插件

type:application/x-mpegURL // 告诉videojs,这是一个hls流

HLS

转：前端播放m3u8格式视频 - 简书

Hls.js 使用文档 - 掘金

GitHub - video-dev/hls.js

1、使用npm安装hls.js或者外部引入；

npm install --save hls.js

 <script src="https://cdn.jsdelivr.net/npm/hls.js@1.2.7/dist/hls.js"></script>

2、使用

<template><div class="page"><video controls id="video" autoplay="autoplay"><sourcetype="application/x-mpegURL"></video>
</div>
</template>
<script lang="ts">
// import HLS from 'hls.js';
import {defineComponent} from "vue";
var HLS = (window as any).Hls;
let hls = new HLS()
//声明两个变量
export default defineComponent({methods: {//点击播放start(){if (HLS.isSupported()) {var video = <HTMLVideoElement>document.getElementById('video');hls.attachMedia(video);hls.loadSource('1.m3u8');hls.on(HLS.Events.MANIFEST_PARSED, () => {video.play();console.log("加载成功");});hls.on(HLS.Events.ERROR, (event, data) => {console.log("加载失败");});}}},mounted(){this.start();}
})
</script>

3、接口

    @RequestMapping("/video/{file}")public void video( HttpServletResponse response, @PathVariable("file") String file){try {file = dir + file;ServletOutputStream out = response.getOutputStream();byte b[] = readFileToByteArray(file); //一开始固定读取1024字节，导致前端解析一直错误，应该是文件多少字节就读取多少字节内容out.write(b);out.flush();} catch (Exception e){}}

转：Hls.js加载m3u8主流程源码解析 - 知乎

hls.js库根据功能划分为多个controller，如abr-controller、buffer-controller、stream-controller等，每个controller任务明确，通过事件监听派发的方式完成视频流的拉取、解析、播放等。

hls.js从初始化到加载m3u8，到选择不同码率加载对应ts文件，再解码ts转为mp4最终在浏览器播放，整个过程非常复杂

主流程中有两个关键的定时器，第一个为StreamController启动用来轮询ts文件列表是否更新结束；第二个为在ts片加载过程中，用来轮询监听当前ts下载速率以动态调节不同的码率，hls.js初始默认码率为playlist的中间码率，如当前码率列表为360p、480p、720p，则初始默认取480p。

二、video.js + video.hls.js

官网：Home | Video.js Documentation

中文文档：video.js -HTML5 视频播放器

videojs中文文档详解

转：前端播放m3u8格式视频 - 十色 - 博客园

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>前端播放m3u8格式视频</title><!--https://www.bootcdn.cn/video.js/--><link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script><!--https://www.bootcdn.cn/videojs-contrib-hls/--><script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.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 type="application/x-mpegURL"> //source 标签是设置静态资源的，如果是通过video的api动态设置文件，这标签不需要，不然会有一些问题</video>
</body>
<script>    // videojs 简单使用  var myVideo = videojs('myVideo',{bigPlayButton : true, textTrackDisplay : false, posterImage: false,errorDisplay : false,})myVideo.src([{src: "视频.m3u8",type: "application/x-mpegURL", // 告诉videojs,这是一个hls流},]);myVideo.play() // 视频播放myVideo.pause() // 视频暂停
</script>
</html>

或者直接使用video.js，会自动扫video元素加载

<!DOCTYPE html>
<html lang=""><head><link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"><script src="https://unpkg.com/video.js/dist/video.js"></script></head><body><video class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'> <source src="video.m3u8" type="application/x-mpegURL"></video></body>
</html>

前端播放m3u8格式视频相关推荐

video标签播放m3u8格式视频-------html页面
m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频文件,然后存在服务器中(现在为了减少I/o访问次数,一般 ...
Video 标签播放 m3u8 格式视频
在不借助流媒体播放器的前提下,直接播放 m3u8 格式的视频文件更多精彩更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线写在前面的话为什么要播放 m3u8 格式的视频对于一 ...
srs服务器播放文件,使用SRS+ffmpeg搭建流媒体服务器播放m3u8格式视频
1.简介 srs是一个简单的流媒体开源直播软件,ffmpeg是完整的跨平台解决方案,用于记录,转换和流传输音频和视频. 2.相关官网下载页面:点击我到达在线演示播放页面:点击我到达 Git页面:点 ...
video插件播放m3u8格式视频(存原生)
video插件播放m3u8格式视频(存原生) 这里使用原生的javascript实现m3u8格式视频播放. 使用了包括video.min.js库和HLS插件. 1-基础使用 <!DOCTYPE ...
uniapp H5 项目播放 m3u8格式视频
uniapp H5 项目播放 m3u8格式视频阐述在项目中,可能会获取一些直播流地址,比如最常见的就是.m3u8视频格式.在小程序可以直接使用video 标签就可以直接播放,因为小程序有自己的引 ...
Android播放M3U8格式视频失败
一.背景 Android使用Ijkplayer播放m3u8图片格式的视频失败IOS没问题,当我们使用自定义播放器播放后端给的一个视频地址时,正常直接把播放链接丢到播放器里即可,但是m3u8格式视频比较 ...
vue使用原生videojs 播放m3u8格式的视频——播放m3u8格式视频（一）
vue使用原生video播放m3u8格式的视频 1.安装依赖 2.页面引入插件(这里我是页面单独引入,减少项目体积) 3.页面中的使用常见问题 4.实现过程 5.实现.m3u8格式视频播放方法 1. ...
androidTV在html中集成饺子播放器并播放m3u8格式视频
饺子播放器的默认引擎是MediaPlayer,只能播放一些常见格式的视频.想要播放m3u8格式,需要切换引擎 jzvdStd.setUp("http://youku.cdn-iqiyi.co ...
第一次在Vue项目中播放m3u8格式视频遇到的问题和解决方法
一.m3u8文件第一次接触这种m3u8格式的视频文件,开始以为类似与.mp4这种,所以在项目中我通过html5提供的video标签做播放功能发现并不能成功,后来了解到M3U8文件是一种UTF-8编码 ...
GSYVideoPlayer 播放m3u8格式视频遇到的坑
1. 背景在开发小窗播放的时候遇到的问题,应用主页和详情页都有一个小窗播放,还有一个全屏的播放页,测试的时候发现两种小窗播放的场景不能播放,而全屏的页面却可以. 2. 报错 04-02 16:32: ...

前端播放m3u8格式视频

HLS

二、video.js + video.hls.js

前端播放m3u8格式视频相关推荐

最新文章

热门文章