vue video player,vue-video-player支持哪些视频格式
在开发期间使用过video.js、mui播放器等插件，发现这些录像插件对移动端的兼容性都不友好，最后发现一个在移动端兼容不错的插件视频播放器，下面通过场景分析给大家介绍使用视频播放器实现直播的方法，感兴趣的朋友一起看看吧
目录
一、安装视频播放器二、使用视频播放器课前准备：直播流协议https://www.cnblogs.com/yangchin9/p/14930874.html
摘要：在H5页面实现观看直播视频回放；在开发期间使用过video.js、mui播放器等插件，发现这些录像插件对移动端的兼容性都不友好，最后发现一个在移动端兼容不错的插件—— vue-视频播放器
场景：
移动端H5页面，项目是某视频剪辑软件搭建的，使用的是流媒体协议以m3u8结尾的直播流
一、安装vue-video-player
播放流媒体视频流需要安装视频-贡献-hls插件，播放RTMP视频流则安装videojs-flash插件，hls插件与闪光插件同时使用时闪光插件需要在流媒体插件之前引入；（资料上讲安装视频播放器时会自动安装流媒体插件，实际操作中并没有，还是自己手动安装吧！)
安装方式1:
加拿大方式，直接在超文本标记语言文件头部引入文件：
link rel=样式表 href= path/to/video。js/dist/video-js。CSS /
脚本类型= text/JavaScript src= path/to/video。量滴js /脚本
脚本类型= text/JavaScript src= path/to/vue。量滴js /脚本
脚本类型= text/JavaScript src= path/to/dist/vue-video-player。js
/脚本
脚本类型= text/JavaScript vue。使用(窗口VueVideoPlayer)
/脚本
安装方式2:
点击查看代码
网络管理协议安装插件：
新公共管理安装vue-视频-播放器-保存
新公共管理安装videojs-contrib-hls -保存
主页。射流研究…中引入基础样式文件：
//引入放像机样式
导入video.js/dist/video-js.css的
按需引入：
导入 videojs-contrib-hls
从"视频播放器"导入{视频播放器}
组件：{
放像机
},
全局引入：
从“vue”导入某视频剪辑软件
从"视频播放器"导入VueVideoPlayer
//自定义样式引入，在视频播放器添加对应类名，例如视频播放器-自定义
//导入视频播放器/src/自定义主题。 CSS
Vue.use(VueVideoPlayer，/* {
选项：全局默认配置，
事件：全局视频事件
}*/)
二、使用 vue-video-player
模板
！-游戏在线：设置播放器在移动设备上不全屏[布尔值，默认值：false ] -
！-客户事件名称：自定义状态变更时的事件名[字符串，默认值： statechanged ] -
视频播放器
视频播放器-自定义
ref=视频播放器
:options=playerOptions
:playsinline=true
自定义事件名称= customstatechangedeventname
@play=onPlayerPlay
@pause=onPlayerPause
@ended=onPlayerEnded
@ready=playerReadied
@ state changed= playerStateChanged
@playing=onPlayerPlaying
@waiting=onPlayerWaiting
@ loaded data= onPlayerLoadeddata
@timeupdate=timeupdate
@canplay=onPlayerCanplay
@ canplaythrough= onPlayerCanplaythrough
/视频播放器
/模板
脚本
导入 videojs-contrib-hls
从"视频播放器"导入{视频播放器}
导出默认值{
组件：{
放像机
},
data() {
返回{
玩家选项：{
//是否静音
静音：真，
//默认为英语，设置为中文
语言： zh-CN ，
//播放速度，指定后视频。射流研究…将显示一个控件(vjs-回放速率类的控件),允许用户选择播放速度
回放速率：[0.5,1.0,1.5,2.0],
//将播放器置于流畅模式，并在计算播放器的动态大小时使用该值，表示长宽比例
比例："4:3",
//兼容顺序，默认值是[html5]，其他已注册的技术将按其注册的顺序在该技术之后添加。
techOrder: [html5]，
//等同于原生录像标签中的一组来源子标签，可实现优雅降级；类型属性规定媒体资源的哑剧类型
来源：[
//{
//类型：视频/mp4 ，
//src:" "
//},
//{
//类型： rtmp/flv ，
//src:" "
//},
{
类型：应用程序/x-mpegURL ，
src: https://直播。cgtn。com/1000/Prog _ index。m3 u8
},
],
//视频封面
海报：要求(。/icon/cover.jpg )，
}
}
},
计算值：{
//插件节点用于添加自定义按钮事件
玩家(){
归还这个视频播放器
}
},
已安装(){},
方法：{
//播放回调
onPlayerPlay(播放器){
},
//暂停回调
onPlayerPause(播放器){
//console.log(播放器)
},
//视频播放结束回调
onPlayerEnded(player) {
//console.log(播放器)
},
//DOM元素上的状态值更改导致播放停止
onPlayerWaiting(播放器){
//console.log(播放器)
},
//已开始播放回调
在线播放播放(播放器){
//console.log(播放器)
},
//当播放器在当前播放位置下载数据时触发
onPlayerLoadeddata($event) {
//console.log($event)
},
//当前播放位置发生变化时触发。
onPlayerTimeupdate($event) {
//console.log($event)
},
//媒体的状态值为拥有_未来_数据或更高
onPlayerCanplay($event) {
//console.log($event)
},
//媒体的状态值为有足够的数据或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
onplayerconplaythrough($ event){
//console.log($event)
},
//播放状态改变回调
playerStateChanged($event) {
//console.log($event)
},
//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果准备好的事件已经发生，它将立即触发该函数。
playerReadied($event) {
//console.log($event)
},
}
}
/脚本
样式lang=scss 范围。视频播放器-自定义{
宽度：100%;
高度：180像素
//vidoeUI重写
/深/。视频-js{
宽度：100%;
身高：100%;
填充：0;
溢出：隐藏；
//播放器。vjs-技术
对象适合：封面；
}
//播放按钮。vjs-大播放按钮{
位置：绝对；
top:50%；
左：50%;
宽度：2em
身高：2em
边距-顶部：-1em；
左边距：-1em；
字体大小：2em
行高：2em
边界半径：50%;
背景色：rgba(0，0，0，0.45)；
大纲：无；
}
//封面。vjs-海报{
宽度：100%;
身高：100%;
背景-尺寸：封面；
}
}
}
/风格
到此这篇关于使用视频播放器实现直播的文章就介绍到这了，更多相关视频播放器直播内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。