微客导航 » 文章资讯 » vue视频播放插件vue-video-player的具体使用方法

vue视频播放插件vue-video-player的具体使用方法

2023-08-09 16:53:05 278

安装

npminstallvue-video-player--save

引入

可以全局引入插件，也可以在需要用到该插件的组件内单独引入（二选一）

【1】全局引用，在main.js里面导入并引用

importVideoPlayerfrom'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'

exportdefault{
components:{
videoPlayer
}
}

使用

【1】html部分

【2】js部分

exportdefault{
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)//重置进度条

回调函数

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue视频播放插件vue-video-player的具体使用方法

热门推荐

随机推荐