Video.js 5.x 处理rtmp视频流

Real Time Messaging Protocol（简称 RTMP）是 Macromedia 开发的一套视频直播协议，现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server，并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好，延迟很小，但无法支持移动端 WEB 播放是它的硬伤。
浏览器端，HTML5 video标签无法播放 RTMP 协议的视频，可以通过 video.js 来实现。

我司原先用的是ReactSwf，结果会出现停止播放后，视频播放器就黑屏的现象。

下面的例子可直接在浏览器里查看效果! 但是要运行在服务器上(Chrome)

如果你用的是脚手架开发，可以直接放在静态目录里，比如vue2.5.0 的static

image.png

poster="//vjs.zencdn.net/v/oceans.png"

视频未播放时展示的内容

videojs.options.flash.swf

这个是全局设置播放控件的

image.png

videojs 默认是去 http://vjs.zencdn.net/swf/5.3.0/video-js.swf ，可以下载到本地

image.png

这个东西设置有问题话，播放器只会显示一个初始的暂停播放按钮，点击还没反应，这个让我花费了好多时间。

动态获取src

如果地址是通过ajax获取的，就需要使用js的方式动态初始化

   var player = videojs('my-player');
    

因为我用的是React，所以不需要动态设置src
更多的设置可以看官网
https://github.com/videojs/video.js/tree/5.x
https://github.com/videojs/video.js/blob/5.x/docs/guides/options.md

my-player 是video的id，吐槽一下，这样可读性不好，还是要加上# 或者videojsById

总结

其实我看了很多文章，这些文章大多不能看到结果，比如用的js库是本地，不能看到版本，或是播放视频流是本地，很多只是冷冷地贴上代码，或是将别人的文章直接拷贝过来。

上述这些情况很影响判断的，正是因为上述列子能看到结果，我才能通过单一变量原则，确认是videojs.options.flash.swf 这个设置不对导致的问题，否则我可能还要搞很久，当让这和本身的经验有很大关系，我是第一次搞这种东西，没见过这种世面，惭愧。

网上有很多cdn厂商，比如https://www.bootcdn.cn/，诚恳大佬们尽量提供一段可运行、可看到效果的代码，帮人帮到底，送佛送到西，提前表示谢意，赞美之词溢于言表。

PC端播放RTMP流(手机端无法播放)

直播原理与web直播实战