npm安装vue-video-player——保存
可以全局引入插件,也可以在需要用到该插件的组件内单独引入(二选一)
【1】全局引用,在main.js里面导入并引用
从“vue-video-player”进口放像机
进口的vue-video-player/src/custom-theme.css '
进口的video.js/dist/video-js.css '
Vue.use(放像机)
之前
【2】组件内引用从“vue-video-player”进口{放像机}
进口的video.js/dist/video-js.css '
出口默认{
组件:{
放像机
}
}
之前
使用
【1】html部分,
& lt; template>
& lt; div类=把菔尽北?
& lt;视频播放器类="视频播放器vjs-custom-skin”
ref="放像机"
:playsinline=" true "
:选项=皃layerOptions”比;
& lt;/video-player>
& lt;/div>
& lt;/template>
【2】js部分,,,
出口默认{
数据(){
返回{
playerOptions: {
playbackRates:(0.5, 1.0, 1.5, 2.0),//可选的播放速度
播放:假的,//如果为真的,浏览器准备好时开始回放。
低调:假的,//默认情况下将会消除任何音频。
循环:假的,//是否视频一结束就重新开始。
预加载:'汽车',//建议浏览器在& lt; video>加载元素后是否应该开始下载视频数据翻浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
语言:“应用”,
aspectRatio: 16:9的,//将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例——用冒号分隔的两个数字(例如“16:9的”或“4:3”)
液体:真的,//当真实时,视频。js球员将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
来源:[{
类型:“视频/mp4//类型
src://url地址
}]，
海报:“,//封面地址
notSupportedMessage:“此视频暂无法播放,请稍后再试”,//允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider:真的,//当前时间和持续时间的分隔符
durationDisplay:真的,//显示持续时间
remainingTimeDisplay:假的,//是否显示剩余时间功能
fullscreenToggle:真//是否显示全屏按钮
}
}
}
}
}
之前
【3】效果图& # 8203;
<>强视频格式
类型:“视频/webm”//可以播放,用ogg也可打开
类型:“视频/ogg”//可以播放,用webm也可打开
类型:“视频/3 gp//可以播放
类型:“视频/mp4//可以播放
类型:“视频/avi//打不开
类型:“视频/flv//打不开
类型:“视频/mkv”//打不开
类型:“视频/mov”//打不开
类型:“视频每加仑/英里”//打不开
类型:“视频/swf//打不开
类型:“视频/ts//打不开
类型:“视频/wmv//打不开
类型:“视频/vob”//没转化
类型:“视频/mxf”//转化出的错
类型:“视频/rm//转化出错
<>强控制播放和暂停
这个。$ refs.videoPlayer.player.play()//播放
这个。$ refs.videoPlayer.player.pause()//暂停
美元。refs.videoPlayer.player.src (src)//重置进度条
<强>回调函数
& lt; template>
& lt; div类=把菔尽北?
& lt;视频播放器类="视频播放器vjs-custom-skin”
ref="放像机"
:playsinline=" true "
:选项=" playerOptions”
@play=" onPlayerPlay(事件)”
@pause=" onPlayerPause(事件)”
@ended=" onPlayerEnded(事件)”
@waiting=" onPlayerWaiting(事件)”
@playing=" onPlayerPlaying(事件)”
@loadeddata=" https://www.yisu.com/zixun/onPlayerLoadeddata(事件)”
@timeupdate=" onPlayerTimeupdate(事件)”
@canplay=" onPlayerCanplay(事件)”
@canplaythrough=" onPlayerCanplaythrough(事件)”
@statechanged=" playerStateChanged(事件)”
@ready=" playerReadied "
比;
& lt;/video-player>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
方法:{//播放回调
onPlayerPlay(球员){
控制台。日志(“玩家玩!”,播放器)
},//暂停回调
onPlayerPause(球员){
控制台。日志(“玩家暂停!”,播放器)
},//视频播完回调
onPlayerEnded(事件){
console.log(球员)
},//DOM元素上的readyState更改导致播放停止
onPlayerWaiting(事件){
console.log(球员)
},//已开始播放回调
onPlayerPlaying(事件){
console.log(球员)
},//当播放器在当前播放位置下载数据时触发
onPlayerLoadeddata(事件){
console.log(球员)
},//当前播放位置发生变化时触发。
onPlayerTimeupdate(事件){
console.log(球员)
},//媒体的readyState为HAVE_FUTURE_DATA或更高
onPlayerCanplay(球员){//控制台。日志(“球员Canplay !”,播放器)
},//媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
onPlayerCanplaythrough(球员){//控制台。日志(“球员Canplaythrough !”,播放器)
},//播放状态改变回调
playerStateChanged (playerCurrentState) {
控制台。日志(玩家当前更新状态,playerCurrentState)
},//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于,如果准备事件已经发生,它将立即触发该函数. .
playerReadied(球员){
控制台。日志(示例球员1已经准备好,球员);
}
},
}
& lt;/script>
