在vue中使用iframe解決視頻資源的防盜鏈

更新時間：2023年12月14日 10:38:21 作者：亦雙城的雙子嫻

我們的vue2.0項目當中,存儲了許多圖片和視頻資源,所以我們需要增加防盜鏈設置,但是這樣一來,當我們將其他網(wǎng)站上的視頻資源,想入到我們的環(huán)境當中的時候,會報錯,所以本文給大家介紹了在vue中使用iframe解決視頻資源的防盜鏈,需要的朋友可以參考下

我們的vue2.0項目當中，存儲了許多圖片和視頻資源，所以在index.html中增加了防盜鏈設置

但是這樣一來，當我們將其他網(wǎng)站上的視頻資源，想入到我們的環(huán)境當中的時候，由于其他網(wǎng)站的防盜鏈設置，將url地址放到瀏覽器當中能夠播放，但是放到我們頁面中訪問的時候，會報錯403,找不到資源數(shù)據(jù)

但是不能修改index.html中的防盜鏈設置，因為這是全局配置，而我只要某一個功能模塊不需要這個防盜鏈設置，因此使用ifame來解決，因為他可以單獨設置 <meta name=referrer content=no-referrer>

在static中文件夾中增加一個html文件夾，寫我的目標dom結(jié)構(gòu)，不放在靜態(tài)文件夾中，打包之后發(fā)布到線上會找不到這個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>

在視頻資源錯誤事件里去替換頁面結(jié)構(gòu)

    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資源防盜鏈內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: