将来自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"属性中 - 没有指定协议.

上面的src属性的格式是一种相对URL,称为协议相对URL,它允许embed标记工作,无论您的页面是使用http://或https://协议进行访问.(您不允许在一个页面中混合使用这些内容)

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

文件://www.youtube.com/embed/sLAEg5aTXAE功能= player_detailpage

要修复,只需更改src属性以指定协议,将相对URL更改为绝对URL,该URL适用于同时使用file://和http://协议的页面.

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

缺点是你不能把它放在通过https传递的页面上.

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