javascript 不使用iframe嵌入HTML5 YouTube视频?

u3r8eeie  于 2023-03-06  发布在  Java
关注(0)|答案(5)|浏览(183)

不使用iframe就能嵌入html5版本的youtube视频吗?

9bfwbjaz

9bfwbjaz1#

以下是不使用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>
dgtucam1

dgtucam12#

是的。Youtube API是最好的资源。
有3种方法可以嵌入视频:

  • 使用<iframe>标签嵌入IFrame
  • 使用IFrame播放器API嵌入IFrame
  • AS3(和AS2*)对象嵌入**DEPRECATED**

我想你要找的是第二个:

使用IFrame播放器API嵌入IFrame

下面的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&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>

(用您的视频ID替换yt-video-id
JSFIDDLE

hwazgwia

hwazgwia3#

由于GDPR,使用iframe没有意义,您应该使用object标签和embed标签,同时使用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网址。

type="application/x-shockwave-flash"

不一定要使用闪光灯
然而,Nocookie意味着数据仍在传输,即从YouTube加载的缩略图。但至少数据不再传递给广告网络(如DoubleClick)。YouTube也不会将用户数据存储在你的网站上。

4dbbbstv

4dbbbstv4#

是的,但这取决于你所说的"嵌入"是什么意思;就我所知,在阅读完这些文档后,如果你想使用iframe API,你似乎有几个选择。(https://developers.google.com/youtube/player_parameters)来嵌入播放器,但这涉及到在代码中创建Flash对象(这是我个人避免的,但不一定是你必须避免的)下面是Youtube API的开发文档中的一些有用的部分。
如果你真的想绕过所有这些方法,并且不使用任何类型的iframe来包含视频,那么你最好的选择可能是创建一个HTML5视频播放器/应用程序,它可以连接到Youtube数据API(https://developers.google.com/youtube/v3/)。我不确定你的需求有多大,但如果你真的想绕过任何iframe或flash对象,这将是一条路。
希望这有帮助!

    • 有用:**

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

    • 使用IFrame播放器API嵌入IFrame**

按照IFrame Player API说明,在加载Player API的JavaScript代码后,将视频播放器插入网页或应用程序。视频播放器构造函数中的第二个参数是指定播放器选项的对象。在该对象中,playerVars属性标识播放器参数。
下面的HTML和JavaScript代码显示了一个简单示例,该示例将YouTube播放器插入到id值为ytplayer的页面元素中。加载IFrame Player API代码后,将自动调用此处指定的onYouTubePlayerAPIReady()函数。此代码不定义任何播放器参数,也不定义其他事件处理程序。
...

    • IFrame使用标记嵌入**

在应用程序中定义一个标记,其中的src URL指定播放器将加载的内容以及要设置的任何其他播放器参数。标记的height和width参数指定播放器的尺寸。
如果您自己创建元素(而不是使用IFrame Player API创建),则可以将播放器参数直接附加到URL的末尾。URL的格式如下:
...

    • AS3对象嵌入**

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

azpvetkf

azpvetkf5#

使用对象标记:

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

相关问题