html5 播放 rtsp 视频的实例代码
时间: 2023-07-24 09:01:22 浏览: 50
HTML5本身不支持直接播放RTSP视频流,但可以通过一些工具和技术来实现通过HTML5播放RTSP视频。以下是一个使用Video.js和FFmpeg的示例代码。
在head标签中引入Video.js库和CSS样式文件:
```html
<head>
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
</head>
```
在body标签中添加一个video标签和JavaScript代码:
```html
<body>
<video id="my-video" class="video-js vjs-default-skin" controls></video>
<script>
var player = videojs('my-video');
var url = 'rtsp://example.com/live/stream'; // 替换为实际的RTSP流地址
// 使用FFmpeg进行转码
url = 'https://example.com/ffmpeg_proxy.php?url=' + encodeURIComponent(url);
player.src({
type: 'video/rtsp',
src: url
});
player.play();
</script>
</body>
```
需要注意的是,这里使用了FFmpeg进行转码,可以通过创建一个PHP代理来实现。将以下代码保存为`ffmpeg_proxy.php`文件并上传至服务器:
```php
<?php
$streamUrl = $_GET['url'];
header("Content-type: video/mp4");
header('Content-Disposition: inline; filename="' . basename($streamUrl) . '"');
passthru("ffmpeg -i " . $streamUrl . " -c:v copy -c:a aac -f mp4 -movflags frag_keyframe+empty_moov -
");
?>
```
上述代码在服务器上使用FFmpeg将RTSP视频流转码为MP4格式,然后通过Video.js进行播放。请注意,需要在服务器上安装并配置好FFmpeg。
这只是一个基本的示例,实际应用中还需要根据具体需求进行调整和完善,比如添加错误处理、控制暂停/播放等功能。