vue3 videojs简单应用

01.参考链接

npm官网： @videojs-player/vue - npm
github官网：videojs-player | Homepage
完整属性可以参考：videojs-player:@videojs player component for @vuejs(3) and React. - GitCode

官网有详细的vue示例及源码：

以上是参考链接，下面开始：

02. 安装

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

03.代码改写

将官网源码抄下来，简单改写：去掉css、引入我们自己的封面图，简单改写后的代码如下：

<template>
  <video-player
    class="video-player vjs-big-play-centered"
    src="https://vjs.zencdn.net/v/oceans.mp4"
    :poster="poster"
    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())"
  />
</template>

<script setup>
import { shallowRef } from "vue";
import { VideoPlayer } from "@videojs-player/vue";
import poster from "./video-post.png";// 引入本地封面图
import videojs from "video.js";// 好像没用，可以不用引入，暂时先放这吧
import "video.js/dist/video-js.css";

const player = shallowRef();
const handleMounted = (payload) => {
  player.value = payload.player;
  console.log("Basic player mounted", payload);
};

const handleEvent = (log) => {
  console.log("Basic player event", log);
};
</script>

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

04. 效果

页面效果如下：
只需要传入一个可以在线播放的视频链接即可，视频可以正常播放、有封面图