Vue2项目中使用videojs播放mp4视频_videojs vue2

步骤 1: 安装 Video.js

npm install video.js --save

步骤 2: 创建 VideoPlayer 组件

 
   
import videojs from \'video.js\';import \'video.js/dist/video-js.css\'; // 引入 Video.js 默认样式export default { name: \'VideoPlayer\', props: { options: { type: Object, default() { return {}; } }, mp4src: { type: String, required: true, } }, data() { return { player: null }; }, methods: { playerMedia() { this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() { console.log(\'Your player is ready!\'); }); this.player.src({ src: this.mp4src, // 替换为你的MP4视频URL type: \'video/mp4\' }); } }, beforeDestroy() { if (this.player) { this.player.dispose(); // 清理资源 } }, watch: { mp4src: { handler: function(val) { val && this.playerMedia() }, immediate: true, } }};/* 自定义样式 */.video-js { width: 100%; height: 100%; padding: 0 !important;}

步骤 3: 在父组件中使用 VideoPlayer 组件

 
  首页 详情  
 
 
 {{ videoDetail[\'title\'] }} 
 
 
 简介：{{videoDetail[\'content\']}} 
 
  
 
 
import count from \"@/api/home\";import VideoPlayer from \"@/components/Lives/VideoPlayer.vue\";export default { components: { VideoPlayer }, data(){ return{ playerOptions: { autoplay: true, // 是否自动播放 controls: true, // 显示控制条 sources: [], // poster: \'/path/to/default.jpg\' // 可选: 视频封面图片 }, videoDetail: { id: undefined, title: \'\', content: \'\', src: \'\', }, } }, created() { let id=this.$route.query.id; count.getVideoById({id}).then(res=>{ console.log(res, \'视频获取\'); const {code, msg, data} = res; if(code === 0 && msg === \'success\') { for (const videoDetailKey in this.videoDetail) { if (data.hasOwnProperty(videoDetailKey)) { this.videoDetail[videoDetailKey] = data[videoDetailKey]; } } } }) },};.play { width: 100%; height: 100%; padding: 64px 130px; background: #eee;}.playDetail { width: 100%; height: 100%; background: #fff; padding: 20px;}.playback { border-bottom: 1px solid #eee;}.playback-title { font-size: 24px; padding: 10px 0px; margin: 0; font-weight: bold;}.introduction { font-size: 14px; padding: 10px 0px; margin: 0; font-weight: bold;}.play-video{ width: 100%; height: 460px;}

在上面的示例中，首先引入videojs和video.js的CSS文件。然后创建了一个video标签，并使用ref属性来引用它。

在Vue组件的mounted钩子中，使用videojs初始化了播放器。将video标签传递给videojs构造函数，并在构造函数中传递了一些选项。然后，通过src方法将本地.mp4文件加载到播放器中，并使用play方法自动播放。

在组件销毁之前，使用了beforeDestroy钩子来销毁videojs播放器，以避免内存泄漏问题。