【发布时间】：2021-02-02 19:56:18
【问题描述】：
我正在尝试在本地文件中复制 youtube 视频。
我的开发是一个构建滑块的应用程序，在一些幻灯片中我设置了来自 youtube 或本地视频的视频。当我设置本地视频时，即使我可以毫无问题地重现视频，它也没有问题。
但是当我从 youtube 设置视频时，我遇到了这个问题。
跨域读取阻塞 (CORB) 阻止了跨域响应 MIME 类型为 text/html。详情请参阅。
如果我将我的开发上传到服务器，我会遇到同样的错误。
这是我的代码...
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><<</p></div>
<div id = "r-icon"><br /><br /><br /><p>>></p></div>
</div>
<div class = "right"></div>
</div>
</div> -->
<div class = "container">
<div class = "slider">
</div>
<div class = "slider-button" id = "l-button"><</div>
<div class = "slider-button" id = "r-button">></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 或任何其他外部来源复制视频？
【问题讨论】：
标签： javascript html html5-video