简单记录@videojs-player/vue播放插件用法

先下包

npm install video.js @videojs-player/vue
 
# yarn
yarn add video.js @videojs-player/vue
 
# pnpm
pnpm add video.js @videojs-player/vue

vue3组件代码

  <div>
    <video-player
      :src="options.src"
      :poster="options.poster"
      class="video-player"
      crossorigin="anonymous"
      :preload="options.preload"
      playsinline
      controls
      :loop="options.loop"
      :volume="0.6"
      :options="options"
      @mounted="handleMounted"
      @ended="ended($event)"
      @play="play($event)"
      @pause="pause($event)"
    ></video-player>
  </div>
</template>
<script setup>
import { VideoPlayer } from '@videojs-player/vue'
import 'video.js/dist/video-js.css'
/* videoplayer */
const player = shallowRef(null)
const options = reactive({
  width: '100vw', // 播放器宽度，默认100vw
  height: '200px', // 播放器高度，默认100vh
  src: '/test.mp4', // 视频地址
  poster: '', // 视频海报
  type: 'm3u8', // 视频类型
  muted: false, // 视频静音
  autoplay: true, // 自动播放
  loop: false, // 循环播放
  volume: 1, // 音量大小 0-1
  preload: 'auto', // 预加载
  objectFit: 'cover', // 同css object-fit，作用于video标签
  currentTime: 0, // 当前播放时间
  showCurrentTime: false, // 是否在拖动进度条时toast当前时间文字
  errorText: '播放出错', // 视频error时，toast提示
  control: true,
  preferFullWindow: true //将此设置为true将更改不支持 HTML5 全屏 API 但支持视频元素全屏的设备（即 iPhone）上的全屏行为。播放器将被拉伸以填充浏览器窗口，而不是全屏播放视频
})

const nextPlayUrl = ref('')
const nowPlayUrlIndex = ref(0)
const videoList = ref([{ url: '/test.mp4', resCover: '/test-cover.png' }, {url: '/test2.mp4', resCover: '/test2-cover.jpg'}])

// 当我们需要给视频增加流体模式时，也可以在mounted阶段
const handleMounted = (payload) => {
  player.value = payload.player
  player.value.fluid(true)
  player.value.aspectRatio('16:9')
}
// 我们还可在播放、暂停、结束进行一些操作，或者当这些操作发生时我们需要做什么
const play = (log) => {
    // player.value.pause()
}
const pause = (log) => {
  // 暂停的时候我们可以跳出广告弹窗
}
// 视频播放完 =》 跳转下一个
const ended = (log) => {
    console.log("videoList.length", videoList.value.length)
  const total = videoList.value.length
  if (total === 0) return

  nowPlayUrlIndex.value =
    nowPlayUrlIndex.value + 1 < total ? nowPlayUrlIndex.value + 1 : 0

  const { url, resCover } = videoList.value[nowPlayUrlIndex.value]
  nextPlayUrl.value = url
  console.log('nextPlayUrl', nextPlayUrl.value)

  player.value.poster(resCover)
  player.value.src({ src: url, type: 'video/mp4' })
  player.value.load()
  player.value.play()
}
</script>
<style scoped lang="scss">
.video-js {
  width: 100%;
  /*不给高度是因为开启了流体模式自适应*/
}

:deep(.vjs-poster img) {
  object-fit: fill; /*让封面图片也铺开*/
}
/*对原生的播放按钮进行样式修改*/
:deep(.video-js .vjs-big-play-button) {
  display: none;
  height: 3em;
  line-height: 3em;
  border: none;
  border-radius: 50%;
  margin-top: -1.31666em;
  margin-left: -1.5em;
}
/*隐藏一些不需要的按钮*/
.vjs-picture-in-picture-control vjs-control vjs-button {
  display: none !important;
}
</style>