vue：Video.js 快速整合

vue-video-player​​​​​​​组件配置：vue：vue-video-player视频播放组件Uncaught TypeError: Object(...) is not a function at Module.eval (webpack-_我的麦的博客-CSDN博客

一、安装包

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>

到这就可以播放了

参考文档：

Vue 使用 video 标签实现视频播放_酌白楼的博客-CSDN博客_vue视频标签

标签属性说明：Video.js使用教程一（详解）_lucky-peach的博客-CSDN博客_video.js 

扩展：

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>