Vue2视频播放组件（Video）

Vue3视频播放组件

可自定义设置以下属性：  

• 视频文件url（videoUrl），必传，支持网络地址https和相对地址require('...')

• 视频封面url（videoCover），默认为null，支持网络地址https和相对地址require('...')

• 视频播放器宽度（width），默认为800px

• 视频播放器高度（height），默认为450px

• 视频就绪后是否马上播放（autoplay），默认为false

• 是否向用户显示控件，比如是否向用户显示控件，比如进度条，全屏等（controls），默认为true

• 视频播放完成后，是否循环播放（loop），默认为false

• 是否静音（muted），默认为false

• 是否在页面加载后载入视频（preload）如果设置了autoplay属性，则preload将被忽略，默认为auto // auto:一旦页面加载，则开始加载视频; metadata:当页面加载后仅加载视频的元数据 none:页面加载后不应加载视频

• 播放暂停时是否显示播放器中间的暂停图标（showPlay），默认为false

• 中间播放暂停按钮的边长（playWidth），默认为96px

• video的poster默认图片和视频内容的缩放规则（zoom），默认为'none' // none:(默认)保存原有内容，不进行缩放; fill:不保持原有比例，内容拉伸填充整个内容容器; contain:保存原有比例，内容以包含方式缩放; cover:保存原有比例，内容以覆盖方式缩放

效果如下图：

①创建视频播放组件VideoPlay.vue： 

②在要使用的页面引入：

import VideoPlay from '@/components/VideoPlay'
components: {
    VideoPlay
},
data () {
	return {
        // 视频链接支持https或require本地地址
		videoUrl: https 或者 require('@/assets/files/Bao.mp4'),
        // 视频封面支持https或require本地地址
		videoCover: https 或者 require('@/assets/images/Bao.jpg')
	}
}