vue2+video.js 实现视频播放_vue2video.js视频

1.安装 video.js 

npm install --save-dev video.js

npm install videojs-contrib-hls --save

2.main.js文件配置

import Video from 'video.js'

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

Vue.prototype.$video = Video //注册

3.使用

<template>

        <div class="type-video">

          <video id="myVideo" class="video-js">

            <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />

          </video>

        </div>

      </template>

  mounted(){

     this.$nextTick(() => {

        this.initVideo();

      });

  },

 methods: {

    initVideo() {

      //初始化视频方法

      let myPlayer = this.$video(myVideo, {

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

        controls: true,

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

        autoplay: "muted",

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

        preload: "auto",

        //视频播放器的显示宽度（以像素为单位）

        width: ''600px'',

        //视频播放器的显示高度（以像素为单位）

        height: "600px",

      });

    },

}        

效果图

底部按钮根据css定位

/deep/ .video-js .vjs-fullscreen-control {

  position: absolute;

  top: -550px !important;

  left: 20px;

}