vue利用videojs-player实现视频播放

前言：之前插入视频我一直想要使用的是网上比较火的vue-video-player，但是出现了找不到

'vue-video-player/src/custom-theme.css'

等问题，以及视频组件串位等问题，也有可能是vue3兼容性的问题，因此，后来采用了这个videojs-player。

流程：首先下载对应的包

npm install video.js @videojs-player/vue --save

然后去官网可以找到自己想要实现的案例效果所对应的代码并使用到自己的项目中来。

videojs-player | Homepage (surmon.me)

可能需要稍作修改，如没有scss，可以去除style标签上对应的lang；去除script上的lang并删掉ts相关的代码或用不到的方法等等。

可以拿我这里改过的实例代码试一试↓

<template>
  <video-player
    class="video-player vjs-big-play-centered"
    src="https://vjs.zencdn.net/v/oceans.mp4"
    poster="https://vjs.zencdn.net/v/oceans.png"
    crossorigin="anonymous"
    playsinline
    controls
    :volume="0.6"        
    :height="320"        
    :playback-rates="[0.7, 1.0, 1.5, 2.0]"        
    @mounted="handleMounted"
    @ready="handleEvent($event)"
    @play="handleEvent($event)"
    @pause="handleEvent($event)"
    @ended="handleEvent($event)"
    @loadeddata="handleEvent($event)"
    @waiting="handleEvent($event)"
    @playing="handleEvent($event)"
    @canplay="handleEvent($event)"
    @canplaythrough="handleEvent($event)"
    @timeupdate="handleEvent(player?.currentTime())"
  />
</template>

<script>
  import { defineComponent, shallowRef } from 'vue'
  import { VideoJsPlayer } from 'video.js'
  import { VideoPlayer } from '@videojs-player/vue'
  import 'video.js/dist/video-js.css'

  export default {
    name: 'vue-basic-player-example',
    title: 'Basic player (Vue)',
    components: {
      VideoPlayer
    },
    setup() {
      //可打印出当前所触发的事件
      const handleEvent = (log) => {
        console.log('Basic player event', log)
      }

      return { handleEvent }
    }
  }
</script>

<style scoped>
  .video-player {
    background-color: black;
    width: 100%;
  }
</style>

可以看到页面实现了对应的效果，基本的播放功能可以实现： 

使用本地文件也是可以的，如require('@/assets/video/test.mp4')，不同项目路径可能会有些许差别。

附加：弹窗关闭视频依旧运行的问题

可以实现在弹窗中播放视频的效果，但是会出现弹窗关闭视频依旧运行的问题。页面虽然关掉了，依旧在播放，可听到声音。

解决方案：可以使用v-if，根据当前弹窗框的显示状态决定video-player是否存在即可实现。

如下例中，通过dialogVisible决定。

<video-player v-if="dialogVisible" class="video-player vjs-big-play-centered" :src="totalsrc"
        poster="https://vjs.zencdn.net/v/oceans.png" crossorigin="anonymous" playsinline controls :volume="0.6"
        height="500%" :playback-rates="[0.7, 1.0, 1.5, 2.0]"
        @mounted="handleMounted"
        @ready="handleEvent($event)"
        @play="handleEvent($event)"
        @pause="handleEvent($event)"
        @ended="handleEvent($event)"
        @loadeddata="handleEvent($event)"
        @waiting="handleEvent($event)"
        @playing="handleEvent($event)"
        @canplay="handleEvent($event)"
        @canplaythrough="handleEvent($event)"
        @timeupdate="handleEvent(player?.currentTime())"
        />

希望本文会对您有所帮助^_^