Javascript 无法使用<；加载youtube视频；视频>；在textfield中输入youtube url的标记

我正在开发一个模式窗口，该窗口允许用户粘贴视频url或从本地驱动器选择一个文件，然后使用html5的

标签预览

选项2.）在本地选择视频文件非常有效。但是，当我将youtube视频url粘贴到输入文本字段时，视频播放器显示加载指示器，然后停止。您无法播放视频，并且似乎无法成功加载

我查了谷歌浏览器的检查员，得到了这条消息

跨源读取阻塞（CORB）阻塞的跨源响应 ... 使用MIME类型text/html

我怀疑问题出在这方面

$('#modalInput_pasteURL').on('input',function(e){
    var videoUrl = $('#modalInput_pasteURL').val().trim();
    $(".video").attr("src", videoUrl);
});

我在做研究时读到，

必须用于包含或播放来自url的youtube视频。在这种情况下，我只想使用

标记，这样我只有一个视频容器

我错过了什么？有什么建议吗

下面是代码片段

HTML文件

<label>Paste Url here</label>
<input type="text" class="modal_inputbox" id="modalInput_pasteURL"/><br>

<label>Select Video</label>
<input type="file" class="modalbtn_browseFiles" id="modalBtn_choose_video_file"  value="Browse Video" accept="video/*"/><br>

<label>Video Preview</label>
<div class="modalContainer_filePreview" id="modalContainer_videoPreview">
<video controls class="video" width="510" height="200">
</video >
</div>

$('#modalInput_pasteURL').on('input',function(e){
    var videoUrl = $('#modalInput_pasteURL').val().trim();
    $(".video").attr("src", videoUrl);
});

$("#modalBtn_choose_video_file").on('change',function(event){
    var fileInput = document.getElementById('modalBtn_choose_video_file');
    var fileUrl = window.URL.createObjectURL(fileInput.files[0]);
    $(".video").attr("src", fileUrl);
});

---

谢谢。

这里有几个问题，甚至与代码无关。我甚至没有看你的代码，因为它不重要

您将无法获取YouTube URL并将其粘贴到

video

标记的

src

属性中并播放。YouTube不是这样工作的。

YouTube不通过普通URL提供视频服务。想象一下，如果他们这样做了，任何人都可以进入inspect工具，直接从YouTube下载视频

那么他们如何提供视频服务呢？通过水滴：

下面是一个关于BLOB是什么的很好的解释：

所以，你不能仅仅获取URL，这不是YouTube的工作方式。因此，我构建代码的方式是使用一个控制语句来检测是否有iframe标记，如果有，只插入iframe，如果没有，则插入视频URL

---

显然存在许多安全漏洞，但这超出了本答案的范围。如果你想走我略述的路线，做一些研究，问另一个问题，我们很乐意帮助你

这里有几个问题，甚至与代码无关。我甚至没有看你的代码，因为它不重要

您将无法获取YouTube URL并将其粘贴到

video

标记的

src

属性中并播放。YouTube不是这样工作的。

YouTube不通过普通URL提供视频服务。想象一下，如果他们这样做了，任何人都可以进入inspect工具，直接从YouTube下载视频

那么他们如何提供视频服务呢？通过水滴：

下面是一个关于BLOB是什么的很好的解释：

所以，你不能仅仅获取URL，这不是YouTube的工作方式。因此，我构建代码的方式是使用一个控制语句来检测是否有iframe标记，如果有，只插入iframe，如果没有，则插入视频URL

---

显然存在许多安全漏洞，但这超出了本答案的范围。如果你想走我略述的路线，做一些研究，问另一个问题，我们很乐意帮助你

在做了一些研究并考虑了zer00ne和Adam McGurk的评论后，我意识到加载youtube视频url的最佳方式是通过

，然后出现了隔离或获取youtube视频id的问题

然后，我在

中找到了一个相关的资源并给出了答案，从而解决了我的问题

function getYoutubeVideoId(url) {
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = url.match(regExp);
    if (match && match[2].length == 11) {
        return match[2];
    } else {
        return 'error';
    }
}

$('#modalInput_pasteURL').on('input',function(e){
    var videoUrl = $('#modalInput_pasteURL').val().trim();
    var videoId = getYoutubeVideoId(videoUrl);
    $('#modalContainer_videoPreview').html('<iframe width="510" height="200" src="//www.youtube.com/embed/' + videoId + '" frameborder="0" allowfullscreen></iframe>');
});

函数getYoutubeVideoId（url）{
var regExp=/^.*（youtu.be\/|v\/|u\/\w\/|embed\/|watch\？v=\&v=）（[^和\？]*）。/；
var match=url.match（regExp）；
if（match&&match[2]。长度==11）{
返回匹配[2]；
}否则{
返回“错误”；
}
}
$（'#modalInput_pasteURL'）。on（'input'，function（e）{
var videoUrl=$（'#modalInput_pasteURL'）.val（）.trim（）；
var videoId=getYoutubeVideoId（videoUrl）；
$（'#modalContainer_videoPreview'）.html（''；
});

---

当在文本字段中粘贴youtube url并将其加载到容器（如

）中时，这应该作为其他试图实现相同效果的人的参考

在做了一些研究并考虑了zer00ne和Adam McGurk的评论后，我意识到加载youtube视频url的最佳方式是通过

，然后出现了隔离或获取youtube视频id的问题

然后，我在

中找到了一个相关的资源并给出了答案，从而解决了我的问题

function getYoutubeVideoId(url) {
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = url.match(regExp);
    if (match && match[2].length == 11) {
        return match[2];
    } else {
        return 'error';
    }
}

$('#modalInput_pasteURL').on('input',function(e){
    var videoUrl = $('#modalInput_pasteURL').val().trim();
    var videoId = getYoutubeVideoId(videoUrl);
    $('#modalContainer_videoPreview').html('<iframe width="510" height="200" src="//www.youtube.com/embed/' + videoId + '" frameborder="0" allowfullscreen></iframe>');
});

函数getYoutubeVideoId（url）{
var regExp=/^.*（youtu.be\/|v\/|u\/\w\/|embed\/|watch\？v=\&v=）（[^和\？]*）。/；
var match=url.match（regExp）；
if（match&&match[2]。长度==11）{
返回匹配[2]；
}否则{
返回“错误”；
}
}
$（'#modalInput_pasteURL'）。on（'input'，function（e）{
var videoUrl=$（'#modalInput_pasteURL'）.val（）.trim（）；
var videoId=getYoutubeVideoId（videoUrl）；
$（'#modalContainer_videoPreview'）.html（''；
});

---

当在文本字段中粘贴youtube url并将其加载到容器（如

）中时，这应该作为其他试图实现相同效果的人的参考

YouTube视频可以通过使用

或

标记并加载嵌入到网页中。下面的演示是对OP代码的修改。它可以播放标准视频或YT视频。堆栈片段无法在SO站点上播放YouTube视频