安装依赖 npm install vue-video-player -S

main.js中引入配置

import VideoPlayer from 'vue-video-player'

require('video.js/dist/video-js.css')

require('vue-video-player/src/custom-theme.css')

Vue.use(VideoPlayer)

html部分

class="video-player vjs-custom-skin"

ref="videoPlayer"

:playsinline="true"

:options="playerOptions"

@play="onPlayerPlay($event)"

@pause="onPlayerPause($event)"

@ended="onPlayerEnded($event)"

@loadeddata="onPlayerLoadeddata($event)"

@waiting="onPlayerWaiting($event)"

@playing="onPlayerPlaying($event)"

@timeupdate="onPlayerTimeupdate($event)"

@canplay="onPlayerCanplay($event)"

@canplaythrough="onPlayerCanplaythrough($event)"

@ready="playerReadied"

@statechanged="playerStateChanged($event)"

>

配置部分

playerOptions : {

playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度

autoplay: false, // 如果true,浏览器准备好时开始回放。

muted: false, // 默认情况下将会消除任何音频。

loop: false, // 导致视频一结束就重新开始。

preload: 'auto', // 建议浏览器在加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)

language: 'zh-CN',

aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")

fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。

sources: [{

type: "",

src: "", //url地址

}],

poster: "../../static/images/test.jpg", // 你的封面地址

// width: document.documentElement.clientWidth,

notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。

controlBar: {

timeDivider: true,

durationDisplay: true,

remainingTimeDisplay: false,

fullscreenToggle: true, // 全屏按钮

}

}

设置视频URL方法

setVideoUrl() {

this.playerOptions['sources'][0]['src'] = '接口地址';

}

部分回调方法

//监听播放状态改变

playerStateChanged(player) {

localStorage.setItem('playlog', JSON.stringify(player.cache_.currentTime));

},

//监听媒体是否已到达结尾，播放完

//DOM元素上的readyState更改导致播放停止。

onPlayerWaiting(player) {

},

//媒体不再被禁止播放，并且已开始播放。

onPlayerPlaying(player) {

},

//当播放器在当前播放位置下载数据时触发

onPlayerLoadeddata(player) {

// console.log(player);

},

//当前播放位置发生变化时触发。

onPlayerTimeupdate(player) {

localStorage.setItem('playlog', JSON.stringify(player.cache_.currentTime));

},

//媒体的readyState为HAVE_FUTURE_DATA或更高

onPlayerCanplay(player) {

// console.log('player Canplay!', player)

},

//媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。

onPlayerCanplaythrough(player) {

// console.log('player Canplaythrough!', player)

},

//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。

playerReadied(player) {

// seek to 10s

// console.log('example player 1 readied', player);

player.currentTime(JSON.parse(localStorage.getItem('playlog')))

// player.currentTime(0)

// console.log('example 01: the player is readied', player)

},

//播放事件

onPlayerPlay(player) {

this.paused = false

// console.log('onPlayerPlay!', player)

},

//暂停事件

onPlayerPause(player) {

this.paused = true

// console.log('onPlayerPause!', player)

},

//停止事件

onPlayerEnded(player) {

this.paused = false

console.log('player ended!', player)

}

css部分设置播放按钮的形状与位置

.video-js .vjs-big-play-button{}