ThingsBoard 播放视频

正文与配图来自原稿。与 video.js 部件包互补：本篇偏 HTML 部件内嵌多种协议。

1、iframe 嵌入网页资源

html

<iframe width="100%" height="100%"
  src="https://www.youtube.com/embed/tgbNymZ7vqY"
  allowfullscreen></iframe>

iframe

2、播放 mp4

html

<video width="100%" height="100%" controls muted playsinline autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

mp4

3、播放 flv（flv.js）

简单版：动态加载 CDN，flvjs.createPlayer 挂到 <video>。生产建议固定版本（如 1.6.2），关闭 worker 先验证，并处理自动播放需静音/用户手势。

const flvUrl = 'http://YOUR_HOST/live/livestream.flv';
// loadScript('https://unpkg.com/flv.js@1.6.2/dist/flv.min.js', ...)
const player = flvjs.createPlayer(
  { type: 'flv', url: flvUrl, isLive: true, cors: true },
  { enableWorker: false, autoCleanupSourceBuffer: true }
);
player.attachMediaElement(video);
player.load();
video.play().catch(() => { /* 点击后再 play */ });

注意：iOS Safari 对 FLV/MSE 支持差。

4、播放 m3u8（hls.js）

const m3u8Url = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
// loadScript hls.js 后：
if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource(m3u8Url);
  hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  video.src = m3u8Url;
}

5、小结

点播用 <video>/iframe；HTTP-FLV 用 flv.js；HLS 用 hls.js 或原生 Safari。摄像头 RTSP 需先转 WebRTC，见播放摄像头 RTSP。

ThingsBoard 播放视频 ​

1、iframe 嵌入网页资源 ​

2、播放 mp4 ​

3、播放 flv（flv.js） ​