video.js播放rtmp直播源和hls直播源

看了很多网上的坑，都是无法播放的，这次自己亲测能播放
注意如果是自己制作的源的话，在推流之后要先等一小会才可以播放

video.js播放rtmp源

一定要注意你的Chrome浏览器允许播放flash，因为rtmp是基于flash的，设置可以从百度查询如何设置chrome浏览器允许播放flash
要放在服务器下，打开此html页面才可以播放，最简单就是自己搭个本地服务器进行
自己测试的时候，把source的src修改成自己的源就好了
type是 rtmp/flv

<!DOCTYPE html>
<html lang="en" dir="ltr"><head><meta charset="utf-8"><title>video.js</title><link href="https://unpkg.com/video.js@6.11.0/dist/video-js.min.css" rel="stylesheet"><script src="https://unpkg.com/video.js@6.11.0/dist/video.min.js"></script><script src="https://unpkg.com/videojs-flash/dist/videojs-flash.js"></script><script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script></head><body><video id="my-player" class="video-js" controls><source src="rtmp://localhost:1935/myapp/pc" type="rtmp/flv"><p class="vjs-no-js">not support</p></video><script type="text/javascript">var player = videojs('my-player',{width:400,heigh:200});</script></body>
</html>

video.js播放hls源

这个不一定要放在服务器上，如果直接打开不可以的话，也可以放在服务器上测试一下
type是 application/x-mpegURL

<!DOCTYPE html>
<html lang="en" dir="ltr"><head><meta charset="utf-8"><title>video.js</title><link href="https://unpkg.com/video.js@6.11.0/dist/video-js.min.css" rel="stylesheet"><script src="https://unpkg.com/video.js@6.11.0/dist/video.min.js"></script><script src="https://unpkg.com/videojs-flash/dist/videojs-flash.js"></script><script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script></head><body><video id="my-player" class="video-js" controls><source src="http://localhost:8765/hls/movie.m3u8" type="application/x-mpegURL"><p class="vjs-no-js">not support</p></video><script type="text/javascript">var player = videojs('my-player',{width:400,heigh:200});</script></body>
</html>

至于怎么制作源可以参考我的另外的博客
https://blog.csdn.net/qq_40816360/article/details/84037877

video.js播放rtmp直播源和hls直播源相关推荐

React使用Video.js播放rtmp，hls视频
公司最近项目需要实时播放摄像头传入的视频,支持rtmp,hls,rtsp格式视频.于是开始封装了一个简单的视视频播放器,刚开始使用的React-palyer但是React-player好像不支持rtm ...
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 ...
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
Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
video.js 播放流媒体
video.js 播放流媒体新人博主请多关照,若有侵权,联系改正.谢谢参考博客地址:https://www.cnblogs.com/FHC1994/p/9981440.html https:/ ...
m3u8.php怎么调用,怎样使用Vue结合Video.js播放m3u8视频
这次给大家带来怎样使用Vue结合Video.js播放m3u8视频,使用Vue结合Video.js播放m3u8视频的注意事项有哪些,下面就是实战案例,一起来看一下. 首先,我们需要在vue工程中安装vi ...
vue中使用video.js 播放m3u8直播流
需求描述支持播放m3u8直播流 + 录屏视频:同时可以动态更改视频直播地址,新增,删除视频. 实现效果实现代码安装依赖 npm install video.js --save // 视频播放器 ...

video.js播放rtmp直播源和hls直播源

video.js播放rtmp直播源和hls直播源相关推荐

最新文章

热门文章