vue3 如何播放m3u8格式文件

需求场景

        在开发过程中，最担心的就是视频被偷盗了，还有视频过大，加载慢，如何解决这些问题呢？

解决方案

        可以从物理方面和技术方面两个维度去解决这个问题。物理维度主要是防止用户下载，禁止用户右键点击；技术方面主要是将原来的常规视频转换成m3u8格式的视频文件。主要实施步骤如下：

        1、将mp4文件转换成m3u8格式文件，然后将其传到静态资源服务器。如阿里云、七牛云等等。

        2、配置静态资源服务器跨域设置。阿里云配置跨域设置

       

        3、前端使用video.js播放m3u8视频格式文件。具体代码可以看代码实例

遇到的问题

        1、不了解m3u8格式是什么？

        m3u8格式文件就是一种索引文件。比如现在有一个all.mp4文件，经过切片分割成6部分 ylky.m3u8、ylky0.ts、ylky1.ts、ylky2.ts、ylky3.ts、ylky4.ts。其中ylky.m3u8就是索引文件，.ts文件就是分割后的视频文件。索引结构如下图

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:10.000000,
ylky0.ts
#EXTINF:10.000000,
ylky1.ts
#EXTINF:10.000000,
ylky2.ts
#EXTINF:10.000000,
ylky3.ts
#EXTINF:10.000000,
ylky4.ts

        2、前端如何播放m3u8格式文件？

        需要下载对应的依赖video.js和videojs-contrib-hls,其它步骤直接将代码实例。

       3、如何防止用户右键点击以及隐藏下载按钮？

        该链接有具体的代码实例，可查看

优化总结

        恐惧来源于未知。因为搞不清楚m3u8的本质，所以导致开发中走了很多的弯路。所以，拓宽自身的技术事业，你会发现原来有些问题处理起来就是这么简单。

代码实例

<template>
  <div>
    <div>
      <video id="my-video" controls class="video-js vjs-default-skin" preload="auto" @timeupdate="timeupdate">
        <source :src="playVideo.videoUrl" type="application/x-mpegURL">
      </video>
      
    </div>
  </div>
</template>
 
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

// 定义 videojs 实例
const myPlayer = ref()
const playVideo = reactive({
  videoUrl: 'xxxxx/ylky.m3u8',
})
onMounted(() => {
  initVideoSource()
})
function initVideoSource() {
  myPlayer.value = videojs('my-video', {
    controls: true, // 是否显示控制条
    preload: 'auto',
    autoplay: false,
    loop: false, // 循环播放
    // fluid: true, // 自适应宽高
    language: 'zh-CN', // 设置语言
    muted: false, // 是否静音
    inactivityTimeout: false,
    // 设置控制条组件
    controlBar: { // 设置控制条组件
      //  设置控制条里面组件的相关属性及显示与否
      currentTimeDisplay: true,
      timeDivider: true,
      durationDisplay: true,
      remainingTimeDisplay: false,
      volumePanel: {
        inline: false,
      },
      pictureInPictureToggle: false,
    },
    sources: [
      {
        src: playVideo.videoUrl,
        type: 'application/x-mpegURL',//主要数据类型必须是这种格式
      },
    ],
    userActions: {
      seek: false,
    },
  })

}
const timeupdate = (e)=>{
  console.log(e.target.currentTime)
}
</script>