浏览器播放rtmp

rtmp播放文章目录rtmp播放1、rtmp测试路径地址2、video.js播放rtmp3、ezuikit播放rtmp1、rtmp测试路径地址https://www.cnblogs.com/yeminglong/p/14704789.html2、video.js播放rtmp注意：1.如果写在html本地运行，请使用http-server启动，npm install http-server -g2.

恶鬼wsd

6892人浏览 · 2021-07-14 11:42:19

恶鬼wsd · 2021-07-14 11:42:19 发布

rtmp播放

文章目录

rtmp播放
1、rtmp测试路径地址
2、video.js播放rtmp
3、ezuikit播放rtmp

1、rtmp测试路径地址

https://www.cnblogs.com/yeminglong/p/14704789.html

2、video.js播放rtmp

注意：
1.如果写在html本地运行，请使用http-server启动，安装:npm install http-server -g ,启动:
http-server -r-1
2.video.js要使用5.X版本
3.需要开启网页flash
4.如果视频转的久，不要慌多等等
5.资源下载地址:
video-js.swf:https://github.com/videojs/video-js-swf/tree/master/dist
video-js:http://vjs.zencdn.net/5.3.0/video.min.js
video.css:http://vjs.zencdn.net/5.3.0/video-js.min.css

<!DOCTYPE HTML>
<html>

<head>
    <title>video+rtmp</title>
    <meta charset="utf-8">
    <link href="./video-js@5.3.0.min.css" rel="stylesheet">
</head>

<body>
    <h1>video+rtmp测试</h1>

    <video id="my-video" class="video-js" controls preload="auto" width="640px" height="480px" poster=""
        data-setup="{}">
        <source src="rtmp://58.200.131.2:1935/livetv/ahtv" 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="./video@5.3.0.min.js"></script>
    <script>
        var myPlayer5 = videojs("my-video");  //当前video标签的id
        videojs.options.flash.swf = './video-js@5.3.0.swf'  //本地的swf文件
        myPlayer5.ready(
            function () {
                var myPlayer = this;
                myPlayer.play();  //播放
            }
        );
    </script>
</body>

</html>

在这里插入图片描述

3、ezuikit播放rtmp

注意:
1.官方文档：http://open.ys7.com/doc/zh/uikit/uikit_javascript.html
我使用的是jssdk 2.0

<!DOCTYPE html>
<html>
  <head>
    <title>EZuikit播放rtmp</title>
    <meta charset="utf-8" />
  </head>

  <body>
    <video id="myPlayer" controls playsinline webkit-playsinline autoplay>
      <source
        src="rtmp://58.200.131.2:1935/livetv/ahtv"
        type="rtmp/flv"
      />
    </video>
    <script src="./ezuikit.js"></script>
    <script>
      // 注：在vue里使用动态src时
      // 这一步需要放在settimeout里面
      new EZuikit.EZUIPlayer('myPlayer')
    </script>
  </body>
</html>

在这里插入图片描述