vue3+ts 使用video.js播放m3u8格式视频介绍 m3u8:: M3U8 文件是一种 Unicode 版本的

介绍

m3u8::

M3U8 文件是一种 Unicode 版本的 M3U 文件。M3U 文件最初被设计为 MP3 播放器的播放列表格式，但现在已经被扩展为支持更多的媒体文件类型。"M3U" 是 "MP3 URL" 的缩写，而 "8" 则表示这种格式使用 UTF-8 字符编码。
M3U8 文件本身并不包含音频或视频数据，而是包含了一系列的文本指令，这些指令指向存储在其他地方的媒体文件。这些媒体文件可以是本地的，也可以是网络上的。一个 M3U8 文件可以包含对多个媒体文件的引用，这些文件将按照在 M3U8 文件中的顺序进行播放。
M3U8 文件的一个重要特性是它支持 "媒体段"。这意味着一个长的音频或视频文件可以被切割成多个小的片段，每个片段都有自己的 URL。这使得 M3U8 文件非常适合于流媒体，因为客户端可以在播放一段媒体的同时下载下一段媒体，从而实现无缝播放。
播放 M3U8 格式的视频时，实际上是在下载并播放由 M3U8 文件索引的多个小的媒体片段，这些片段通常是 TS (Transport Stream) 格式的文件。这种方式允许视频在下载的同时播放，也支持自适应比特率流，即根据网络状况动态调整视频质量。然而，这并不意味着这些片段会被永久保存到你的设备上。一般来说，这些片段在被播放后会被立即删除，以节省存储空间。这就像你在观看网络直播或者在线视频时，视频数据是被实时传输到你的设备上，但并不会被永久保存。

安装

npm install video.js
npm install hls.js

引用

import 'video.js/dist/video-js.css';
import videojs from 'video.js';
import Hls from 'hls.js';
import flvjs from 'flv.js';
//http://1257120875.vod2.myqcloud.com/0ef121cdvodtransgzp1257120875/3055695e5285890780828799271/v.f230.m3u8 测试url
const videoPlayer = ref(null);
const VideoUrl = props.url;
const getExtension = url => {
  var urlParts = url.split('/');
  var filename = urlParts[urlParts.length - 1];
  var filenameParts = filename.split('.');
  var extension = filenameParts[filenameParts.length - 1];
  if (extension.toLowerCase() === 'mp4') {
    return 'video/mp4';
  } else if (extension.toLowerCase() === 'm3u8') {
    return 'application/x-mpegURL';
  } else if (extension.toLowerCase() === 'WebM') {
    return 'video/webm';
  } else if (extension.toLowerCase() === 'Ogg') {
    return 'video/ogg';
  } else if (extension.toLowerCase() === 'mov') {
    return 'video/quicktime';
  } else if (extension.toLowerCase() === 'flv') {
    return 'video/x-flv';
  }
};
onMounted(() => {
  nextTick(() => {
    const player = videojs(videoPlayer.value, {
      controls: true,
      autoplay: false,
      preload: 'auto',
      sources: [
        {
          src: VideoUrl,
          type: getExtension(VideoUrl)
        }
      ]
    });

    // player.play();
  });
});

template

 <video ref="videoPlayer" class="video-js vjs-default-skin" controls></video>
 
 
 //自行调整样式
 /deep/.video-js {
  width: 100%;
  height: 10rem !important;
  position: relative;
}
/deep/ .vjs-big-play-button {
  height: 1.63332em;
  width: 1.63332em;
  border: 0.06666em solid #57c221 !important;
  border-radius: 50%;
  transition: all 0.4s;
  top: 20% !important;
  left: 35% !important;
  transform: translate(50%, 50%) !important;
}
/deep/.vjs-icon-placeholder:before {
  color: #57c221;
}

vue3+ts 使用video.js播放m3u8格式视频

介绍

安装

引用

template

预览