html - 将来自 youtube 的视频嵌入 HTML5

Question

我已经尝试了所有我读到的将 youtube 视频嵌入到我的 HTML5 中的方法，但它在任何浏览器中都不起作用。我得到的最好的是一个正方形，上面写着找不到该网站。我尝试过使用旧的嵌入代码，我尝试过使用 iframe...我也尝试过使用新的视频标签...我已经将每个代码转储到它们自己单独的部分(意味着不包含在 div 或类似的东西中)...它唯一包含的东西是主体本身...我也尝试了相反的方法，将所有这三种方法放在某种容器中，例如 div。并不是说合一或不合一会影响它的可玩性，但我正在尝试一切……我不明白为什么它不起作用

Answer 1

你没有展示你尝试过的没有用的东西，但我今天感觉很通灵，所以这里是一个疯狂的刺:

YouTube 目前正在提供如下所示的嵌入链接:

<iframe width="640" height="360"      
  src="//www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage"
  frameborder="0" allowfullscreen></iframe>

不寻常的是，URL——在 IFrame 标记的“src”属性中——没有指定协议(protocol)。

上面的 src 属性的格式是一种相对 URL，称为协议(protocol)相对 URL，它允许 embed 标记工作，无论您的页面是使用 http://还是 https://协议(protocol)访问。 (你不能在一个页面中混合这些)

但是——我猜这就是你出错的地方——如果你在本地打开一个 HTML5 文件，而不是通过网络服务器，它有一个 file://URL。因为相对 URL(包括这个奇怪的协议(protocol)相对 URL)总是从当前页面位置获取未指定的位，所以正在计算的完整 URL 是无效的:

file://www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage

要解决此问题，只需更改 src 属性以指定协议(protocol)，将相对 URL 更改为绝对 URL，该 URL 适用于同时使用 file://和 http://协议(protocol)的页面。

<iframe width="640" height="360"      
  src="http://www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage"
  frameborder="0" allowfullscreen></iframe>

缺点是您不能将其放在通过 https 传递的页面上。

从长远来看，您应该养成从真实 Web 服务器而不是文件 URL 进行测试的习惯。对于本地安装的测试服务器，WAMP/MAMP 是一个简单且流行的选择。