EasyMedia转码rtsp视频流flv格式，hls格式，H5页面播放flv流视频

置顶丿乐灬学

已于 2024-07-24 23:00:39 修改

阅读量654

点赞数 7

分类专栏： JAVA JS 文章标签：音视频视频编解码 H5播放flv 海康rtsp视频流播放

于 2024-07-23 08:42:05 首次发布

本文链接：https://blog.csdn.net/qq_37880968/article/details/140624760

版权

JAVA 同时被 2 个专栏收录

52 篇文章

订阅专栏

14 篇文章

订阅专栏

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>