大屏BIM和视频切换展示

最新推荐文章于 2024-07-29 16:07:20 发布

春晓_春眠花落

最新推荐文章于 2024-07-29 16:07:20 发布

阅读量580

点赞数 2

分类专栏：数据可视化文章标签： bim 视频处理

本文链接：https://blog.csdn.net/weixin_49668076/article/details/116017583

版权

数据可视化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文档详细介绍了如何在Vue.js项目中实现场景切换，包括BIM模型展示和视频播放功能。通过按钮切换，利用`flag`变量控制BIM和视频的显示。BIM部分使用`iframe`标签引入外部BIM页面，而视频部分则使用Video.js库进行播放，并展示了如何通过点击图片切换不同视频源。同时，提供了完整的HTML、CSS和JavaScript代码示例。

摘要由CSDN通过智能技术生成

最近在写大屏项目，总结一下BIM展示和视频切换
效果图如下：
在这里插入图片描述

首先准备两个button按钮

 <div class="tabButton">
              <button class="Bmain_main_1_BIM" @click="changeBIM">BIM</button>
              <button class="Bmain_main_1_video" @click="changeVIDEO">视频</button>
            </div>

data中准备一个变量flag，默认为false，用来切换按钮
在这里插入图片描述
方法中定义

   changeBIM() {
      this.flag = true;
    },
    changeVIDEO() {
      this.flag = false;
    },

紧接着开始写BIM,我这里的bim是现成的引入就可以，用的是iframe标签。
为什么用iframe标签，我在网上搜了一下，iframe 创建包含另外一个文档的内联框架(即行内框架)，简而言之，iframe标签是框架的一种形式，一般用来包含别的页面。
优点如下：1、iframe能够把嵌入的网页原样展现出来，2、如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决，3、重载页面时不需要重载整个页面，只需要重载页面中的一个框架页

src引入的地址仅作试样，地址不正确。v-if控制flag

  <div class="Bmain_main_1_img_box" v-if="flag">
              <iframe
                src="http://bdip.zrconsult.cn/bim"
                width="100%"
                align="center"
                height="100%"
                frameborder="0"
                scrolling="no"
              ></iframe>
            </div>

然后是视频的展示，这里上面是视频，下面四张图片对应的是四个视频，每点击一张图片，对应的视频就会在上面显示。

   <div class="Bmain_main_11_img_box" v-else>
              <div class="Bmain_main_11_child_box" style="height: 65%; width: 100%">
                <video-player
                  style="width: 100%; height: 90%"
                  ref="videoPlayer"
                  :playsinline="false"
                  :options="playerOptions"
                >
                </video-player>
              </div>
              <!-- 视频 -->
              <div class="Bmain_main_2_img_box">
                <div :key="index" v-for="(item, index) in imgURL">
                  <img :src="item.src" :alt="item.alt" @click="toVIdeo(index)" />
                </div>
              </div>

data中配置视频

  //视频配置
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: true, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: true, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "application/x-mpegURL", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src:
              " https://hls01open.ys7.com.m3u8", //url地址
          },
        ],
        hls: true, //如果是播放m3u8必须加（需注释掉techOrder,不然会有报错）
        //techOrder: ["flash"], //播放rtmp必须加
        poster: "", //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },

  videoURL: [
        "https://hls01open.ys7.com/.hd.m3u8",
        "https://hls01open.ys7.com/.m3u8",
        "https://hls01open.ys7.com/.m3u8",
        "https://hls01open.ys7.com/.m3u8",
      ],
       imgURL: [
        {
          src: require("@/img/work11.jpg"),
          alt: "一号工地",
        },
        {
          src: require("@/img/work2.jpg"),
          alt: "二号工地",
        },
        {
          src: require("@/img/import.jpg"),
          alt: "三号工地",
        },
        {
          src: require("@/img/threeNo.jpg"),
          alt: "四号工地",
        },
      ],

 toVIdeo(i) {
      this.playerOptions.sources[0].src = this.videoURL[i];
    },

完整代码包含样式如下：

    <div class="Bmain_main_1">
            <!-- BIM和视频切换 -->
            <div class="Bmain_main_1_tit">工地视频</div>
            <div class="tabButton">
              <button class="Bmain_main_1_BIM" @click="changeBIM">BIM</button>
              <button class="Bmain_main_1_video" @click="changeVIDEO">视频</button>
            </div>
            <!-- bim -->
            <div class="Bmain_main_1_img_box" v-if="flag">
              <iframe
                src="http://bdip.zrconsult.cn/bim"
                width="100%"
                align="center"
                height="100%"
                frameborder="0"
                scrolling="no"
              ></iframe>
            </div>
            <!-- 视频 -->

            <div class="Bmain_main_11_img_box" v-else>
              <div class="Bmain_main_11_child_box" style="height: 65%; width: 100%">
                <!-- <img :src="imgURL" alt="" @click="toVideo1"> -->
                <video-player
                  style="width: 100%; height: 90%"
                  ref="videoPlayer"
                  :playsinline="false"
                  :options="playerOptions"
                >
                </video-player>
              </div>
              <!-- 视频 -->
              <div class="Bmain_main_2_img_box">
                <div :key="index" v-for="(item, index) in imgURL">
                  <img :src="item.src" :alt="item.alt" @click="toVIdeo(index)" />
                </div>
              </div>
            </div>
          </div>

data中的代码

    flag: false,
      //视频配置
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: true, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: true, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "application/x-mpegURL", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src:
              " https://hls01open.ys7.com/m3u8", //url地址，进出口枪机
          },
        ],
        hls: true, //如果是播放m3u8必须加（需注释掉techOrder,不然会有报错）
        //techOrder: ["flash"], //播放rtmp必须加
        poster: "", //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
 imgURL: [
       
        {
         
          src: require("@./img/work11.jpg"),
          alt: "一号工地",
        },
        {
          
          src: require("@/img/work2.jpg"),
          alt: "二号工地",
        },
        {
         
          src: require("@img/import.jpg"),
          alt: "三号工地",
        },
        {
         
          src: require("@/img/threeNo.jpg"),
          alt: "四号工地",
        },
      ],
      videoURL: [
        "https://hls01open.ys7.com/m3u8",
        "https://hls01open.ys7.com/.m3u8",
        "https://hls01open.ys7.com/m3u8",
        "https://hls01open.ys7.com/.m3u8",
      ],

methods中的代码

  changeBIM() {
      this.flag = true;
    },
    changeVIDEO() {
      this.flag = false;
    },
    toVIdeo(i) {
      this.playerOptions.sources[0].src = this.videoURL[i];
    },

style样式

.Bmain_main_1 {
  width: 100%;
  height: 75.5%;
  padding-top: 3%;
  margin-top: -1%;
  background: rgba($color: #000000, $alpha: 0.3);
}
.Bmain_main_1_tit {
  height: 3%;
  width: 96%;
  padding-left: 1%;
  // padding-top: 1%;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  border-left: 5px solid #20f4fa;
  display: flex;
  align-items: center;
}
.tabButton {
  width: 100%;
  height: 5.5%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Bmain_main_1_BIM {
  width: 20%;
  height: 100%;
  background: transparent;
  color: #217bfb;
  font-size: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 2px solid #217bfb;
  margin-right: 10%;
  cursor: pointer;
}
.Bmain_main_1_video {
  width: 20%;
  height: 100%;
  background: #217bfb;
  color: #fff;
  font-size: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 2px solid #217bfb;
  cursor: pointer;
}
.Bmain_main_1_img_box {
  width: 98%;
  height: 87%;
  margin: 2.5% 1%;
}
.Bmain_main_11_img_box {
  width: 97%;
  height: 90%;
  margin: 2% auto 0 auto;
}
.Bmain_main_2_img_box {
  width: 100%;
  height: 31%;
  margin-top: 2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}