player) { this.player.pause(); } }, }, 5. 清理和销毁Video.js实例 在组件卸载前,你应该销毁Video.js实例以释放资源。这通常在组件的beforeUnmount生命周期钩子中完成,如上面的示例所示。 通过以上步骤,你应该能够在Vue 3项目中成功集成和使用Video.js进行视频播放。如果你需要更高级的功能或自定义样式,可以参考Video.js的官方文档和API进行进一步的配置和扩展。
这里使用的是 Vue3 版本的videojs-player,Vue2 及 React 版本需要去 github 看相关实例 npm install video.js @videojs-player/vue --save 全局组件使用 import{ createApp }from'vue' importVueVideoPlayerfrom'@videojs-player/vue' import'video.js/dist/video-js.css' constapp =createApp() app.use(V...
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 可以禁用画中画按钮) ...
在切换地址时使用player.dispose()销毁时,同时会把dom元素一起销毁 ,导致切换播放失败 可以直接使用vue3的toRaw https://cn.vuejs.org/api/reactivity-advanced.html#toraw 在切换的时候使用以下代码 player.pause(); player.reset(); toRaw(player).src({ src: videoUrl }); player.load(); player.play(...
五、在需要的地方使用 VideoPlayer.vue组件 <template><video-player:options="videoOption"></video-player></template><scriptlang="ts"setup>import VideoPlayer from '@/components/VideoPlayer.vue' let videoOption = reactive({ autoplay: true, controls: true, sources: [ { src: 'xxx.m3u8', type:...