一、安装包
npm install video.js
二、main.js引入包
import Video from 'video.js'
 import 'video.js/dist/video-js.css'Vue.prototype.$video = Video  // 在vue的原生里添加了Video这个标签,增强了vue的功能性
三、使用
<Video id="myVideo"
         class="自定义"
         controls
         style="width: 200px;height: 200px"
  :autoplay="false"
  preload="auto"
  :poster="'https://xxx.cn/upload/98693310223974433'">
  <source :src="'https://xxx.cn/mp4/85784280031668578426555.mp4'" type="video/mp4" >
</Video>

1、标签属性

<Video             autoplay: false, //自动播放:true/false
            controls: true, //是否显示底部控制栏:true/false
            width: 300, //视频播放器显示的宽度
            height: 300, //视频播放器显示的高度
 	 		loop: false, //是否循环播放:true/false
            muted: false, //设置默认播放音频:true/false
            poster:"", //视频开始播放前显示的图像的URL。这通常是一个帧的视频或自定义标题屏幕。一旦用户点击“播放”图像就会消失
            src:"", //要嵌入的视频资源url,The source URL to a video source to embed.
            techOrder: ['html5', 'flash'], //使用播放器的顺序,下面的示例说明优先使用html5播放器,如果不支持将使用flash
            notSupportedMessage: false, //是否允许重写默认的消息显示出来时,video.js无法播放媒体源
            plugins: {}, //插件
            sources: [{src: '//path/to/video.mp4', type: 'video/mp4'}] //资源文件等价于html中的形式source标签 
            aspectRatio:"1:1" //将播放器置于流体模式下,计算播放器动态大小时使用该值。
             				  //该值应该是比用冒号隔开的两个数字(如“16:9”或“4:3”)。
            fluid: false,	//是否自适应布局,播放器将会有流体体积。换句话说,它将缩放以适应容器。
            				// 如果<video>标签有“vjs-fluid”样式时,这个选项会自动设置为true。
            preload: "metadata", //建议浏览器是否在加载<video>元素时开始下载视频数据。(预加载)
					//auto:立即加载视频(如果浏览器支持它)。一些移动设备将不会预加载视频,以保护用户的带宽/数据使用率。这就是为什么这个值被称为“自动”,而不是更确凿的东西
					// metadata:只加载视频的元数据,其中包括视频的持续时间和尺寸等信息。有时,元数据会通过下载几帧视频来加载。
					//none
>

</Video>