使用video.js库播放rtmp视频流

最新推荐文章于 2024-08-20 22:59:20 发布

一望损莓苔

最新推荐文章于 2024-08-20 22:59:20 发布

阅读量1w

点赞数 1

分类专栏：前端

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

转载地址：https://blog.csdn.net/u013654125/article/details/78813501

参考：https://www.cnblogs.com/ShaYeBlog/p/7068188.html

在h5页面里播放rtmp流，需要一个viode.js库的支持。当前video.js库已经出到了6.x版本。但是6.x版本播放不了rtmp流。所以示例中只用了5.5.3版本的库。

<!DOCTYPE HTML>
<html>  
  <head>  
  <title>视频直播</title>  
  <meta charset="utf-8">  
  <link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">  
  <!-- If you'd like to support IE8 -->  
  <script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>  
</head>  
<body>  
  <h1>直播测试</h1>  
 <video id="my-video" class="video-js" controls preload="auto" width="640" height="300"  
 poster="" data-setup="{}">  
    <source src="rtmp://10.168.4.37:10935/hls/stream_1" type="rtmp/flv">  
    <p class="vjs-no-js">播放视频需要启用 JavaScript，推荐使用支持HTML5的浏览器访问。  
      To view this video please enable JavaScript, and consider upgrading to a web browser that  
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>  
    </p>  
 </video>  
 <script src="http://vjs.zencdn.net/5.5.3/video.js"></script>  
</body>  
</html>

把source中的地址换成自己的地址测试可用。