在vue中使用iframe解决视频资源的防盗链
更新时间：2023年12月14日 10:38:21 作者：亦双城的双子娴
我们的vue2.0项目当中,存储了许多图片和视频资源,所以我们需要增加防盗链设置,但是这样一来,当我们将其他网站上的视频资源,想入到我们的环境当中的时候,会报错,所以本文给大家介绍了在vue中使用iframe解决视频资源的防盗链,需要的朋友可以参考下
我们的vue2.0项目当中，存储了许多图片和视频资源，所以在index.html中增加了防盗链设置
但是这样一来，当我们将其他网站上的视频资源，想入到我们的环境当中的时候，由于其他网站的防盗链设置，将url地址放到浏览器当中能够播放，但是放到我们页面中访问的时候，会报错403,找不到资源数据
但是不能修改index.html中的防盗链设置，因为这是全局配置，而我只要某一个功能模块不需要这个防盗链设置，因此使用ifame来解决，因为他可以单独设置 <meta name=referrer content=no-referrer>
在static中文件夹中增加一个html文件夹，写我的目标dom结构，不放在静态文件夹中，打包之后发布到线上会找不到这个html，除非写了特定的打包配置，输出目标位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
//这里设置防盗链
<meta name=referrer content=no-referrer>
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
body {
overflow: hidden;
}
video {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<video id="my-iframe-video" controls preload="auto"></video>
</body>
</html>使用iframe
<!-- 报错403 -->
<iframe :src="iframeSrc" frameborder="0" style="width:100%;height:100%" class="err-video-box">
</iframe>
<!-- 正常播放 -->
<video v-show="previewFlag" ref="videoEle" :src="vodList[vodIndex]" controls preload="auto" referrerPolicy="no-referrer" id="target-video"></video>在视频资源错误事件里去替换页面结构
this.$refs.videoEle.addEventListener('error', (e) => {
this.previewFlag = false
this.iframeSrc = window.location.pathname.replace(/\/$/,'')+'/static/html/videoSucai.html'
// 设置iframe可见
const iframeDom = document.querySelector('.err-video-box')
iframeDom.style.setProperty('display','block')
// 向iframe中进行通信，传递播放的src地址
this.$nextTick(()=>{
setTimeout(() => {
const videoErr = document.querySelector('.err-video-box').contentWindow.document.querySelector('#my-iframe-video')
videoErr.src = e.target.src
},500);
})
})到此这篇关于在vue中使用iframe解决视频资源的防盗链的文章就介绍到这了,更多相关vue iframe资源防盗链内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于vue单文件中引用路径处理的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
element-plus/element-ui走马灯配置图片及图片自适应的最简便方法
走马灯功能在展示图片时经常用到,下面这篇文章主要给大家介绍了关于element-plus/element-ui走马灯配置图片及图片自适应的最简便方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了在vue中使用公共过滤器filter的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
这篇文章主要介绍了在vue项目中配置你自己的启动命令和打包命令方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家介绍了Electron采集桌面共享和系统音频(桌面捕获)实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了vue如何实现文件上传及预览问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了移动端Vue2.x Picker的全局调用实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要为大家详细介绍了Vue计时器的用法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
在Vue 2中实现截图功能,可以使用HTML5的Canvas元素和一些JavaScript代码来捕获屏幕或特定元素的截图,以下是一个简单的步骤和示例代码来实现这个功能,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue子组件created方法不执行问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论