【Vue项目中使用videojs播放本地mp4的项目】

本文主要是介绍【Vue项目中使用videojs播放本地mp4的项目】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

以下是一个使用video.js播放本地mp4文件的Vue项目代码示例：

1. 首先，在终端中使用以下命令安装video.js和video.js插件：

npm install video.js
npm install videojs-youtube

2. 在Vue组件中，引入video.js和videojs-youtube插件：

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-youtube/dist/Youtube.js';export default {mounted() {// 创建视频播放器实例const player = videojs(this.$refs.videoPlayer, {controls: true,autoplay: false,preload: 'auto',techOrder: ['html5', 'youtube']});// 添加mp4格式视频源player.src({ type: 'video/mp4', src: 'your-local-file.mp4' });// 在组件销毁时销毁视频播放器实例this.$on('hook:beforeDestroy', () => {player.dispose();});}
};
</script><template><div><video ref="videoPlayer" class="video-js vjs-default-skin" playsinline></video></div>
</template>

3. 配置video-js.css文件，可以在public/index.html文件中添加以下代码：

<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet">

4. 现在，你可以在Vue组件中使用<video>标签来播放本地的mp4文件了：

<template><div><video ref="videoPlayer" class="video-js vjs-default-skin" playsinline></video></div>
</template><script>
import videojs from "video.js";
import "video.js/dist/video-js.css";export default {mounted() {const player = videojs(this.$refs.videoPlayer, {controls: true,autoplay: false,preload: "auto",techOrder: ["html5"],});player.src({type: "video/mp4",src: require("../../assets/video.mp4"),});this.$on("hook:beforeDestroy", () => {player.dispose();});},
};
</script>

在上述代码中，我们首先引入video.js和video-js.css文件，并在mounted生命周期钩子中创建了视频播放器实例。然后，我们通过player.src方法添加了mp4视频源，其中src属性传入的是本地mp4文件的路径。最后，在组件销毁前，通过player.dispose()方法销毁视频播放器实例。

请注意，上述代码中的require("../../assets/video.mp4")是一个示例，你需要替换成你实际项目中mp4文件的路径。

以上代码示例能够帮助你在Vue项目中使用video.js播放本地mp4文件。

这篇关于【Vue项目中使用videojs播放本地mp4的项目】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---