rtmp如何用video标签进行播放
时间: 2023-11-23 21:44:39 浏览: 179
通过videojs播放rtmp流
要在网页上使用 `video` 标签播放 RTMP 流,需要使用一些 JavaScript 库和插件来实现。以下是两种实现方法:
1. 使用 Video.js
Video.js 是一个流行的 HTML5 视频播放器,它支持 RTMP 流。你可以使用其 `videojs-flash` 插件来播放 RTMP 流。首先,需要通过 CDN 引入 Video.js 和 Flash 播放器:
```html
<link href="//vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.11.4/video.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/videojs-flash/2.1.0/videojs-flash.min.js"></script>
```
然后,在页面上添加 `video` 标签,并使用 `videojs()` 方法初始化 Video.js 播放器,并设置 `techOrder` 为 `['flash']`以使用 Flash 播放器:
```html
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
<source src="rtmp://example.com/live/stream" type="rtmp/mp4">
</video>
<script>
var player = videojs('my-video', {
techOrder: ['flash']
});
</script>
```
2. 使用 JW Player
JW Player 也是一个流行的 HTML5 视频播放器,它也支持 RTMP 流。你需要购买 JW Player 许可证,并在页面上引入 JW Player 库和 Flash 播放器:
```html
<link href="//cdn.jwplayer.com/lib/8.17.1/jwplayer.css" rel="stylesheet">
<script src="//cdn.jwplayer.com/lib/8.17.1/jwplayer.js"></script>
<script src="//cdn.jwplayer.com/lib/8.17.1/jwplayer.flash.swf"></script>
```
然后,在页面上添加 `div` 标签并设置 `id`:
```html
<div id="my-video"></div>
```
初始化 JW Player 并使用 `rtmp` 协议播放 RTMP 流:
```javascript
jwplayer("my-video").setup({
file: "rtmp://example.com/live/stream",
type: "rtmp/mp4",
primary: "flash"
});
```
以上是两种比较常用的方法,当然也可以使用其他的库和插件来实现。
阅读全文