vue3引入video.js

前端筱攻城狮

已于 2023-08-03 15:26:13 修改

阅读量1.5k

点赞数

文章标签： javascript 前端

于 2023-08-03 15:25:42 首次发布

本文链接：https://blog.youkuaiyun.com/qq_26018335/article/details/132084532

版权

一.引入video.js

yarn add video.js @videojs-player/vue --save

或者

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

二.vue3项目main.js引入

import VueVideoPlayer from "@videojs-player/vue"
import "video.js/dist/video-js.css"
const app = createApp(App)
app.use(VueVideoPlayer)

三.测试是否引入成功

找到随便一个页面文件粘贴以下代码（其中的src改成具体视频url）

    <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto">
      <source
        src="http://192.168.10.100:111/api/file/download/3c52c250-876b-449f-9ac1-48c6bb1ef72f?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEiLCJ1c2VybmFtZSI6InJvb3QiLCJpYXQiOjE2OTA4NTE2ODgsImV4cCI6MTc3NzI1MTY4OH0.6jbaN9a_55w9MBT1JoM3pASeVatsDOiq6rrnrIaE740"
        type="video/mp4"
      />
    </video>