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();
    },
相关推荐
知识分享小能手23 分钟前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one24 分钟前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲25 分钟前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell1 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830942 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
前端工作日常3 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip4 小时前
JavaScript事件流
前端·javascript
小菜全4 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
wow_DG4 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904274 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js