React使用Video.js播放rtmp，hls视频

2024-04-13 00:49:32

公司最近项目需要实时播放摄像头传入的视频，支持rtmp，hls，rtsp格式视频。于是开始封装了一个简单的视视频播放器，刚开始使用的React-palyer但是React-player好像不支持rtmp，于是选择了Video.js。废话不多说上代码。

一.安装依赖

这里我们使用了5.18.4版本，为什么不用高版本，6,7版本需要安装videojs-flash，我在导入videojs-flash时webpack5总是报错，所以最后选择5.18.4版本，5.18.4版本可以直接播放rtmp格式视频文件，播放hls格式文件需要安装videojs-contrib-hls.js。

二.代码演示

1.导入依赖

2.封装组件

这里我们注意的是rtmp视频的类型与hls视频的类型是不同的，当你传入src时也要跟上类型，不管是react-player也好还是Video.js也好本质上都是对video的封装，所以在video的方法，在这里都可以使用。

如果导入videojs-contrib-hls.js是出现找不到文件的状况我们可以src目录下添加一个.d.ts文件

最后记得播放rtmp视频时需要浏览器开发flash配置，如果不打开则播放不成功。

三.运行结果

React使用Video.js播放rtmp，hls视频相关推荐

video.js播放rtmp直播源和hls直播源
看了很多网上的坑,都是无法播放的,这次自己亲测能播放注意如果是自己制作的源的话,在推流之后要先等一小会才可以播放 video.js播放rtmp源一定要注意你的Chrome浏览器允许播放flash, ...
使用video.js播放手机本地视频
一.开发背景简介项目要求调用手机本地相册的视频并在web页面上展示,但是原生的video标签并不能做到很好的兼容性,所以使用第三方库video.js调用手机本地视频并播放. 二.video.js的引 ...
video.js播放rtmp视频
最近公司要求拉取某公司流媒体服务器的视频监控,并在web端页面播放,流媒体服务器发送的是rtmp格式视频流,经过网上查资料,最后敲定使用video.js rtmp流需要依托flash播放,现在大多浏览 ...
使用video.js播放rtmp流时报错FLASH: NetStream.Play.Failed
1.选用X5版本video.js,因为X6及以上版本不支持rtmp的播放 2.指定video-js.swf文件路径 videojs.options.flash.swf = "lib/vide ...
vue+video.js播放.m3u8地址视频
使用的包 "video.js": "^7.6.6", "videojs-contrib-hls": "^5.15.0", ...
H5视频之video.js播放rtmp直播源和hls直播源
https://blog.csdn.net/qq285679784/article/details/85763086 https://blog.csdn.net/qq_27156945/article ...
结合video.js播放rtmp格式、flv格式、mp4等格式的视频
https://blog.csdn.net/weixin_39150852/article/details/109156698
m3u8.php怎么调用,怎样使用Vue结合Video.js播放m3u8视频
这次给大家带来怎样使用Vue结合Video.js播放m3u8视频,使用Vue结合Video.js播放m3u8视频的注意事项有哪些,下面就是实战案例,一起来看一下. 首先,我们需要在vue工程中安装vi ...
video标签播放m3u8格式视频-------html页面
m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频文件,然后存在服务器中(现在为了减少I/o访问次数,一般 ...

最新文章

热门文章