如何在HTML5中播放RTMP服务器流？及videojs-flash插件报错解决

嘿，这个问题我之前帮不少开发者踩过坑，本质是Flash插件的跨域安全机制在搞事情——当跨域加载的SWF内容可见尺寸小于400×300像素时，浏览器会直接阻止它运行，完全不可见的内容更是直接被拦死。给你几个针对性的解决办法：

• 强制设置播放器的最小可见尺寸
  这是最直接的解决方案，你可以通过两种方式实现：
  一是在初始化Video.js播放器时，明确指定宽高参数：

  var player = videojs('my-player', {
    width: 640,
    height: 360, // 这个尺寸远大于400×300的要求
    techOrder: ['flash'], // 优先使用Flash播放RTMP
    sources: [{
      src: 'rtmp://your-rtmp-server/stream-path',
      type: 'rtmp/mp4'
    }]
  });
  

  二是通过CSS给播放器容器设置最小尺寸，同时保留响应式特性：

  .video-js {
    min-width: 400px;
    min-height: 300px;
    width: 100% !important;
    height: auto !important;
  }
  

• 确保播放器初始化时处于可见状态
  检查你的页面CSS，有没有给播放器容器添加display: none、opacity: 0、visibility: hidden这类隐藏属性，或者用transform把它缩放到极小尺寸。Flash插件在初始化阶段如果检测到自己处于不可见状态，会直接触发这个安全限制。如果需要先隐藏播放器，建议等播放器完全初始化完成后，再通过JS控制它的显示状态。

• 额外建议：考虑替代RTMP协议
  顺带提一句，现在主流浏览器基本都已经放弃对Flash的支持了，Video.js官方也在逐步淘汰Flash相关插件。如果条件允许，建议把RTMP流转换成HLS或者DASH这类基于HTTP的流媒体协议，这样就能摆脱Flash的依赖，兼容性和安全性都会好很多。

内容的提问来源于stack exchange，提问作者Abhishek Sinha