首先,你需要在Vue 3项目中安装Video.js。你可以使用npm或yarn来安装它: bash npm install video.js 或者 bash yarn add video.js 2. 在Vue 3项目中引入Video.js 在你的Vue组件中,你需要引入Video.js库及其CSS文件。这通常在组件的<script>部分完成: javascript import videojs from 'video.js';...
官网:https://videojs.com/guides API 文档:https://docs.videojs.com/ 使用(Vue) 这里使用的是 Vue3 版本的videojs-player,Vue2 及 React 版本需要去 github 看相关实例 npm install video.js @videojs-player/vue --save 全局组件使用 import{ createApp }from'vue' importVueVideoPlayerfrom'@videojs-...
可以直接使用vue3的toRaw https://cn.vuejs.org/api/reactivity-advanced.html#toraw 在切换的时候使用以下代码 player.pause(); player.reset(); toRaw(player).src({ src: videoUrl }); player.load(); player.play(); 就可以解决了
npm install video.js @videojs-player/vue --save 本人用的时候的版本"video.js":"^8.10.0", 引入 main.js:import"video.js/dist/video-js.css";importVueVideoPlayerfrom'@videojs-player/vue'app.use(VueVideoPlayer) html (disablePictureInPicture 可以禁用画中画按钮) ...
但是普通的video标签是不支持.m3u8格式文件直接播放的,网上查了一下,就用了videojs: videojs官网 使用方法:(因为我是在vue3中用的,所以引入js文件那些就不说了) npm install video.js --save // 视频播放器插件 网上也有好多说videojs-contrib-hls,但是我没用这个也正常播放了,所以就没加,需要的童鞋也可以...
npm地址:https://www.npmjs.com/package/video.js 二、安装 yarn add video.js @types/video.js -D // 或者 // npm i video.js @types/video.js -D 三、在main.ts中引入css import'video.js/dist/video-js.css' 四、创建 VideoPlayer.vue组件 ...