vue html视频 自动播放,Vue中引入Video.js视频播放器（简单使用）

什么是Video.js

Video.js是一个有着HTML5背景的网络视频播放器。它同时支持HTM5和Flash视频，简单来说就是HTMl5 和 Flash 视频播放器

安装

$ npm install video.js

main.js中引入

import Video from 'video.js'

import 'video.js/dist/video-js.css'

Vue.prototype.$video = Video

使用(代码中有注释说明)

id="myVideo"

class="video-js"

>

src="//vjs.zencdn.net/v/oceans.mp4"

type="video/mp4"

>

/* eslint-disable */

export default {

name: "TestTwo",

data() {

return {};

},

mounted() {

this.initVideo();

},

methods: {

initVideo() {

//初始化视频方法

let myPlayer = this.$video(myVideo, {

//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。

controls: true,

//自动播放属性,muted:静音播放

autoplay: "muted",

//建议浏览器是否应在加载元素后立即开始下载视频数据。

preload: "auto",

//设置视频播放器的显示宽度(以像素为单位)

width: "800px",

//设置视频播放器的显示高度(以像素为单位)

height: "400px"

});

}

}

};

实现效果截图

进入这个组件时，自动默认播放视频

附上Video.js官网地址:Video.js