VUE：iframe访问并展示外部网址或者视频

前端-如此如此。

已于 2023-01-13 10:57:18 修改

阅读量6.3k

点赞数 4

分类专栏： web前端之VUE 文章标签： vue.js javascript 前端

于 2020-03-26 14:54:49 首次发布

本文链接：https://blog.csdn.net/weixin_44136505/article/details/105118484

版权

本文介绍了在Vue.js项目中如何利用iframe组件来访问和展示外部网址及视频内容。详细讨论了所需的参数，如type区分图文和视频，url为外部链接地址，logoUrl用于设置视频封面。文章鼓励读者通过点赞和评论交流相关技术问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

在H5网址、APP等项目中，会有访问外部链接、播放网上视频的需求。

具体实现

上一个页面，传入三个参数，分别是type（0 图文，1 视频，注意最好是用字符窜的格式）、url（图文或视频的网络外部链接地址）、logoUrl（logo图，用来展示视频封面用的）。

<template>
  <div>
    <iframe v-if="materialData.type === '0'" :src="materialData.url" marginwidth="0" marginheight="0" frameborder="0" :width="iframeWidth" :height="iframeHeight" class="iframeCss"></iframe>
    <div v-else-if="materialData.type === '1'" class="videoPlayBox">
      <video ref="videoEle" preload="auto" id='my-video' :src="materialData.url" :playsinline="true" :webkit-playsinline