在没有iframe的情况下嵌入HTML5 YouTube视频？

Question

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

Answer 1

以下是没有iFrame的嵌入示例:

<div style="width:100%;height:100%;width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;">
  <embed src="http://www.youtube.com/v/GlIzuTQGgzs?version=3&amp;hl=en_US&amp;rel=0&amp;autohide=1&amp;autoplay=1" wmode="transparent" type="application/x-shockwave-flash" width="100%" height="100%" allowfullscreen="true" title="Adobe Flash Player">
</div>

与来自YouTube的常规iframe"嵌入"代码进行比较:

<iframe width="854" height="510" src="//www.youtube.com/embed/GlIzuTQGgzs" frameborder="0" allowfullscreen></iframe>

就HTML5而言,使用<object>像这样的标签(更正):

<object style="width:100%;height:100%;width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;" data="http://www.youtube.com/embed/GlIzuTQGgzs">
</object>

Answer 2

是.Youtube API是最好的资源.

嵌入视频有3种方法:

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

我想你正在寻找第二个:

IFrame使用IFrame Player API嵌入

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

(替换yt-video-id为您的视频ID)

的jsfiddle