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

时间 2019-12-05

标签 video.js video 5.x 处理 rtmp 视频栏目 JavaScript 繁體版

原文原文链接

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

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

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

若是你用的是脚手架开发，能够直接放在静态目录里，好比vue2.5.0 的staticvue

<!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"

视频未播放时展现的内容git

videojs.options.flash.swf

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

videojs 默认是去 vjs.zencdn.net/swf/5.3.0/v… ，能够下载到本地web

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

动态获取src

若是地址是经过ajax获取的，就须要使用js的方式动态初始化浏览器

var player = videojs('my-player');
    
复制代码

由于我用的是React，因此不须要动态设置srcbash

更多的设置能够看官网服务器

github.com/videojs/vid…

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

总结

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

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

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

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

直播原理与web直播实战