Vue集成Video.js实现视频播放功能详解

作者：青山有信时间：2026-10-23 09:42:54浏览：73

本文介绍如何在Vue项目中集成Video.js播放器。通过npm安装依赖，在main.js中全局引入组件及样式，并在模板中使用video标签配置播放参数。支持本地与网络视频，可通过CSS控制尺寸，实现简洁的视频播放功能。

Video.js简介与安装

关于Video.js

Video.js是一款基于HTML5背景的网络视频播放器，它不仅支持HTML5标准，还兼容Flash视频播放，能够加载本地静态资源视频以及网络链接视频。

官方网站地址为：videojs.com/

安装步骤

npm install video.js

Vue集成配置

在项目的main.js文件中进行引入配置。


import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

代码实现与样式控制

具体使用方法如下。


<div class="demo1-video">  
 <video id="myVideo"    
   class="video-js vjs-default-skin vjs-big-play-centered" 
   controls  //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
   autoplay: "muted", // //自动播放属性,muted:静音播放
   preload="auto"  //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
   poster="../assets/img/E0531.jpg">   //设置视频封面    <source src="../assets/video/E0531.mp4" type="video/mp4" >  //视频地址
  </video>   
 </div>

可以通过CSS样式直接控制Video.js播放器的宽高尺寸。

最终实现的播放效果截图如下所示。

Video.js简介与安装