vue如何使用video,vue-player-video
这篇文章主要介绍了基于某视频剪辑软件的录像播放器的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
当现有录像播放器不能满足需求时，需要自己对录像进行封装。
video事件
负载启动：在视频开始加载时触发，给当前时间赋值（历史播放记录或0)。
工期变化：元信息已载入或已改变，视频的长度发生了改变。获取到视频长度（时长，并给当前时间赋值（历史播放记录或0))。
播放：在视频开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始)。
暂停：播放暂停时触发。
时间更新：当前时间改变，更新播放进度。处理播放进度条
搜索：指定播放位置
等待：缓冲
结束时间：播放结束，重置状态
WeixinJSBridgeReady:在微信中使用视频，需要监听威信桥梁准备事件，在回调函数里执行播放()命令。
直播协议
超文本传送协议实时流由苹果提出的直播流协议100 .IOS和高版本机器人都支持HLS。流媒体主要由。m3u8和。分时（同分时)两种播放文件100 .流媒体具有高兼容性，高可扩展性，但会直播延时100 .流媒体协议是将直播流分成一段一段的小段视频去下载播放的，所以假设列表里面的包含5个分时（同分时)文件，每个分时（同分时)文件包含5秒的视频内容，那么整体的延迟就是25秒。
RTMP(实时信息协议)是宏媒体开发的一套视频直播协议，现在属于土坯。RTMP基于闪光无法在IOS的浏览器里播放，但是实时性比流媒体要好。
HTTP-FLV针对于猫白血病病毒视频格式做的直播分发流，延时低。但移动端不支持。
结论：HTTP-FLV延时低，优先使用。若设备不支持HTTP-FLV使用flv.js。若设备不支持flv.js，则使用HLS，但流媒体延迟大。
封装video
/** HTML **/
div class=视频
！视频播放器
录像
视频_ _播放器
ref=视频播放器
预载=自动
:autoplay=options.autoplay
:muted=options.muted
webkit-playsinline=true
playsinline=true
x-webkit-airplay=允许
x5-video-player-type=h5-page
X5-video-orientation= portraint
style= object-fit:cover；
来源：src=options.src /
/视频
！-视频海报-
差异
v-show=showPoster
视频_海报
:style= { background-image : URL(选项。pic ) }
/div
！-视频加载-
div v-show= show Loading class= video _ _ Loading
span class= video _ _ Loading-icon /span
/div
！-视频暂停-
div @ click=处理视频播放 class= video _ _ pause
span v-show=！视频播放 class= video _ _ pause-icon /span
/div
/div
/** js**/
道具：{
选项：{
类型：对象，
默认值：()={}
}
},
data() {
返回{
videoPlay: false，//是否正在播放
videoEnd: false，//是否播放结束
showPoster: true，//是否显示视屏封面
showLoading: false，//加载中
当前时间：0,//当前播放位置
当前视频：{
持续时间：this.options .持续时间
},
}
},
已安装(){
这. videoPlayer=这.$ refs.videoPlayer
这个。视频播放器。当前时间=0；
这个。视频播放器。addevent侦听器( loadstart ，e={
这个。视频播放器。当前时间=(这个。选项。播放过程0)？这个。选项。播放过程：0；
});
//获取到视频长度
这个。视频播放器。addevent侦听器(持续时间更改，e={
这个。当前视频。时长=这个。视频播放器。持续时间；
//存在播放历史记录
这个。视频播放器。当前时间=(这个。选项。播放过程0)？这个。选项。播放过程：0；
});
这个。视频播放器。addevent侦听器( playing ，e={
this.showPoster=false
this.videoPlay=true
this.showLoading=false
this.videoEnd=false
});
//暂停
这个。视频播放器。addevent侦听器( pause ，()={
this.videoPlay=false
如果(这个。视频播放器。当前时间0.1){
this.showPoster=true
}
this.showLoading=false
});
//播放进度更新
这个。视频播放器。addevent侦听器(时间更新，e={
这个。当前时间=这个。视频播放器。当前时间；
},
错误的
);
//指定播放位置
这个。视频播放器。addevent侦听器( seeked ，e={
});
//缓冲
这个。视频播放器。addevent侦听器( waiting ，e={
this.showLoading=true
});
//播放结束
这个。视频播放器。addevent侦听器( ended ，e={
//重置状态
this.videoPlay=false
this.showPoster=true
this.videoEnd=true
这个。当前时间=这个。当前视频。持续时间；
});
//监听威信桥梁准备事件，处理微信不能自动播放。但并不全部适用，加了暂停按钮，手动播放。
文档。addevent侦听器( weixinsbridgeready ，()={
这个。视频播放器。play()；
},假);
},
方法：{
handleVideoPlay() {
if (this.videoPlayer.paused) { //播放
if(this.videoEnd) { //重播
这个。当前时间=0；
这个。视频播放器。当前时间=0；
}
这个。视频播放器。play()；
this.videoPlay=true
} else { //暂停
这个。视频播放器。pause()；
this.videoPlay=false
}
}
}
[参考文章]:
X5内核视频两种播放形态
H5直播录像标签坑汇总
H5直播入门（理论篇)
全面进阶H5直播
到此这篇关于基于某视频剪辑软件的录像播放器的实现示例的文章就介绍到这了，更多相关某视频剪辑软件视频播放器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。