github官网GitHub - video-dev/hls.js: HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.HLS.js is a JavaScript library that plays HLS in browsers with support for MSE. - GitHub - video-dev/hls.js: HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.
https://github.com/video-dev/hls.js
1.简介格式
- 1. MP4是最常见的封装格式了，应用范围广、灵活性高、兼容性强 。
- MP4甚至支持自定义封面图，几乎所有的播放器、甚至是浏览器都支持这个封装格式。
- 2. FLV格式与往期《直播协议》中的RTMP、HTTP-FLV是类似的，毕竟都是Adobe公司主导或推出的标准。
- FLV是一种为网络视频设计的格式，网页加入flv.js插件就可以播放了 FLV可以做长连接需要用flv.js。
- 3. 最后是HLS格式，在往期《直播协议》已经详细讨论过HLS了。
- 在点播的场景下，HLS实质上就是把一整个大的视频文件分成很多个碎片视频文件。
- HLS格式的文件由两部分组成，一是多个只有几秒长度的.ts碎片视频文件，另一个是记录这些视频文件地址的.m3u8索引文件。
2.接到一个需求需要将视频流进行切片做优化后的视频流如何做到？
目前市场主流的是hls .ts后缀将视频流进行切片前端如何做到？
准备思想
后端将源文件.mp4进行切片思想用.m3u8返回给前端
1.初始.m3u8文件包含url的其他.m3u8文件如下图
2.url的其他.m3u8包含.ts切片的视频流文件如下图
3.最后我们将初始化.m3u8放进url类型改为customHls即可播放将进度条拖动即可看出切片视频端
- 安装依赖
yarn add dplayer -S // 视频播放器插件
yarn add hls.js -S // 播放hls流插件- App.vue
<template>
<div id="dplayer" style="width: 400px"></div>
<p>
<button @click="playVideo">播放视频</button>
<button @click="pauseVideo">暂停视频</button>
</p>
</template>
<script setup>
import { onMounted } from "vue";
import Hls from "hls.js";
import DPlayer from "dplayer";
console.log(DPlayer);
let dpInstance = null;
function playVideo() {
console.log(dpInstance.play);
dpInstance.play();
}
function pauseVideo() {
dpInstance.pause();
}
onMounted(() => {
const dp = new DPlayer({
container: document.getElementById("dplayer"),
video: {
url: "https://xxxx.m3u8", //需要后端配合返回.m3u8格式 .m3u8格式必须包含其他http视频流格式
type: "customHls", //类型可以mp4 || hls || flv
customType: {
customHls: function (video) {
// let config = {
// xhrSetup: function (xhr) {
// xhr.withCredentials = true; // 会携带cookie
// xhr.setRequestHeader("token", "my-token");
// },
// };
const hls = new Hls();
hls.loadSource(video.src);
hls.attachMedia(video);
},
},
},
});
window.dp = dp;
dpInstance = dp;
});
</script>
<style lang="scss"></style>
下个文章如何解决并下载加密后的视频文件.ts
