快速在 TB 自定义一个播放视频的部件库

正文与配图来自原稿。系统管理员新建部件包，引入 video.js，可做 mp4、flv、HLS 预览。

1、播放 mp4 视频

1. 登录 sysadmin，打开 部件库，新建部件包 video：

2. 进入包内 → 创建部件，名称如「视频播放」，类型选 静态部件。资源库引入 video.js CDN：

• https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video-js.min.css
• https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video.min.js

3. HTML：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" style="width:100%; height:100%">
  <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>
</body>
</html>

4. JS 初始化：

self.onInit = function() {
  var player = videojs('my-video');
}

5. 预览：

其它面板可保持默认。非 mp4 时改 type，例如 HLS：type="application/x-mpegURL"。示例资源：

• FLV：https://sample-videos.com/video123/flv/720/big_buck_bunny_720p_1mb.flv
• m3u8：https://live.cgtn.com/1000/prog_index.m3u8

2、flv 视频播放

引入资源库：

HTML：

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" style="width:100%; height:100%">
  <source src="https://sample-videos.com/video123/flv/720/big_buck_bunny_720p_1mb.flv" type="video/flv">
</video>

self.onInit = function() {
  var player = videojs('my-video');
}

3、m3u8 视频播放

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" style="width:100%; height:100%">
  <source src="https://live.cgtn.com/1000/prog_index.m3u8" type="application/x-mpegURL">
</video>

self.onInit = function() {
  var player = videojs('my-video');
}

4、小结

静态部件 + CDN 即可快速验证；生产环境建议自建 CDN、处理跨域与鉴权，并把地址做成部件设置项而非写死在 HTML。