Web端rtmp视频流的预览

梳碧湖的砍柴人灬

已于 2022-11-16 14:35:35 修改

阅读量1.3k

点赞数 1

文章标签：前端 javascript

于 2022-10-11 14:30:50 首次发布

本文链接：https://blog.csdn.net/qq_28838647/article/details/127262611

版权

两种方案：

方案1：基于video.min@5.4.3.js

下载地址：http://www.jq22.com//jquery/Video5.zip

代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>videojs-rtmp demo</title>
	</head>
    <!-- 引入js -->
	<script type="text/javascript" src="./js/video.min@5.4.3.js"></script>

<style>
	
</style>
	<body>
		<video id="myVideo" autoplay controls ></video>
	</body>
</html>
<script>
	let player = videojs('myVideo', {
		sources: [{
			type: "rtmp/flv",
			src: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp'
		}],
		height: 500,
		width: 1000,
	});

	//如遇视频大小显示异常，加以下代码，可适当调整延迟时间
	player .on("play", function() {
		setTimeout(function(){
			let dom = document.getElementById('myVideo_Flash_api')
			dom.style.height = "500px"
			dom.style.width = "1002px"
		},300)
		
	});

    //注：生成的多余的样式，可自行隐藏或移除
</script>

方案2：基于Aliplayer

文档地址：在线体验及Demo源码

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge" >
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <title>Aliplayer Online Settings</title>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.12.1/skins/default/aliplayer-min.css" />
    <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.12.1/aliplayer-min.js"></script>
</head>
<body>
<div class="prism-player" id="player-con"></div>
<script>
    var player = new Aliplayer({
            "id": "player-con",
            "source": "rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp",
            "width": "100%",
            "height": "500px",
            "autoplay": true,
            "isLive": false,
            "rePlay": true,
            "playsinline": true,
            "isVBR": true,
            "preload": true,
            "controlBarVisibility": "hover",
            "useH5Prism": true
        }, function (player) {
            console.log("The player is created");
        }
    );
</script>
</body>