播放嵌入式YouTube视频JS

Play embeded youtube video JS

本文关键字：JS 视频 YouTube 嵌入式 播放      更新时间：2023-09-26

我正在使用iframe标签嵌入YouTube视频，但无法访问对象的播放功能。 以下是我加载对象的方式：

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com"
  frameborder="0">

我已经引用了 API，但我真的不了解如何访问播放/暂停功能。 我尝试按如下方式使用 jquery，但捕获的对象没有所需的属性：

vid = $('#player')
vid.playVideo() // doesn't work

我也尝试使用swfsobject，如下所示：

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/embed/ngf03kCRw3s",
                       "ytapiplayer", "425", "356", "8", null, null, params, atts);
  </script>

但是，页面上不显示任何内容（控制台中没有错误）。 感谢帮助，谢谢，

使用 jQuery（和 JS）播放嵌入式 YouTube 视频的一种简单方法是将参数"autoplay=1"附加到 iframe 的 src 属性中。在您的情况下，代码将是这样的：

$("#player")[0].src += "&autoplay=1";

马丁·沃尔夫（Martin Wolf）的另一个例子：

$(document).ready(function() {
  $('#play-video').on('click', function(ev) {
 
    $("#video")[0].src += "&autoplay=1";
    ev.preventDefault();
 
  });
});
body {
  padding: 30px;
}
a {
  display: inline-block;
  margin-bottom: 20px;
  color: #000;
  font-family: Arial, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="play-video" href="#">Play Video</a><br />
 
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>

仅此而已。视频将开始播放。如果有人需要香草JS中的解决方案，请发表评论，当我有一些额外的时间时，我会回来更新答案。

相关文章：