vue3播放m3u8视频（videoJS）

小咪咪 2023-09-23 19:25 127阅读 0赞

### 安装 ###

npm install video.js --save

### 组件内导入 ###

需要同时导入videoJS以及相关的CSS

import videojs from "video.js"
    import "video.js/dist/video-js.css"

### 组件内使用 ###

import {
         onUnmounted, ref, nextTick } from "vue"
    import videojs from "video.js"
    import "video.js/dist/video-js.css"
    const videoPlayer = ref(null)
    const myPlayer = ref(null)
    nextTick(() => {
        
      myPlayer.value = videojs(videoPlayer.value, {
        
        // poster: "//vjs.zencdn.net/v/oceans.png",//视频封面照片
        controls: true,//视频控件
        autoplay: true,//自动播放
        sources: [
          {
        
            src: `https://video.m3u8`,//播放视频地址
            type: 'application/x-mpegURL',//播放m3u8需要设置的格式
          }
        ],
        controlBar: {
        
          remainingTimeDisplay: {
        
            displayNegative: false
          }
        },
        playbackRates: [0.5, 1, 1.5, 2]//设置播放速度
      },)
    })
    //页面销毁时，销毁Video播放组件
    onUnmounted(() => {
        
      if (myPlayer.value) {
        
        myPlayer.value.dispose()
      }
    })

### 组件示例 ###

以下时项目使用中自己封装的组件，用起来也很简单，需要的可以对照自取  
UI框架为 ant-design-vue

<template>
      <div class="video_wrap">
        <div class="backIndex">
          <span @click="router.push({ path: '/videoList' })"><left-outlined /></span>
        </div>
        <video ref="videoPlayer" muted="muted" class="video-js video"></video>
      </div>
    </template>
    <script setup>
    import {
         onUnmounted, ref, nextTick } from "vue"
    import {
         useRoute, useRouter } from "vue-router";
    import {
         LeftOutlined } from "@ant-design/icons-vue";
    import videojs from "video.js"
    import "video.js/dist/video-js.css"
    const videoPlayer = ref(null)
    const myPlayer = ref(null)
    const route = useRoute();
    const router = useRouter()
    let token = route.query.token;
    nextTick(() => {
        
      myPlayer.value = videojs(videoPlayer.value, {
        
        // poster: "//vjs.zencdn.net/v/oceans.png",//视频封面照片
        controls: true,//视频控件
        autoplay: true,//自动播放
        sources: [
          {
        
            src: `/api/video/playlist/${
          token}.m3u8`,//视频地址
            type: 'application/x-mpegURL',
          }
        ],
        controlBar: {
        
          remainingTimeDisplay: {
        
            displayNegative: false
          }
        },
        playbackRates: [0.5, 1, 1.5, 2]//设置播放速度
      },)
    })
    
    onUnmounted(() => {
        
      if (myPlayer.value) {
        
        myPlayer.value.dispose()
      }
    })
    </script>
    <style lang="scss" scoped>
    .video_wrap {
        
      width: 100vw;
      height: 100vh;
      position: relative;
    
      .backIndex {
        
        position: absolute;
        top: 0;
        left: 0;
        height: 50px;
        width: 100%;
        line-height: 50px;
        background: rgba(0, 0, 0, .5);
        z-index: 99;
        padding-left: 10px;
        font-size: 20px;
        font-weight: 400;
        opacity: 0;
        transition: all .3s;
        color: white;
    
        &:hover {
        
          opacity: 1;
        }
    
        span {
        
          cursor: pointer;
        }
      }
    
      .video {
        
        height: 100%;
        width: 100%;
      }
    
      ::v-deep(.vjs-big-play-button) {
        
        margin-left: 45%;
        margin-top: 20%;
      }
    }
    </style>