当前位置: 首页 > Web前端 > HTML5

H5播放Rtmp的vue-video-player

时间:2023-04-05 11:05:36 HTML5

1.介绍我们看到HLS播放视频的实时性很差。好的时间是6-7s,差不多10-12s,就是人没了。估计视频里还能看出来,对观感效果影响很大!但是优点是它是基于http协议下载文件的,所以不需要任何插件,而且到处都能播放,到处兼容,所以web端的rtmp和hls的特点如下:HLS(1)使用http协议,兼容所有浏览器。(2)延时很大,不适合实时视频源,适合文件点播或者历史视频直播。RTMP(1)使用flash插件播放,并不兼容所有浏览器(特别是2020年12月以后,chrome将不再支持flash)(2)浏览器播放需要浏览器安全设置,点播也可能弹出上一个确认提示,交互体验差(3)更接近于传统监控的实时协议,实时性非常好,与实时视频点播基本一致。考虑到实时性,我们也可能会选择使用rtmp协议来点播我们的视频,所以在实时性方面还是要考虑使用rtmp协议的。接下来要和大家分享的是使用rtmp协议在网络上观看视频。2.vue-video-player播放rtmpvue项目使用vue-video-player底层其实用的是videojs,只是vue的一个插件。首先我们需要在vue项目中安装插件npminstallvue-video-player然后我们就可以直接在HelloWorld组件中使用播放器启用运行项目:npmrunserve如果是chrome浏览器,需要允许插件访问:允许播放后,可以看到rtmp视频。测试发现插件的vue版本有点延迟。大约3s左右。源码获取、合作、技术交流请获取以下联系方式:QQ交流群:961179337微信号:lixiang6153公众号:IT技术快餐邮箱:lixx2048@163.com