VUE：iframe访问并展示外部网址或者视频
<template>
<div>
<iframe v-if=" === '0'" :src="" marginwidth="0" marginheight="0" frameborder="0" :width="iframeWidth" :height="iframeHeight" class="iframeCss"></iframe>
<div v-else-if=" === '1'" class="videoPlayBox">
<video ref="videoEle" preload="auto" id='my-video' :src="" :playsinline="true" :webkit-playsinline="true" autoplay muted @loadstart="videoLoaded" @canplaythrough="videoLoaded"
:x-webkit-airplay="true" x5-video-player-type="h5" :x5-video-player-fullscreen="true" controls="controls" :x5-video-ignore-metadata="true" :poster="" width="100%">
<p>当前视频不支持</p>
</video>
</div>
</div>
</template>
<script>
export default {
name: "external-view",
props: {
type: {
type: String,
required: true
},
url: {
type: String,
required: true
},
logoUrl: {
type: String,
required: false
}
},
data() {
return {
iframeWidth: "", // 宽度
iframeHeight: "", // 高度
materialData: {
type: "0",
url: "", // 外部网址链接
logoUrl: ""
}
};
},
created() {
this.materialData.type = this.type;
// 是图文的时候，要计算屏幕宽高，用以iframe的宽度变化
if (this.type === "0") {
this.iframeWidth = document.documentElement.clientWidth;
this.iframeHeight = document.documentElement.clientHeight;
}
this.materialData.url = this.url;
this.materialData.logoUrl = this.logoUrl;
},
methods: {
// 有的手机是不支持进入页面自动播放视频的，所以需要设置自动播放
videoLoaded() {
this.$refs.videoEle.play();
}
}
};
</script>
<style lang="scss" scoped>
.iframeCss {
border: none;
}
.videoPlayBox {
width: 100%;
height: 100vh;
background-color: rgb(0,0,0);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#my-video{
object-fit: cover;
object-position: center center;
}
</style>