如何播放没有iframe的YouTube视频?

时间:2013-04-24 00:06:59

标签: html css mobile video

寻找在HTML,Javascript,PHP或CSS支持的视频播放器中显示YouTube视频的方法。可能是CSS。我并不反对下载视频并自己托管它需要,但我更愿意让google托管它。

任何想法?

3 个答案:

答案 0 :(得分:1)

当您嵌入视频时,您可以选择使用“旧嵌入代码”,它使用对象标记而不是iframe。这是一个例子:

<object width="560" height="315">
  <param name="movie" value="http://www.youtube.com/v/aBcDeFg?hl=en_US&amp;version=3"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed src="http://www.youtube.com/v/aBcDeFg?hl=en_US&amp;version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

答案 1 :(得分:0)

更好的方法:使用Yahoo Media Player!

只需在页面正文中包含此代码:
 <script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"> </script>
只需在页面正文中添加指向YouTube视频的链接即可。然后,当它被点击它将播放!此外,如果您添加多个视频/音频文件,那么它将包含播放列表中的所有视频/音频文件。这里有更多信息:http://webplayer.yahoo.com/或更多代码,以及此处的演示:http://webplayer.yahoo.com/get/
Shadowpat

答案 2 :(得分:0)

截至2015年1月27日:使用API​​作为目标代码已被弃用:

  

2015年3月9日

     

该文档已更新,以反映YouTube嵌入,YouTube Flash Player API和YouTube JavaScript播放器API已于2015年1月27日全部弃用。本文档的几个部分中出现了弃用警告将读者指向IFrame Player API作为替代方案。

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: '360',
      width: '640',
      videoId: 'M7lc1UVf-VE'
    });
  }
</script>

引用和代码均来自:https://developers.google.com/youtube/player_parameters

查看:https://developers.google.com/youtube/youtube_player_demo

页面来源显示API以html格式发出播放器,并带有实际视频显示的视频标签:

<div id="player" style="width: 100%; height: 100%;">
 <div class="html5-video-player unstarted-mode ytp-hide-controls" tabindex="-1" id="player_uid_7211231_1" data-version="/yts/jsbin/player-vflC8Yy7I/en_US/base.js" aria-label="YouTube Video Player">
      <div class="html5-video-container" data-layer="0">
           <video tabindex="-1" class="video-stream html5-main-video" controlslist="nodownload" style="width: 720px; height: 405px; left: 0px; top: -405px;"></video>
      </div>
      <div class="ytp-gradient-top" data-layer="1"></div>
      ...
 </div>
</div>