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
<!DOCTYPE html>
<html lang="zh">
<head>
<title>Document</title>
<link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
</head>
<body>
<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
autoplay="autoplay" poster="//vjs.zencdn.net/v/oceans.png" width="500" height="400" data-setup='{}'>
<source src='rtmp://live.hkstv.hk.lxdns.com/live/hks1' type='rtmp/flv' />
</video>
</body>
<script src="http://vjs.zencdn.net/5.19/video.min.js"></script>
</html>
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/，诚恳大佬们尽量提供一段可运行、可看到效果的代码，帮人帮到底，送佛送到西，提前表示谢意，赞美之词溢于言表。
网友评论