current position:Home>Render external link address URL video page via iframe - Vue

Render external link address URL video page via iframe - Vue

2022-06-24 09:43:05survivorsfyh

adopt  iframe  For external link addresses URL Page for rendering load , The specific implementation is as follows :

 

<template>
  <div class="content">
    <!--  Top bar  -->
    <van-nav-bar title=" Video playback ">
      <template #left>
        <img
          :src="back"
          style="width:0.625rem;height:1rem;"
          @click="goBack()"
        />
      </template>
    </van-nav-bar>

    <!-- Play related -->
    <iframe
      style="border:none"
      :width="searchTableWidth"
      :height="searchTableHeight"
      v-bind:src="replayUrl"
    >
    </iframe>
  </div>
</template>
<script>
  export default { //  modular : on demand 
    name : "playerComponent",
    data() {
      return {
        back : require("@/assets/images/go_back.png"),
        videoWidth : 0,
        videoHeight : 0,
        replayUrl : '', //  On demand address 
      }
    },
    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 () { //  Monitor route changes 
        this.replayUrl = this.playerData[ 'replayUrl' ];
      }
    }
  }
</script>


These are all the contents of this sharing , I hope it can help you !

copyright notice
author[survivorsfyh],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/175/202206240827167613.html

Random recommended