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();
    },
相关推荐
aqi007 分钟前
FFmpeg开发笔记(八十三)国产的视频裁剪框架AndroidVideoTrimmer
android·ffmpeg·音视频·流媒体
Glommer12 分钟前
某音 Js 逆向思路
javascript·逆向
街尾杂货店&15 分钟前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈17 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
kevlin_coder1 小时前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生1 小时前
JS 性能优化
前端·javascript
peachSoda71 小时前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序
hbqjzx1 小时前
记录一个自动学习的脚本开发过程
开发语言·javascript·学习
浪裡遊1 小时前
React开发模式解析:JSX语法与生命周期管理
前端·javascript·react.js·前端框架·ecmascript
fruge1 小时前
Vue 3 完全指南:响应式原理、组合式 API 与实战优化
javascript·vue.js·ecmascript