用hls.js实现一个播放rtmp直播流的html页面
时间: 2023-05-21 14:03:53 浏览: 117
可以使用以下代码实现:
```
<!DOCTYPE html>
<html>
<head>
<title>播放RTMP直播流</title>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
<video id="video" controls></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://example.com/live/stream.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
</script>
</body>
</html>
```
其中,`http://example.com/live/stream.m3u8`是RTMP直播流的地址,需要替换成实际的地址。
相关问题
video.js播放rtmp流直播
要在video.js中播放RTMP流直播,需要使用video.js的rtmp插件。以下是一些步骤:
1. 首先,需要引入video.js和rtmp插件的js和css文件。
```html
<link href="//vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.6.6/video.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
<script src="//cdn.bootcss.com/videojs-flash/2.2.1/videojs-flash.min.js"></script>
<script src="//cdn.bootcss.com/videojs-contrib-eme/4.4.2/videojs-contrib-eme.min.js"></script>
<script src="//cdn.bootcss.com/videojs-contrib-quality-levels/2.0.9/videojs-contrib-quality-levels.min.js"></script>
<script src="//cdn.bootcss.com/videojs-contrib-dash/2.10.0/videojs-contrib-dash.min.js"></script>
<script src="//cdn.bootcss.com/videojs-flash/2.2.1/videojs-flash.min.js"></script>
<script src="//cdn.bootcss.com/videojs-contrib-ads/6.6.5/videojs-contrib-ads.min.js"></script>
<script src="//cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
<script src="//cdn.bootcss.com/videojs-contrib-quality-levels/2.0.9/videojs-contrib-quality-levels.min.js"></script>
<script src="//cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
<script src="//cdn.bootcss.com/videojs-contrib-ads/6.6.5/videojs-contrib-ads.min.js"></script>
<script src="//cdn.bootcss.com/videojs-contrib-dash/2.10.0/videojs-contrib-dash.min.js"></script>
<script src="//cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
<script src="//unpkg.com/videojs-flash/dist/videojs-flash.min.js"></script>
<script src="//cdn.bootcss.com/videojs-contrib-ads/6.6.5/videojs-contrib-ads.min.js"></script>
<script src="//cdn.bootcss.com/videojs-contrib-eme/4.4.2/videojs-contrib-eme.min.js"></script>
<script src="//cdn.bootcss.com/videojs-contrib-quality-levels/2.0.9/videojs-contrib-quality-levels.min.js"></script>
<script src="//cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
```
2. 在video标签中添加data-setup属性,并在其值中定义rtmp插件。
```html
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{ "techOrder": ["flash", "html5"] }'>
<source src="rtmp://example.com/path/to/stream" type="rtmp/mp4">
</video>
```
3. 当使用rtmp流时,需要指定flash播放器的路径。
```javascript
videojs.options.flash.swf = "path/to/video-js.swf";
```
这样就可以在video.js中播放RTMP流直播了。
怎么样才能不用安装flash在网页播放rtmp直播流
您可以使用HTML5的video标签和Media Source Extensions (MSE) API来播放RTMP直播流,而不需要安装Flash。您需要使用JavaScript来实现这个功能。具体实现方法可以参考一些开源的JavaScript库,比如video.js和hls.js。