video.js加videojs-rtsp播放rtsp视频流,并给出示例代码
时间: 2024-04-29 17:12:55 浏览: 523
流媒体rtsp播放实例
4星 · 用户满意度95%
要在网页上播放RTSP视频流,可以使用video.js和videojs-rtsp插件。下面是一个简单的示例代码:
首先,需要引入video.js和videojs-rtsp插件的javascript文件:
```html
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-rtsp/dist/videojs-rtsp.min.js"></script>
```
然后,在页面中添加一个video标签:
```html
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
<source src="" type="video/rtsp" />
</video>
```
注意,source标签的type属性应该设置为“video/rtsp”。
最后,在javascript中初始化video.js和videojs-rtsp插件:
```javascript
var player = videojs('my-video', {
techOrder: ['html5', 'rtsp']
});
player.src({
src: 'rtsp://example.com/stream',
type: 'video/rtsp'
});
player.play();
```
其中,src的src属性指定了RTSP视频流的URL,type属性依然是“video/rtsp”。
这样就可以在网页上播放RTSP视频流了。当然,需要注意的是,由于RTSP是一种比较老旧的视频流协议,所以有些浏览器可能不支持它。在测试时,可以使用Chrome浏览器,并在地址栏中输入chrome://flags/#allow-insecure-localhost,将“Allow invalid certificates for resources loaded from localhost.”设置为Enabled,以允许加载本地的RTSP视频流。
阅读全文