提示:这里兼容了rtmp数据流,但是前提需要下载支持flash插件的浏览器
@TOC
前言
上一偏我们使用vue3和vite封装了一个audio插件发布npm官网,这里我们将封装一个视频video插件并发布npm供大家参考
提示:下面不涉及新建项目和打包npm流程,需要的请看上一篇
vue3 + vite自定义封装vue+audio ,并发布到npm详情介绍
封装组件
一. 用video.js实现视频播放
- 安装video.js插件,这里我们使用的是在index.html中引入的本地css
- 在组件代码里使用
video的class "vjs-big-play-centered" 播放按钮默认在左上角,会遮挡,不过这个是可以根据参数修改的,只需要给video标签加一个class(vjs-big-play-centered)就可以居中显示了
- 定义常用video.js 配置项
- autoplay:true/false 播放器准备好之后,是否自动播放 【默认false】
- controls:true/false 是否拥有控制条 【默认true】,如果设为false, 界面上不会出现任何控制按钮,启动视频播放的唯一方法是使用autoplay 属性或通过Player API
- height: 视频容器的高度,字符串或数字(以像素为单位),比如: height: 300 或者 height: '300px'
- width: 视频容器的宽度, 字符串或数字(以像素为单位)
- loop : true/false 视频播放结束后,是否循环播放
- muted : true/false 是否静音
- poster: 播放前显示的视频画面,播放开始之后自动移除。通常传入一个URL
- language: "zh-CN"
- errorDisplay :是否显示错误提示
- fluid : 跟随外层容器变化大小,跟随的是外层宽度
- controlBar: 是否显示控制条,设为false不渲染控制条DOM元素,只设置controls为false虽然不展示,但是存在
- notSupportedMessage :允许覆盖Video.js无法播放媒体源时显示的默认信息
- techOrder:定义Video.js技术首选的顺序 ['html5', 'flash']
- plugins:放插件的地方是否支持热键
- hotkeys:过键盘按键来控制视频播放的功能
- volumeStep: 0.1 调整音量的步长
- seekStep: 5, 快进/快退的时间(秒)
- fullscreenKey:(event, player)=>{} 监听键盘按键
- preload: 预加载
- 'auto':立即开始加载视频(如果浏览器支持)。某些移动设备不会预加载视频,以保护用户的带宽/数据使用。
- 'metadata':仅加载视频的元数据,其中包括视频的持续时间和尺寸等信息。有时,元数据将通过下载几帧视频来加载。
- 'none':不要预加载任何数据。浏览器将等待用户点击“播放”开始下载。
- children: Array | Object 可选子组件 从基础的Component组件继承而来的子组件,数组中的顺序将影响组件的创建顺序
这里我们设置一个变量储存videojs使用的配置项以便后期批量使用
- 这里我们就开始初始化video,这里还做了监听error并做出处理重新加载,里面还控制了是否禁用键盘事件,播放rtmp时我把键盘和暂停/播放/快进等禁用了,这里是因为在播放rtmp直播流时这些暂停RTMP直播后,VideoJS无法播放,大家有什么好的解决办法欢迎来共商大计♡
初始化的时候插入了一个重播按钮需要初始化video,上代码
这样就可以刷新重新播放☝
- 处理rtmp 代码中需要同时支持MP4,m3u8和rtmp,所以要做一些处理
★★★★★★提示一下rtmp格式需要支持flash的浏览器
谷歌,360,火狐,qq浏览器都是不支持的
只有falsh官网的浏览器所支持
- 常用事件
- 播放 this.play()
- 停止 – video没有stop方法,可以用pause 暂停获得同样的效果
- 暂停 this.pause()
- 销毁 this.dispose()
- 监听 this.on(‘click‘,fn)
- 触发事件this.trigger(‘dispose‘)
这里我还做了一个销毁参数closeVideo传值true,做了两个销毁,第一次判断是否有重播时的渲染,第二个销毁初始化的video
video.min.js:18 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.报错是因为所加载的url不支持
- 测试地址
https://sdk-release.qnsdk.com/VID_20220207_144828.mp4rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid http://cdn3.toronto360.tv:8081/toronto360/hd/playlist.m3u8//失败测试 https://sdk-release.qnsdk.com/1080_60_5390.mp4
- 插件参数
videoSrc | video 的 url |
isautoplay | 是否自动播放,默认false,rtmp格式强制true |
posterSrc | 播放前的图片展示 |
closeVideo | 是否销毁vido ,默认false |
好啦啦啦!!!这里我们就完成了代码部分直接npm publish发布☺☺
请下载使用吧,有什么问题或者有更好的可以联系我哦,谢谢大家☺☺
npm i l-vue3-video