47

是否可以在不使用 iframe 的情况下嵌入 youtube 视频的 html5 版本？

4

5 回答 5

30

这是一个没有 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>

于 2014-08-07T17:36:21.207 回答
11

是的。Youtube API是最好的资源。

嵌入视频有 3 种方式：

  • <iframe>使用标签嵌入 IFrame
  • 使用 IFrame Player API 嵌入 IFrame
  • AS3（和 AS2*）对象嵌入DEPRECATED

我认为您正在寻找其中的第二个：

使用 IFrame Player API 嵌入 IFrame

下面的 HTML 和 JavaScript 代码显示了一个简单的示例，该示例将 YouTube 播放器插入到 id 值为 ytplayer 的页面元素中。此处指定的 onYouTubePlayerAPIReady() 函数会在加载 IFrame Player API 代码时自动调用。此代码未定义任何播放器参数，也未定义其他事件处理程序。

<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&amp;rel=0&amp;hl=en_US&amp;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&amp;rel=0&amp;hl=en_US&amp;version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>

（替换yt-video-id为您的视频 ID）

JSFIDDLE

于 2013-09-10T18:48:23.227 回答
2

是的，但这取决于您所说的“嵌入”是什么意思；据我在阅读文档后所知，如果您想使用 iframe API 来解决问题，您似乎有几个选择。您可以使用 javascript 和 flash API ( https://developers.google.com/youtube/player_parameters ) 嵌入播放器，但这涉及在您的代码中创建 Flash 对象（我个人避免这样做，但不一定是您拥有的东西至）。以下是 Youtube API 开发文档中的一些有用部分。

如果您真的想绕过所有这些方法并在没有任何 iframe 的情况下包含视频，那么您最好的选择可能是创建一个可以连接到 Youtube 数据 API ( https://developers.google.com ) 的 HTML5 视频播放器/应用程序/youtube/v3/）。我不确定您的需求有多大，但如果您真的想使用任何 iframe 或 Flash 对象，这将是您的选择。

希望这可以帮助！

有用：

（https://developers.google.com/youtube/player_parameters）

使用 IFrame Player API 嵌入 IFrame

在 Player API 的 JavaScript 代码加载后，按照 IFrame Player API 说明在您的网页或应用程序中插入视频播放器。视频播放器构造函数中的第二个参数是一个指定播放器选项的对象。在该对象中， playerVars 属性标识玩家参数。

下面的 HTML 和 JavaScript 代码显示了一个简单的示例，该示例将 YouTube 播放器插入到 id 值为 ytplayer 的页面元素中。此处指定的 onYouTubePlayerAPIReady() 函数会在加载 IFrame Player API 代码时自动调用。此代码未定义任何播放器参数，也未定义其他事件处理程序。

...

使用标签嵌入 IFrame

在您的应用程序中定义一个标签，其中 src URL 指定播放器将加载的内容以及您要设置的任何其他播放器参数。标签的高度和宽度参数指定播放器的尺寸。

如果您自己创建元素（而不是使用 IFrame Player API 创建它），您可以将播放器参数直接附加到 URL 的末尾。URL 具有以下格式：

...

AS3 对象嵌入

对象嵌入使用标签来指定播放器的尺寸和参数。下面的示例代码演示了如何使用嵌入对象来加载自动播放与前两个示例相同的视频的 AS3 播放器。

于 2014-07-08T17:13:35.567 回答
0

使用对象标签：

<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/

于 2015-10-23T01:46:09.590 回答
0

由于 GDPR，使用 iframe 没有任何意义，您应该使用带有 embed 标签的 object 标签并使用 embed 链接。

<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 不会在您的网站上存储任何用户数据。

于 2020-05-06T08:10:46.083 回答