这篇文章主要介绍了某视频剪辑软件视频播放插件视频播放器的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
安装
npm安装vue-视频-播放器-保存
引入
可以全局引入插件，也可以在需要用到该插件的组件内单独引入（二选一)
【1】全局引用，在主页。射流研究…里面导入并引用
从"视频播放器"导入视频播放器
导入视频播放器/src/自定义主题。' CSS '
导入video.js/dist/video-js.css的
Vue.use(视频播放器)
【2】组件内引用从"视频播放器"导入{视频播放器}
导入video.js/dist/video-js.css的
导出默认值{
组件：{
放像机
}
}
使用
【1】html部分
模板
div class='demo '
视频播放器' class='视频播放器vjs-自定义皮肤'
ref='视频播放器'
:playsinline='true '
:options='playerOptions '
/视频播放器
/div
/模板
【2】js部分
导出默认值{
data() {
返回{
玩家选项：{
回放速率：[0.5,1.0,1.5,2.0],//可选的播放速度
autoplay: false，//如果为没错，浏览器准备好时开始回放。
静音：假，//默认情况下将会消除任何音频。
loop: false，//是否视频一结束就重新开始。
预加载："自动",//建议浏览器在录像加载元素后是否应该开始下载视频数据100 .汽车浏览器选择最佳行为，立即开始加载视频（如果浏览器支持)
语言：' zh-CN '，
假设："16:9",//将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例-用冒号分隔的两个数字（例如'16:9'或'4:3')
流体：真，//当真实的时，Video.js播放器将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
来源：[{
类型：'视频/mp4 '，//类型
src: '' //url地址
}],
海报： '',//封面地址
notSupportedMessage:'此视频暂无法播放，请稍后再试', //允许覆盖视频。射流研究…无法播放媒体源时显示的默认信息。
控制栏：{
timeDivider: true，//当前时间和持续时间的分隔符
durationDisplay: true，//显示持续时间
remainingTimeDisplay: false，//是否显示剩余时间功能
fullscreenToggle: true //是否显示全屏按钮
}
}
}
}
}
【3】效果图
视频格式
类型：'视频/网络'//可以播放，用ogg也可打开
类型：' video/ogg' //可以播放，用网络媒体也可打开
类型：'视频/3gp' //可以播放
类型：'视频/mp4' //可以播放
类型：' video/avi' //打不开
类型：' video/flv' //打不开
键入：' video/mkv' //打不开
类型：'视频/电影'//打不开
类型：'视频/mpg' //打不开
类型：'视频/swf' //打不开
类型：'视频/ts' //打不开
类型：' video/wmv' //打不开
类型：'视频/vob' //没转化
类型：'视频/mxf' //转化出错
类型：' video/rm' //转化出错
控制播放和暂停
这个参考文献。视频播放器。玩家。player()//播放
这个参考文献。视频播放器。玩家。pause()//暂停
这个参考文献。视频播放器。玩家。src(src)//重置进度条
回调函数
模板
div class='demo '
视频播放器' class='视频播放器vjs-自定义皮肤'
ref='视频播放器'
:playsinline='true '
:options='playerOptions '
@play='onPlayerPlay($event)'
@pause='onPlayerPause($event)'
@ ended=' onplayrended($ event)'
@ waiting=' onPlayerWaiting($ event)'
@ playing=' onPlayerPlaying($ event)'
@ loaded data=' onPlayerLoadeddata($ event)'
@ time update=' onPlayerTimeupdate($ event)'
@ can play=' onPlayerCanplay($ event)'
@ canplaythrough=' onPlayerCanplaythrough($ event)'
@ state changed=' playerStateChanged($ event)'
@ready='playerReadied '
/视频播放器
/div
/模板
脚本
导出默认值{
方法：{
//播放回调
onPlayerPlay(播放器){
console.log('播放器播放!',播放器)
},
//暂停回调
onPlayerPause(播放器){
console.log('玩家暂停!',播放器)
},
//视频播完回调
onplayrended($ event){
console.log(播放器)
},
//DOM元素上的就绪状态更改导致播放停止
onPlayerWaiting($event) {
console.log(播放器)
},
//已开始播放回调
onPlayerPlaying($event) {
console.log(播放器)
},
//当播放器在当前播放位置下载数据时触发
onPlayerLoadeddata($event) {
console.log(播放器)
},
//当前播放位置发生变化时触发。
onPlayerTimeupdate($event) {
console.log(播放器)
},
//媒体的就绪状态为拥有_未来_数据或更高
onPlayerCanplay(播放器){
//console.log('player Canplay！',播放器)
},
//媒体的就绪状态为有足够的数据或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
onplayerconplaythrough(播放器){
//控制台。日志('玩家可以玩到底！',播放器)
},
//播放状态改变回调
playerStateChanged(playerCurrentState){
console.log('播放器当前更新状态，播放器当前状态)
},
//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果准备好的事件已经发生，它将立即触发该函数。
playerReadied(player) {
console.log('示例玩家一准备就绪，玩家);
}
},
}
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。