浏览器显示RTMP流

准备

这里使用videojs显示，所以要首先下载videojs。

下载videojs，我选择的是7.5.4，地址:https://github.com/videojs/Video.js/releases

下载videojs-flash，因为rtmp依赖flash，地址：https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js

使用

<link rel="stylesheet" href="./css/video-js.min.css">
<script src="./js/OpenSource/videojs-flash.min.js" type="text/javascript"></script>
<script src="./js/OpenSource/videojs-flash.min.js" type="text/javascript"></script>

<video 
     id="video_1" class="video-js vjs-default-skin" autoplay='true' 
     preload="auto" fluid="true" data-setup="{}" poster="./assets/CameraBlack.BMP" data-setup="{}">
     <source src="0" type="rtmp/flv"> </source>
</video>  

常用选项

autoplay : true/false 播放器准备好之后，是否自动播放 【默认false】

controls : true/false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮

height: 视频容器的高度，字符串或数字 单位像素 比如： height:300 or height:‘300px‘

视频容器的宽度, 字符串或数字 单位像素

loop : true/false 视频播放结束后，是否循环播放

muted : true/false 是否静音

poster: 播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL

preload:预加载
　　‘auto‘ 自动
　　’metadata‘ 元数据信息 ，比如视频长度，尺寸等
　　‘none‘ 不预加载任何数据，直到用户开始播放才开始下载
children: Array | Object 可选子组件 从基础的Component组件继承而来的子组件，数组中的顺序将影响组件的创建顺序哦。

fluid:  true/false 是否自适应大小

 

问题

• 动态修改大小

var myPlayer = videojs("video_1");
myPlayer.src({ type: 'rtmp/flv', newurl);

• 窗口小的时候，无法自动播放

引入video-js.swf，可以解决这个问题

  <script>
    videojs.options.flash.swf = "./js/OpenSource/video-js.swf"
  </script>