Vue2项目中使用videojs播放mp4视频
步骤 1: 安装 Video.js
npm install video.js --save步骤 2: 创建 VideoPlayer 组件
<template><div><!-- Video.js player container --><video ref="videoPlayer" class="video-js"></video></div>
</template><script>
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视频URLtype: 'video/mp4'});}},beforeDestroy() {if (this.player) {this.player.dispose(); // 清理资源}},watch: {mp4src: {handler: function(val) {val && this.playerMedia()},immediate: true,}}
};
</script><style scoped>
/* 自定义样式 */
.video-js {width: 100%;height: 100%;padding: 0 !important;
}
</style>
步骤 3: 在父组件中使用 VideoPlayer 组件
<template><div class="play"><el-breadcrumbseparator-class="el-icon-arrow-right"style="padding: 10px 0px"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item>详情</el-breadcrumb-item></el-breadcrumb><div class="playDetail"><div class="playback"><p class="playback-title">{{ videoDetail['title'] }}</p></div><p class="introduction">简介：{{videoDetail['content']}}</p><div class="play-video"><VideoPlayer style="width: 100%; height: 460px;" :options="playerOptions" :mp4src="videoDetail['src']" /></div></div></div>
</template><script>
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];}}}})},
};
</script><style lang="scss" scoped>
.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;
}
</style>
在上面的示例中，首先引入videojs和video.js的CSS文件。然后创建了一个video标签，并使用ref属性来引用它。
在Vue组件的mounted钩子中，使用videojs初始化了播放器。将video标签传递给videojs构造函数，并在构造函数中传递了一些选项。然后，通过src方法将本地.mp4文件加载到播放器中，并使用play方法自动播放。
在组件销毁之前，使用了beforeDestroy钩子来销毁videojs播放器，以避免内存泄漏问题。