首页video.js播放rtmp流直播

video.js播放rtmp流直播

时间: 2023-08-12 11:14:51 浏览: 184

要使用video.js播放RTMP流直播，需要使用videojs-flash和videojs-contrib-hls这两个插件。以下是基本的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>RTMP Live Streaming with Video.js</title> <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet"> <script src="https://vjs.zencdn.net/7.14.3/video.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-flash/2.1.0/videojs-flash.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script> </head> <body> <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg" data-setup="{}"> <source src="rtmp://example.com/live/mystream" type="rtmp/mp4"> <source src="http://example.com/live/mystream/playlist.m3u8" type="application/x-mpegURL"> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p> </video> <script> var player = videojs('my-video'); player.play(); </script> </body> </html> ``` 在上面的示例中，我们使用了两个<source>标签。第一个<source>标签指定了RTMP流的源，第二个<source>标签指定了HLS流的源。如果浏览器支持HLS，则会自动切换到HLS流。如果不支持HLS，则会使用RTMP流。

阅读全文