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

本文介绍: HLS 协议本身实现了码率自适应,在不同带宽情况下,设备可以自动切换到最适合自己码率的视频播放1.跨平台性：支持 iOS/And roi d/浏览器，通用性强。穿墙能力强：由于HLS是基于HTTP协议的，因此HTTP数据能够穿透的防火墙或者代理服务器HLS都可以做到，基本不会遇到被防火墙屏蔽的情况。切换码率快（清晰度）：自带多码率自适应，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。客户端可以很快的选择和切换码率，以适应不同带宽条件下的播放。

github 官网 Gi tHu b – video–dev/hls.js: HLS.js is a Jav aSc rip t library t hat play s HLS in b row s er s wi th support f o r MSE.HLS.js is a Jav aSc rip t library t hat play s HLS in br o ws er s wi th support f o r MSE. – GitHu b – v ide o–dev/hls.js: HLS.js is a Ja vaSc ript librar y that play s HLS in br o ws ers wi th support f or MSE.https://git hub.com/v ideo-dev/hls.js

1.简介格式

2.接到一个需求需要将视频流进行切片做优化后的视频流如何做到？

目前市场主流的是hls .ts 后缀将视频流进行切片前端如何做到？

准备思想

yarn add dplayer -S // 视频播放器插件
yarn add hls.js -S  // 播放hls流插件

<template&gt;
  <div id="dplayer" style="width: 400px"&gt;</div>
  <p>
    <button @click="playVideo">播放视频</button> &amp;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>