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

在html引入jessibuca.js (还需下载decoder.js，decoder.wasm)
http://jessibuca.monibuca.com/player.html 官方下载

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

1.播放flv视频

 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 = `

${name}


`;
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();
},