EasyMedia转码rtsp视频流flv格式,hls格式
H5页面播放flv流视频
文章最后有源码地址
解决海康视频播放视频流,先转码后自定义页面播放flv视频流
先看效果,1,EasyMedia自带的页面,这个页面二次开发改动页面比较麻烦
2,使用B站js解码,简单实现html页面播放flv视频流,页面可以自己修改
看下前端代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flv视频流播放</title><style>html,body {width: 100%;height: 100%;overflow: hidden;text-align: center;}</style>
</head><body><video id="video" autoplay controls muted></video><script src="./flv.js"></script><script>var video = document.getElementById('video');var videoSrc = 'ws://localhost:8866/live?url=rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid';if (flvjs.isSupported()) {var flvPlayer = flvjs.createPlayer({type: 'flv',url: videoSrc});flvPlayer.attachMediaElement(video);flvPlayer.load();flvPlayer.play();}</script></body></html>
页面源码放在这个目录结构doc下面了
亲测两个项目源码都可运行,都能实现H5 播放流视频,都是通过rtsp 转码后实现
源码地址
https://gitee.com/lbx_1397372495/easy-media
源码地址
https://gitee.com/lbx_1397372495/easy-media-flv