hls实现播放m3u8视频&将视频流进行切片& HLS.js简介

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甚至支持自定义封面图,几乎所有 的播放器、甚至是浏览器都支持这个封装格式。
    1. FLV格式与往期《直播协议》中的RTMP、HTTP-FLV是类似的,毕竟都是Adobe公司主导或推出的标准。
  • FLV是一种为网络视频设计的格式,网页加入flv.js插件就可以播放了 FLV可以做长连接需要用flv.js。
    1. 最后是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

javascript 复制代码
<template>
  <div id="dplayer" style="width: 400px"></div>
  <p>
    <button @click="playVideo">播放视频</button> &nbsp;
    <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

相关推荐
海底火旺14 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺15 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码16 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou17 分钟前
组件测试
前端
JustHappy19 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
张可33 分钟前
历时两年半开发,Fread 项目现在决定开源,基于 Kotlin Multiplatform 和 Compose Multiplatform 实现
android·前端·kotlin
培根芝士40 分钟前
electron-updater实现自动更新
javascript·electron
嘻嘻嘻嘻嘻嘻ys1 小时前
《Spring Boot 3 + GraalVM原生镜像实战:云原生时代的毫秒启动与性能调优》
前端·后端
嘻嘻嘻嘻嘻嘻ys1 小时前
《Spring Boot 3.0×GraalVM:云原生时代的毫秒级启动实战革命》
前端·后端
嘻嘻嘻嘻嘻嘻ys1 小时前
《Vue 3.4响应式内核优化与WebAssembly性能突破实战指南》
前端·后端