为啥 HTML 5 视频标签不适用于将 YouTube 视频用作源？

Posted 2023-05-07

【中文标题】为啥 HTML 5 视频标签不适用于将 YouTube 视频用作源？

【英文标题】：Why does an HTML 5 video tag not work for using a YouTube video as source?为什么 HTML 5 视频标签不适用于将 YouTube 视频用作源？

【发布时间】：2015-06-22 10:09:25

【问题描述】：

使用 Chrome，如果我查看 YouTube 的页面，例如 https://www.youtube.com/watch?v=S5CjKEFb-sM，我会看到以下 html5 负责显示视频：

<video class="video-stream html5-main-video" 
    style="width: 640px; height: 360px; left: 0px; top: 0px; 
           transform: none;" 
    src="blob:https%3A//www.youtube.com/71c0fdee-822a-4b58-9ed5-fef443f2e7fd">
</video>

为了验证，我将 CSS 设置为 display: none 并且视频消失了，因此应该验证这是显示视频的代码。现在，如果我在硬盘上创建一个文件为try.html:

<DOCTYPE html>
<video class="video-stream html5-main-video" 
    style="width: 640px; height: 360px; left: 0px; top: 0px; 
           transform: none;" 
    src="blob:https%3A//www.youtube.com/71c0fdee-822a-4b58-9ed5-fef443f2e7fd">
</video>

也就是说，只是DOCTYPE加上那个<video>标签，然后用Chrome打开这个try.html文件，我什么都看不到。

我了解 YouTube 建议的嵌入方法是 iframe，但我想知道为什么 try.html 不起作用，以及如何使其起作用？相关的是，blob:https%3A 部分是什么...如果我使用开发人员工具“在新选项卡中打开链接”，那么什么都不会显示以及如何显示？ （两个网址 blob:https%3A//www.youtube.com/a5837a85-ca81-48dc-99b8-48e69a9b4f64 和 https://www.youtube.com/a5837a85-ca81-48dc-99b8-48e69a9b4f64 都不起作用）。

【问题讨论】：

检查这个：w3schools.com/html/html_youtube.asp

我认为问题不是关于“什么可以嵌入视频”，而是更多关于 HTML5 以及它为什么不起作用以及有没有办法在新标签页中打开视频 URL 的问题跨度>

我很确定 Youtube 会阻止视频内容，除非 youtube.com 要求。

有一些适用于 Firefox 的 YouTube 视频下载器插件，他们可以通过某种方式下载 YouTube 视频...所以你是说他们伪造了 HTTP_REFERER？

【参考方案1】：

https://www.youtube.com/2c375ed8-2ad9-491b-aae9-9a6d6fefacc6">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>