1、预览效果

浏览需要跨域

2、实现原理

基于乐创者报表（lczReport）中单元格的自定义控件功能+hls实现。

3、配置步骤

3.1、引入高德地图api

服务器路径：res\lczReport\lib\echarts\hls.min.js
hls.min.js

3.2、报表模板中设置自定义控件

3.3、配置脚本

参考如下

<!DOCTYPE HTML>
<html>
<body>

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<video id="video" style="width:300px;height:200px" controls="controls"  autoplay="autoplay" ></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8');
    hls.attachMedia(video);
  //   hls.on(Hls.Events.MANIFEST_PARSED,function() {
  //     video.play();
  // });
//   setTimeout(() => {
//     video.play();
//   video.pause()
//   video.load()
// }, 10)
 }

</script>

</body>
</html>

设计器脚本配置

ER.widget.extend(this, {
    type: 'echarts',
    handleChartClickEvent: function (params) {},
    init: function (datas, element, echarts) {
        $('<video id="video" style="width:300px;height:200px" controls="controls"  autoplay="autoplay" ></video>').insertAfter(element)
        var video = document.getElementById('video');
        var hls = new Hls();
        hls.loadSource('http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8');
        hls.attachMedia(video);
    }
})
作者：倪  创建时间：2024-07-25 14:10
最后编辑：倪  更新时间：2025-04-22 15:31