使用 VideoJS 播放器播放 RTMP 流答案

【问题标题】：Playing RTMP stream with VideoJS player使用 VideoJS 播放器播放 RTMP 流
【发布时间】：2017-07-17 13:53:06
【问题描述】：

我正在尝试使用VideoJS 播放器播放RTMP 流，下面是我的代码：

<head>
  <link href="http://vjs.zencdn.net/6.2.0/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 --> 
  <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{"techorder" : ["flash"]}'>
    <source src="rtmp://184.72.239.149/vod/mp4/BigBuckBunny_115k.mov" type="rtmp/mp4">                                                                                                                           
    <p class="vjs-no-js">
      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/6.2.0/video.js"></script>
</body>

我看到的错误是这样的：

VIDEOJS：错误：（代码：4 MEDIA_ERR_SRC_NOT_SUPPORTED）找不到此媒体的兼容来源。 MediaError {code: 4, message: "No compatible source was found for this media."}

错误很明显，但是有很多文档向人们展示了使用VideoJS 播放RTMP 流的成功案例：

我确定以下 URL 确实在 VLC 播放器上播放，JWPlayer 上也播放：

rtmp://184.72.239.149/vod/mp4/BigBuckBunny_115k.mov

可能是什么问题？

【问题讨论】：

标签： html video-streaming video.js rtmp

【解决方案1】：

如果你想玩RTMP，你必须包含flash-tech，可以从这里检索：

https://github.com/videojs/videojs-flash

因此正确的代码是这样的：

<head>
  <link href="http://vjs.zencdn.net/6.2.0/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 --> 
  <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{"techorder" : ["flash"]}'>
    <source src="rtmp://184.72.239.149/vod/mp4/BigBuckBunny_115k.mov" type="rtmp/mp4">                                                                                                                           
    <p class="vjs-no-js">
      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/6.2.0/video.js"></script>
  <script src="/videojs-flash.js"></script>
</body>

【讨论】：

我试过这个例子，但它不起作用，你能帮帮我吗？我在 webconsole 中没有看到任何错误，但视频没有播放，我包含了 videojs flash js 文件。
您能否确认您的 RTMP 流确实有效，例如您可以使用 VLC 播放器播放吗？如果您注释掉 videojs-flash.js 行，您会在控制台中收到任何错误吗？你用什么来串流 RTMP？我正在使用 Nginx 插件。
我可以使用 VLC 播放器播放视频。如果我注释掉 videojs flash 标签 videojs 返回 MEDIA_ERR_SRC_NOT_SUPPORTED 你能检查我的代码jsfiddle.net/qco58Lef 谢谢。
不幸的是，我必须确认，它不再起作用了。我不知道项目之间的错误或不兼容（因为videojs-flash 似乎是videojs 的细分）。顺便说一句，在您的 jsfiddle 中，您没有包含 videojs-flash.js。