vue html视频 自动播放,Vue示例之使用视频播放

简介

最近接手新项目，从后端变前端，有一点前端基础但是对于Vue一无所知。

一切从零开始，此次需求是项目中有一个视频播放功能。以下做一个简单示例共大家参考。

视频插件

使用的插件是 vue-vedio-player

安装插件

输入如下命令

npm install vue-video-player -s

或者

npm install vue-video-player --save

引用

在main.js里面导入并引用

import VideoPlayer from 'vue-video-player'

import 'vue-video-player/src/custom-theme.css'

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

Vue.use(VideoPlayer)

html标签页面部分

ref="videoPlayer"

:playsinline="true"

:options="playerOptions">

JS部分

export default {

data() {

return {

playerOptions: {

//播放速度

playbackRates: [0.5, 1.0, 1.5, 2.0],

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

<