是否可以在不使用 iframe 的情况下嵌入 html5 版本的 YouTube 视频?
这是一个不使用 iFrame 嵌入的示例:
<div style="width: 560px; height: 315px; float: none; clear: both; margin: 2px auto;">
<embed
src="https://www.youtube.com/embed/J---aiyznGQ?autohide=1&autoplay=1"
wmode="transparent"
type="video/mp4"
width="100%" height="100%"
allow="autoplay; encrypted-media; picture-in-picture"
allowfullscreen
title="Keyboard Cat"
>
</div>
与 YouTube 中的常规 iframe“嵌入”代码相比:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/J---aiyznGQ?autoplay=1"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
就 HTML5 而言,使用
<object>
标签,如下所示(已更正):
<object
style="width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;"
data="http://www.youtube.com/embed/J---aiyznGQ?autoplay=1">
</object>
是的。 Youtube API 是最好的资源。
有3种方式嵌入视频:
<iframe>
标签嵌入DEPRECATED
我认为您正在寻找其中的第二个:
下面的 HTML 和 JavaScript 代码显示了一个简单的示例,它将 YouTube 播放器插入到 id 值为 ytplayer 的页面元素中。加载 IFrame Player API 代码后,会自动调用此处指定的 onYouTubePlayerAPIReady() 函数。此代码没有定义任何播放器参数,也没有定义其他事件处理程序。
<div id="ytplayer"></div>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE'
});
}
</script>
这里有一些说明,您可以在开始使用 API 时查看。
不使用
iframe
的嵌入示例是使用 <object>
标签:
<object width="640" height="360">
<param name="movie" value="http://www.youtube.com/embed/yt-video-id?html5=1&rel=0&hl=en_US&version=3"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed width="640" height="360" src="http://www.youtube.com/embed/yt-video-id?html5=1&rel=0&hl=en_US&version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>
(将
yt-video-id
替换为您的视频 ID)
由于 GDPR,使用 iframe 没有任何意义,您应该将对象标签与嵌入标签一起使用,并使用嵌入链接。
<object width="100%" height="333">
<param name="movie" value="https://www.youtube-nocookie.com/embed/Sdg0ef2PpBw">
<embed src="https://www.youtube-nocookie.com/embed/Sdg0ef2PpBw" width="100%" height="333">
</object>
您还应该激活扩展数据保护模式功能以接收无cookie url。
type="application/x-shockwave-flash"
不一定要使用闪光灯
Nocookie则意味着数据仍在传输,即从YouTube加载的缩略图。但至少数据不再传递到广告网络(例如 DoubleClick)。 YouTube 不会在您的网站上存储任何用户数据。
是的,但这取决于你所说的“嵌入”是什么意思;据我在阅读完文档后得知,如果您想绕过使用 iframe API,您似乎有几个选择。您可以使用 javascript 和 flash API (https://developers.google.com/youtube/player_parameters) 嵌入播放器,但这涉及在代码中创建 Flash 对象(我个人避免这样做,但不一定是这样)你必须)。以下是 Youtube API 开发文档中的一些有用部分。
如果您真的想绕过所有这些方法并在没有任何类型的 iframe 的情况下包含视频,那么您最好的选择可能是创建一个可以连接到 Youtube 数据 API 的 HTML5 视频播放器/应用程序 (https://developers.google .com/youtube/v3/)。我不确定您的需求有多大,但如果您真的想避免使用任何 iframe 或 flash 对象,这将是一种可行的方法。
希望这有帮助!
有用:
(https://developers.google.com/youtube/player_parameters)
使用 IFrame Player API 嵌入 IFrame
在加载播放器 API 的 JavaScript 代码后,按照 IFrame 播放器 API 说明在网页或应用程序中插入视频播放器。视频播放器构造函数中的第二个参数是一个指定播放器选项的对象。在该对象中,playerVars 属性标识播放器参数。
下面的 HTML 和 JavaScript 代码显示了一个简单的示例,它将 YouTube 播放器插入到 id 值为 ytplayer 的页面元素中。加载 IFrame Player API 代码后,会自动调用此处指定的 onYouTubePlayerAPIReady() 函数。此代码没有定义任何播放器参数,也没有定义其他事件处理程序。
...
IFrame 使用标签嵌入
在您的应用程序中定义一个标签,其中 src URL 指定播放器将加载的内容以及您要设置的任何其他播放器参数。标签的高度和宽度参数指定播放器的尺寸。
如果您自己创建元素(而不是使用 IFrame Player API 创建它),则可以将播放器参数直接附加到 URL 末尾。 URL 的格式如下:
...
AS3 对象嵌入
对象嵌入使用标签来指定播放器的尺寸和参数。下面的示例代码演示了如何使用对象嵌入来加载 AS3 播放器,该播放器会自动播放与前两个示例相同的视频。
使用对象标签:
<object data="http://iamawesome.com" type="text/html" width="200" height="200">
<a href="http://iamawesome.com">access the page directly</a>
</object>
参考:http://debug.ga/embedding-external-pages-without-iframes/
是的,您可以通过两种方法在没有 Iframe 的情况下嵌入 YouTube 视频。
我已经在我的博客上详细解释了这一点,您可以阅读如何在没有 Iframe 的情况下嵌入 YouTube 视频