安装
npm install vue-video-player --save
引入
可以全局引入插件,也可以在需要用到该插件的组件内单独引入(二选一)
【1】全局引用, 在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)
【2】组件内引用import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css' export default { components: { videoPlayer } }
使用
【1】html部分
【2】js部分
export default { data() { return { playerOptions: { playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度 autoplay: false, // 如果为true,浏览器准备好时开始回放。 muted: false, // 默认情况下将会消除任何音频。 loop: false, // 是否视频一结束就重新开始。 preload: 'auto', // 建议浏览器在
【3】效果图​
视频格式
type:"video/webm" // 可以播放,用ogg也可打开 type:"video/ogg" // 可以播放,用webm也可打开 type:"video/3gp" // 可以播放 type:"video/mp4" // 可以播放 type:"video/avi" // 打不开 type:"video/flv" // 打不开 type:"video/mkv" // 打不开 type:"video/mov" // 打不开 type:"video/mpg" // 打不开 type:"video/swf" // 打不开 type:"video/ts" // 打不开 type:"video/wmv" // 打不开 type:"video/vob" // 没转化 type:"video/mxf" // 转化出错 type: "video/rm" // 转化出错
控制播放和暂停
this.$refs.videoPlayer.player.play() // 播放 this.$refs.videoPlayer.player.pause() // 暂停 this.$refs.videoPlayer.player.src(src) // 重置进度条
回调函数
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。