VUE：iframe访问并展示外部网址或者视频 |
您所在的位置：网站首页 › vue打开网址 › VUE：iframe访问并展示外部网址或者视频 |
|
简介
在H5网址、APP等项目中，会有访问外部链接、播放网上视频的需求。 具体实现上一个页面，传入三个 参数，分别是type（0 图文，1 视频，注意最好是用字符窜的格式）、url（图文或视频的网络外部链接地址）、logoUrl（logo图，用来展示视频封面用的）。 当前视频不支持 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(); } } }; .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; } 最后觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！ |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |