本地文件中的跨域读取阻塞 (CORB)

Question

我正在尝试在本地文件中复制 YouTube 视频。

我的开发是一个构建滑块的应用程序，我在一些幻灯片中设置了来自 youtube 的视频或本地视频。当我设置本地视频时，没有问题甚至可以毫无问题地复制视频。

但是当我从 YouTube 设置视频时遇到了这个问题。

Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type text/html. See for more details.

如果我将我的开发上传到服务器，我会遇到同样的错误。

这是我的代码...

const list_elements = {
  items: [
    {
      "tag" : "img",
      "src" : "./images/image1.png",
      "class" : "fit-size"
    },
    {
      "tag" : "video",
      "src" : "./videos/video1.mp4",
      "class" : "fit-size"
    },
    {
      "tag" : "text",
      "src" : "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget dignissim nunc, dapibus congue mi. Donec auctor eros orci, non semper lectus vulputate eget. Nunc at libero nisl. Ut id commodo quam.</p><p>Ut volutpat eros fringilla mi consequat, rutrum vehicula mi tristique. Aenean egestas mollis pretium.</p><p>Vestibulum et egestas libero. Integer sed quam quam. Cras cursus lorem id efficitur viverra. Mauris pretium nisl sed lectus fermentum pharetra.</p><p>Mauris massa velit, tincidunt nec justo eget, pellentesque hendrerit nisl. Integer nibh nisi, vehicula et aliquam vel, gravida eget sem. Nullam imperdiet dolor lorem, et commodo nisi interdum sed. Suspendisse gravida non velit sed sagittis.</p><p>In commodo massa sed lacus convallis, id placerat arcu blandit.</p>",
      "class" : "fit-size"
    },
    {
      "tag" : "img",
      "src" : "./images/image2.png",
      "class" : "fit-size"
    },
    {
      "tag" : "video",
      "src" : "./videos/video2.mp4",
      "class" : "fit-size"
    },
    {
      "tag" : "text",
      "src" : "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget dignissim nunc, dapibus congue mi. Donec auctor eros orci, non semper lectus vulputate eget. Nunc at libero nisl. Ut id commodo quam.</p><p>Ut volutpat eros fringilla mi consequat, rutrum vehicula mi tristique. Aenean egestas mollis pretium.</p><p>Vestibulum et egestas libero. Integer sed quam quam. Cras cursus lorem id efficitur viverra. Mauris pretium nisl sed lectus fermentum pharetra.</p><p>Mauris massa velit, tincidunt nec justo eget, pellentesque hendrerit nisl. Integer nibh nisi, vehicula et aliquam vel, gravida eget sem. Nullam imperdiet dolor lorem, et commodo nisi interdum sed. Suspendisse gravida non velit sed sagittis.</p><p>In commodo massa sed lacus convallis, id placerat arcu blandit.</p>",
    },
    {
      "tag" : "img",
      "src" : "./images/image3.jpg",
      "class" : "fit-size"
    },
    {
      "tag" : "video",
      "src" : "https://www.youtube.com/watch?v=G3Jghjh_SC4",
      "class" : "fit-size"
    },
    {
      "tag" : "text",
      "src" : "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget dignissim nunc, dapibus congue mi. Donec auctor eros orci, non semper lectus vulputate eget. Nunc at libero nisl. Ut id commodo quam.</p><p>Ut volutpat eros fringilla mi consequat, rutrum vehicula mi tristique. Aenean egestas mollis pretium.</p><p>Vestibulum et egestas libero. Integer sed quam quam. Cras cursus lorem id efficitur viverra. Mauris pretium nisl sed lectus fermentum pharetra.</p><p>Mauris massa velit, tincidunt nec justo eget, pellentesque hendrerit nisl. Integer nibh nisi, vehicula et aliquam vel, gravida eget sem. Nullam imperdiet dolor lorem, et commodo nisi interdum sed. Suspendisse gravida non velit sed sagittis.</p><p>In commodo massa sed lacus convallis, id placerat arcu blandit.</p>",
    },
    {
      "tag" : "img",
      "src" : "./images/image4.jpeg",
      "class" : "fit-size"
    },
    {
      "tag" : "video",
      "src" : "https://www.youtube.com/watch?v=G3Jghjh_SC4",
      "class" : "fit-size"
    },
    {
      "tag" : "text",
      "src" : "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget dignissim nunc, dapibus congue mi. Donec auctor eros orci, non semper lectus vulputate eget. Nunc at libero nisl. Ut id commodo quam.</p><p>Ut volutpat eros fringilla mi consequat, rutrum vehicula mi tristique. Aenean egestas mollis pretium.</p><p>Vestibulum et egestas libero. Integer sed quam quam. Cras cursus lorem id efficitur viverra. Mauris pretium nisl sed lectus fermentum pharetra.</p><p>Mauris massa velit, tincidunt nec justo eget, pellentesque hendrerit nisl. Integer nibh nisi, vehicula et aliquam vel, gravida eget sem. Nullam imperdiet dolor lorem, et commodo nisi interdum sed. Suspendisse gravida non velit sed sagittis.</p><p>In commodo massa sed lacus convallis, id placerat arcu blandit.</p>",
    },
    {
      "tag" : "img",
      "src" : "./images/image5.png",
      "class" : "fit-size"
    },
    {
      "tag" : "video",
      "src" : "https://www.youtube.com/watch?v=G3Jghjh_SC4",
      "class" : "fit-size"
    },
    {
      "tag" : "text",
      "src" : "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget dignissim nunc, dapibus congue mi. Donec auctor eros orci, non semper lectus vulputate eget. Nunc at libero nisl. Ut id commodo quam.</p><p>Ut volutpat eros fringilla mi consequat, rutrum vehicula mi tristique. Aenean egestas mollis pretium.</p><p>Vestibulum et egestas libero. Integer sed quam quam. Cras cursus lorem id efficitur viverra. Mauris pretium nisl sed lectus fermentum pharetra.</p><p>Mauris massa velit, tincidunt nec justo eget, pellentesque hendrerit nisl. Integer nibh nisi, vehicula et aliquam vel, gravida eget sem. Nullam imperdiet dolor lorem, et commodo nisi interdum sed. Suspendisse gravida non velit sed sagittis.</p><p>In commodo massa sed lacus convallis, id placerat arcu blandit.</p>",
      "class" : "fit-size"
    },
    {
      "tag" : "img",
      "src" : "./images/image6.jpg",
      "class" : "fit-size"
    },
    {
      "tag" : "video",
      "src" : "https://www.youtube.com/watch?v=G3Jghjh_SC4",
      "class" : "fit-size"
    },
    {
      "tag" : "text",
      "src" : "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget dignissim nunc, dapibus congue mi. Donec auctor eros orci, non semper lectus vulputate eget. Nunc at libero nisl. Ut id commodo quam.</p><p>Ut volutpat eros fringilla mi consequat, rutrum vehicula mi tristique. Aenean egestas mollis pretium.</p><p>Vestibulum et egestas libero. Integer sed quam quam. Cras cursus lorem id efficitur viverra. Mauris pretium nisl sed lectus fermentum pharetra.</p><p>Mauris massa velit, tincidunt nec justo eget, pellentesque hendrerit nisl. Integer nibh nisi, vehicula et aliquam vel, gravida eget sem. Nullam imperdiet dolor lorem, et commodo nisi interdum sed. Suspendisse gravida non velit sed sagittis.</p><p>In commodo massa sed lacus convallis, id placerat arcu blandit.</p>",
      "class" : "fit-size"
    },
    {
      "tag" : "img",
      "src" : "./images/image7.png",
      "class" : "fit-size"
    },
    {
      "tag" : "img",
      "src" : "./images/image8.jpg",
      "class" : "fit-size"
    },
    {
      "tag" : "img",
      "src" : "./images/image9.jpg",
      "class" : "fit-size"
    },
    {
      "tag" : "img",
      "src" : "./images/image10.jpg",
      "class" : "fit-size"
    },
    {
      "tag" : "img",
      "src" : "./images/image11.jpg",
      "class" : "fit-size"
    },
    {
      "tag" : "img",
      "src" : "./images/image12.jpg",
      "class" : "fit-size"
    },
    {
      "tag" : "img",
      "src" : "./images/image13.jpg",
      "class" : "fit-size"
    },
    {
      "tag" : "img",
      "src" : "./images/image14.jpg",
      "class" : "fit-size"
    },
    {
      "tag" : "img",
      "src" : "./images/image15.jpg",
      "class" : "fit-size"
    },
    {
      "tag" : "img",
      "src" : "./images/image16.jpeg",
      "class" : "fit-size"
    },
  ],
};

const SwipeDetector = (element) => {
  let x_start = 0;

  element.addEventListener("pointerdown", (e) => {
    console.log(e);
    x_start = e.x;
    console.log("x inicio: " + e.x);
  });

  element.addEventListener("pointerup", (e) => {
    let x_swipe = e.x - x_start;
    console.log(e);
    console.log("x_swipe: " + x_swipe);
    if (x_swipe < -125) swipeToLeft();
    if (x_swipe > 125) swipeToRight();
  });

  const swipeToLeft = () => {
    console.log("Swipe to left!!!");
    console.log("slide antes: " + slide);
    moveToLeft();
  };

  const swipeToRight = () => {
    console.log("Swipe to right!!!");
    console.log("slide antes: " + slide);
    moveToRight();
  };
};

const leftDetector = (element) => {
  element.addEventListener("click", (e) => {
    moveToRight();
  });
};

const rightDetector = (element) => {
  element.addEventListener("click", (e) => {
    moveToLeft();
  });
};


/**
 * Move the slider one slide to the left
 */
const moveToLeft = () => {
  let slider = document.querySelector(".slider");
  if (slide < list_elements.items.length - 1){
    slide += 1;
    slider.style.transition = "all 1s ease-in-out";
    slider.style.marginLeft = -(slide * 100) + "%";
  }
};


/**
 * Move the slider to the right
 */
const moveToRight = () => {
  let slider = document.querySelector(".slider");
  if (slide > 0){
    slide -= 1;
    slider.style.transition = "all 1s ease-in-out";
    slider.style.marginLeft = -(slide * 100) + "%";  
  }
};

/**
 * Go to a determinated slide of the slider
 * 
 * @param {*} slideToGo 
 */
const goTo = (slideToGo) => {
  console.log("slideToGo: " + slideToGo + " slide: " + slide);
  let layerError = document.querySelector(".error");
  let slider = document.querySelector(".slider");
  layerError.innerHTML = "";
  layerError.style.display = "none";
  if ((slideToGo > 0) && (slideToGo <= list_elements.items.length)){
      console.log("Vamos a ... " + (slideToGo - 1));
      slider.style.transition = "all 0.5s ease-in-out";
      slider.style.marginLeft = -((slideToGo - 1) * 100) + "%";
      slide = parseInt(slideToGo - 1);    
  }else{
      layerError.style.display = "block";
      layerError.innerHTML = "Please, insert a number bewtween 1 and " + list_elements.items.length;
  }               
};

const createElementsOfSlider = (slider) => {
  slider.style.width = list_elements.items.length*100 + "%";
  console.log("Total elementos: " + list_elements.items.length);
  for (let i = 0; i < list_elements.items.length; i++) {
    let div = document.createElement("div");
    div.id = "slide" + i;
    div.className = "slider-content";
    //div.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16);
    div.style.margin = 0;
    div.style.padding = 0;
    div.style.color = "#FFFFFF";
    div.style.fontSize = 72 + "pt";
    div.style.fontFamily = "Verdana";
    div.style.fontWeight = "bold";
    div.style.width = 100 + "%";
    //div.innerHTML = (i < list_elements.items.length) ? list_elements.others[i] : i;
    //Creating element inside div
    if (list_elements.items[i].tag != "text"){
      let element = document.createElement(list_elements.items[i].tag);
      if (list_elements.items[i].tag === "video"){
        let source = document.createElement("source");
        element.style.width = 100 + "%";
        element.style.height = 100 + "%";
        element.controls = true;
        source.src = list_elements.items[i].src;
        source.type = "video/mp4";
        element.appendChild(source);
      }else{
        element.src = list_elements.items[i].src;
        element.className = list_elements.items[i].class;
      }
      div.appendChild(element);  
    }else{
      div.innerHTML = list_elements.items[i].src;
    }
    slider.appendChild(div);
  }
};

body {
    margin: auto;
    text-align: center;
    background-color: #F8A42B;
}
  
h1 {
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    text-align: center;
}

p {
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    text-align: justify;
    font-size: 10pt;
    color: #FFFFFF;
    font-weight: normal;
}
  
/*****************************************************/
/******************** Container **********************/
/*****************************************************/
  
.container {
    position: relative;
    margin: auto;
    border: 5px solid black;
    height: 300px;
    width: 50%;
    max-width: 650px;
    overflow: hidden;
}
  
/*****************************************************/
/***************** Slider Container ******************/
/*****************************************************/
.slider {
    display: flex;
    height: 100%;
    background-color: #000000;
}

.fit-size {
    max-width: 100%;
    max-height: 100%;
    font-size: 10pt;
    text-align: justify;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}

/*****************************************************/
/*********************** Selector ********************/
/*****************************************************/
.selector{
    text-align: center;
    margin: auto;
    padding-top: 20pt;
    padding-bottom: 20pt;
    font-size: 12 pt;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
}

.error{
    text-align: center;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 12 pt;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: yellow;
    color: red;
    display: none;
}


/*****************************************************/
/****************** Buttons navigation ***************/
/*****************************************************/
.slider-button{
    position: absolute;
    width: 38px;
    height: 38px;
    background-color: #FFF;
    opacity: 0.25;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    font-weight: bold;
    font-family: monospace;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
}

.slider-button:hover{
    opacity: 1;
}

#l-button{
    left: 10px;
}

#r-button{
    right: 10px;
}

<!DOCTYPE html>
<html>
    <header>
        <link rel="stylesheet" href="./css/styles.css">
        <script type="text/javascript" src = "./js/functions.js"></script>
        <meta charset="UTF-8">
    </header>
    <body>
        <div>
            <h1>Slider Scandiweb</h1>         
<!--             <div class = "container">
                <div class = "slider-container"></div>
                <div class = "window-container">
                    <div class = "left"></div>
                    <div id="window">
                        <div id = "l-icon"><br /><br /><br /><p>&#60;&#60;</p></div>
                        <div id = "r-icon"><br /><br /><br /><p>&#62;&#62;</p></div>
                    </div>
                    <div class = "right"></div>
                </div>
            </div> -->
            <div class = "container">
                <div class = "slider"> 
                </div>
                <div class = "slider-button" id = "l-button">&#60;</div>
                <div class = "slider-button" id = "r-button">&#62;</div>
            </div>
            <div class = "error"></div>
            <div class = "selector">
                Go to slide <input id = "selector" type = "text" value = "" placeholder = "Press enter to go ... " onChange = "goTo(this.value)" /> of 50 <button>Go To</button>
            </div>
        </div>    
    </body>
    <script type="text/javascript">
        var slide = 0;
        let slider = document.querySelector(".slider");
        //var elements = list_elements.total_elements;
        //Creation elements
        createElementsOfSlider(slider);
        SwipeDetector(slider);
        leftDetector(document.querySelector("#l-button"));
        rightDetector(document.querySelector("#r-button"));
    </script>
</html>

我做错了什么？我怎样才能毫无问题地从 youtube 或任何其他外部来源复制视频？

Answer 1

当您说要将 video/mp4 类型 URL 分配给 <video> 的 src 时，您提供的 URL 必须指向一个 mp4 视频。

您正指向 HTML 个文档。视频元素不支持 HTML 文档作为来源（因为 HTML 文档不是视频）。

本地文件中的跨域读取阻塞 (CORB)

Cross-Origin Read Blocking (CORB) in a local file

javascript

html

html5-video