vue使用Mars3d弹框嵌套video视频/实时视频(flv) 使用jessibuca.js播放器

在html引入jessibuca.js (还需下载decoder.js,decoder.wasm)
http://jessibuca.monibuca.com/player.html 官方下载
<script type="text/javascript" src="./jessibuca.js"></script>

Mars3d弹框嵌套视频播放m3u8前面相同

1.播放flv视频

javascript 复制代码
 data:{
     listOpen: true,
      playing: false,
      isNotMute: false,
      quieting: false,
      fullscreen: false,
      loaded: false, // mute
      speed: 0,
      performance: "", // 工作情况
      kBps: 0,
      btnDom: null,
      videoInfo: null,
      volume: 1,
      rotate: 0,
      vod: false, // 点播
      forceNoOffscreen: false,
      }


  openVideo(item) {
      console.log(5555, item);
      const { addressLongitude, addressLatitude, name, url, poster } = item;
      var position = [addressLongitude, addressLatitude, 1];
      pointEntity == null;
      this.removeDemoLayer();
      // ·····定位到点击的位置开始
      pointEntity = new mars3d.graphic.PointEntity({
        position: position,
        style: {
          color: "rbga(255,255,255,0.1)",
          pixelSize: 0,
          outlineColor: "#F8B55E",
          outlineWidth: 0
        }
      });
      graphicLayer.addGraphic(pointEntity);
      pointEntity.flyTo({ radius: 3400, scale: 28 });
       // ····定位到点击的位置结束  (看需求是否使用)
      const graphic = new mars3d.graphic.BoxEntity({
        position: new mars3d.LngLatPoint(addressLongitude, addressLatitude, 0),
        style: {
          // dimensions: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),
          fill: true,
          color: "#00ff00",
          opacity: 0.9,
          label: {
            text: name,
            font_size: 19,
            pixelOffsetY: 450,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM
          }
        }
      });
      graphicLayer.addGraphic(graphic);
      const inthtml = `<div>
<div style="width: 450px;text-align:center;font-size:15px;">${name}</div>
<div style="width: 450px;height:300px;" class='videoBox' id="videoHLS"  muted="muted" autoplay="autoplay" loop="loop" crossorigin="" controls="">
              </div>
        </div>`;
      graphic.on(mars3d.EventType.popupClose, function(event) {
        console.log("关闭", jessibuca);
        if (jessibuca) {
          jessibuca.pause();
          jessibuca.destroy();
          jessibuca = null;
        }
      });

      graphic.on(mars3d.EventType.popupOpen, function(event) {
        let option = {};
        if (!jessibuca) {
          jessibuca = new window.Jessibuca(
            Object.assign(
              {
                container: event.container.querySelectorAll("[id]")[1],                                                 //jessibuca需要容器
                videoBuffer:1, // 最大缓冲时长,单位秒
                isResize: true,
                loadingText: "疯狂加载中...",
                decoder: "/decoder.js",
                background: poster,
                useMSE: false,
          showBandwidth: false,
          isFlv: true,
heartTimeoutReplay:true,
          hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio,
          debug: false,
          supportDblclickFullscreen: false, // 是否支持屏幕的双击事件,触发全屏,取消全屏事件。
          operateBtns: {
            fullscreen: true,
            screenshot: true,
            play: true,
            audio: true,
            recorder: true,
          },
          record: "record",
          vod: this.vod,
          forceNoOffscreen: this.forceNoOffscreen,
                isNotMute: this.isNotMute,
          loadingTimeout:30,
              },
              option
            )
          );
          jessibuca.play(url);
        }
      // 刷新局部DOM,不影响popup面板的其他控件操作
      // graphic.on(mars3d.EventType.postRender, function(event) {
      //   console.log(555555)
      // });

      // 绑定Tooltip
      graphic
        .bindPopup(inthtml, {
          offsetY: -30,
          closeOnClick: false,
          autoClose: false
        })
        .openPopup();
    },
相关推荐
珠峰下的沙砾2 分钟前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
前端_学习之路9 分钟前
javaScript--数据结构和算法
javascript·数据结构·算法
拉不动的猪23 分钟前
# 移动端与PC端全屏的处理
前端·javascript·面试
Donvink24 分钟前
【视频生成模型】通义万相Wan2.1模型本地部署和LoRA微调
人工智能·深度学习·aigc·音视频
麦麦大数据28 分钟前
vue+neo4j+flask 音乐知识图谱推荐系统
vue.js·mysql·flask·知识图谱·neo4j·推荐算法·音乐推荐
excel41 分钟前
招幕技术人员
前端·javascript·后端
Deepsleep.1 小时前
视频HLS分片与关键帧优化深度解析
音视频
Antonio9151 小时前
【音视频】视频解码实战
ffmpeg·音视频·aac
烛阴2 小时前
Promise无法中断?教你三招优雅实现异步任务取消
前端·javascript
GUIQU.2 小时前
【Vue】单元测试(Jest/Vue Test Utils)
前端·vue.js