Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
261 views
in Technique[技术] by (71.8m points)

javascript - 如何使用youtube iframe-api开始嵌入视频(how to start an embeded video with the youtube iframe-api)

I am new to coding and I am trying to learn how to use the youtube IFRAME to control embded videos.(我是编码的新手,我正在尝试学习如何使用youtube IFRAME来控制嵌入视频。)

The following code is mostly from youtube's api documentation.(以下代码主要来自youtube的api文档。) The only thing I added were the buttons and event listeners that are attached to them.(我添加的唯一内容是附加到它们的按钮和事件侦听器。)

Can someone explain to me why "play" button that I have created can't start the video?(有人可以向我解释为什么我创建的“播放”按钮无法启动视频吗?)

  // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '250', width: '300', videoId: 'M7lc1UVf-VE', events: { 'onReady': onPlayerReady, } }); } // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { event.target.playVideo(); } document.getElementById('pause').onclick = function() { player.pauseVideo(); }; document.getElementById('play').onclick = function() { player.playVideo(); }; 
 <html> <body> <div><button id= "pause">Pause</button></div> <div><button id= "play">Play</button></div> <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> <div id="player"></div> </body> 

  ask by Slyknight translate from so


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

It seems that the documentation of the iFrame API is either outdated or completely wrong.(iFrame API的文档似乎已过时或完全错误。)

The function which should initialize the player onYouTubeIframeAPIReady() will never fire thus a click on the play/pause buttons won't work because the variable player is undefined .(应该在YouTubeIframeAPIReady()上初始化播放器的函数将永远不会触发,因此单击播放/暂停按钮将不起作用,因为变量播放器 未定义 。)

To workaround this, you have to wait until the script you're loading into the freshly created <script> element has finished loading and inside the callback function you need to initialize the YT component by a call to it's own ready() function.(要解决此问题,您必须等到要加载到刚创建的<script>元素中的<script>完成加载,并且需要在回调函数内部通过调用其自己的ready()函数来初始化YT组件。)

This isn't mentioned anywhere.(这在任何地方都没有提及。)

Well, get rid of the complete onYouTubeIframeAPIReady function and replace it with this:(好吧,摆脱完整的onYouTubeIframeAPIReady函数并将其替换为:)

tag.onload = function() {

  YT.ready(function() {
    player = new YT.Player('player', {
      height: '250',
      width: '300',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
      }
    });
  });

};

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...