通过iframe渲染外部链接地址url视频页面 - Vue

通过 iframe 的方式对外部链接地址的URL页面进行渲染加载,具体实现如下:

<template>
  <div class="content">
    <!-- 顶部条 -->
    <van-nav-bar title="视频回放">
      <template #left>
        <img
          :src="back"
          style="width:0.625rem;height:1rem;"
          @click="goBack()"
        />
      </template>
    </van-nav-bar>

    <!--播放相关-->
    <iframe
      style="border:none"
      :width="searchTableWidth"
      :height="searchTableHeight"
      v-bind:src="replayUrl"
    >
    </iframe>
  </div>
</template>

<script>
  export default { // 模块:点播
    name : "playerComponent",
    data() {
      return {
        back : require("@/assets/images/go_back.png"),
        videoWidth : 0,
        videoHeight : 0,
        replayUrl : '', // 点播地址
      }
    },
    created() {
      this.playerData = JSON.parse(window.sessionStorage.getItem('playerData'));
      console.log(this.playerData);
      this.replayUrl = this.playerData[ 'replayUrl' ];
    },
    methods : {
      goBack() {
        this.$router.go(-1);
      },
      setWidthHeight() {
        this.videoWidth = window.innerWidth;
        this.videoHeight = window.innerHeight;
      },
    },
    mounted() {
      window.onresize = () => {
        this.setWidthHeight();
      };
      this.$nextTick(function () {
        this.setWidthHeight();
      });
    },
    watch : {
      '$route' : function () { // 监听路由变化
        this.replayUrl = this.playerData[ 'replayUrl' ];
      }
    }
  }
</script>

以上便是此次分享的全部内容，希望能对大家有所帮助！