我正在寻找一个解决方案,使用Youtube iframe API在我的应用程序上运行Youtube视频时如何处理关键事件.遗憾的是找不到任何东西.已经浏览了这个文档https://developers.google.com/youtube/iframe_api_reference#Events但似乎玩家不会触发任何与密钥相关的事件(例如:onkeydown,keypress,keyup).

我尝试将事件直接添加到提供的代码,但它没有用.

 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('trailer_video', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            // 'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
            'onkeydown': myfunction    // custom event 
          }
        });
      }

有什么办法可以在按下箭头键时特别处理键事件吗？

PS:我不知道我可能在这里错了,但通常当我在视频缓冲时按箭头键时,我看到一串点移动给了我一个暗示,玩家确实检测到这些事件并做出响应.

更新问题

由于下面的答案表明哪种方式在某种程度上是一种解决方案,但由于Youtube还处理左右箭头键事件,当光标在视频上时也可以使用它,我关注的是,我如何处理上下事件箭头键没有被Youtube处理,只有当我实现自定义事件处理程序时光标不在视频上才能工作.

我一直在使用Youtube JavaScript API V3开发自定义播放器.这是我的代码的一部分:

在index.html我:

<div class="player_music-progressBar" id="player_music-progressBar"><div></div></div>

styles.css:

.player_music-progressBar {
    position: relative;
    float: left;
    width: 100%;
    height: 6px;
    background-color: #444444;
    margin-top: 1px;
    cursor: pointer;
}

.player_music-progressBar div {
    height: 100%;
    width: 0px;
    background-color: #ccc;
}

而且,在我JS这里是进行条形动画的功能:

function convert_time(seconds) {
    var s = seconds,
    h = Math.floor(s/3600);
    s -= h*3600;
    var m = Math.floor(s/60);
    s -= m*60;

    if(seconds >= "3600") {
        return "0" + h + ":" + (m < 10 ? "0" + m …

使用 YouTube Iframe API，我在 Safari 9.1, OS X Yosemite 中收到以下错误。

无法向http://www.youtube.com发布消息。收件人有来源https://www.youtube.com

该页面可以在其他浏览器（例如 Firefox、Chrome 等）中运行。此外，事实证明它仅在一台特定机器上损坏。它可以在另一台运行相同操作系统和浏览器的机器上运行。

我不知道从哪里开始调试这个。

生成的 iframe HTML 代码如下所示：

<iframe id="myVideo" frameborder="0" allowfullscreen="1" title="YouTube video player" width="200" height="200" src="http://www.youtube.com/embed/?html5=1&amp;showinfo=0&amp;autoplay=0&amp;rel=0&amp;controls=1&amp;playsinline=1&amp;enablejsapi=1&amp;origin=http%3A%2F%2Fwww.example.com"></iframe>

JavaScript 代码是这样的：

...
vid_frame = new YT.Player(id, {
    height: '200',
    width: '200',
    videoId: id,
    playerVars: {
       html5: 1,
       showinfo: showVideoInfo,
       autoplay: 0,
       rel: showRelatedVideos,
       controls: showPlayerControls,
       playsinline: 1
    },
    events: {
        onReady: onPlayerReady
    }
});

我觉得有一个浏览器设置阻止了网站和 YouTube API 之间的通信，但错误只是说https://www.youtube.com正在尝试向http://www.youtube.com（而不是https）发送某些内容。

我尝试手动将其更改http为 …

我正在使用angular 2,typescript和YouTube API构建一个Web应用程序,以便在用户登录后将播放器添加到页面中.

因此,一旦登录,该应用程序将加载以下组件:

export class MyComponent implements OnInit {
  myService: MyService;

  constructor( private _myService: MyService ) {
    this.myService = _myService;
  }

  ngOnInit() {
   this._myService.loadAPI();
  }

}

组件html包含以下标记:

<iframe id="player" type="text/html" width="640" height="360"
      src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
      frameborder="0" allowfullscreen></iframe>

最后,该服务具有以下内容:

  player: YT.Player;

  loadAPI(){
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    console.log('API loaded'); // this is shown on the console.
  }

  onYouTubeIframeAPIReady(){
    this.player = new YT.Player('player', {
      events: {
        'onReady': this.onPlayerReady,
        'onStateChange': this.onPlayerStateChange
      }
    });
    console.log('youtube iframe api …

To reproduce the problem in Stackblitz, click GO to navigate to the component containing iframe, it works now, then go back and forward, the iframe disappears. You have to refresh the page to show the iframe again.

I tried some workaround :

• I tried to release the object in ngOnDestroy window['onYouTubeIframeAPIReady'] = null; but not success

This is the code how to create iframe

init() {
  var tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, …

YouTube Android 播放器 API SDK 已完全弃用。YouTube 不再支持或维护它。因此需要在Android中实现YouTube IFrame Player API。

播放 YouTube 视频时，显示“初始化 YouTube 播放器时出错”消息。

我有一个像这样的功能:

function CreateYoutubePlayer(alpha, bravo, charlie, delta, echo) {
    var s = document.createElement("script");
    s.src = "//www.youtube.com/iframe_api";
}

加载的脚本需要一个名为的全局函数onYouTubeIframeAPIReady.如何在上述功能中创建此功能,以便可以全局访问.

我有一个网络应用程序,它使用YouTube Iframe API将歌词和和弦与YouTube歌曲同步.对于我们来说,嵌入式视频在没有全屏的情况下进行内联播放至关重要.否则用户无法看到页面上的歌词和和弦,应用程序将毫无意义.

这是演示.

我们从iphone获得50%的流量,但是iphone播放youtube视频总是全屏.

以下是嵌入视频的代码

var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: $("#ytid").attr("value"),
    playerVars: {'theme':'light','color':'white','modestbranding':1,'rel':0},
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });

在网上寻找解决方案,我们尝试了一些修复,但没有一个在iphone上工作.如果我们相信它可行,我们也准备开发Swift应用程序.然而,网络搜索也表明相反.

1. 是否有可靠的解决方法来内联播放YouTube Iframe API视频？
2. 我们可以通过开发本地IOS应用程序来解决我们的问题吗？

Youtube的IFrame API不再适用于我.双方onYouTubeIframeAPIReady()并onYouTubePlayerReady()得到执行.但是,当尝试加载/播放视频时,我收到以下错误:

base.js:2575 Uncaught TypeError: Cannot read property 'g' of null
    at jL (base.js:2575)
    at nL (base.js:2567)
    at PU.g.h.nh (base.js:5853)
    at E0 (base.js:3841)
    at q1.g.h.Lr (base.js:6904)
    at q1.g.h.Dy (base.js:6905)
    at r1 (base.js:3909)
    at L1.g.h.Vn (base.js:6937)
    at L1.g.h.nN (base.js:6679)
    at g.bD.g.h.V (base.js:5529)

以下是我使用IFrame API的方法

// Load YouTube Player
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Create YouTube Player
var jukeBoxYoutubePlayer;
function onYouTubeIframeAPIReady() {
    console.log("iframe api ready");

    jukeBoxYoutubePlayer = new YT.Player('youtube_player', …

我将YouTube iframe播放器嵌入到ios应用程序中。几天前一切正常，并且加载正常，然后在测试该应用程序时，我注意到它不再播放某些视频，并且不确定是什么原因造成的。我用仍然可以在YouTube应用程序上播放的多个视频进行了测试，但是什么时候不再可以在我的应用程序中播放。将显示视频的缩略图，并在我按播放时立即在播放器窗口中显示“此视频不可用”。有些视频仍然可以正常播放，这让我知道videoID和视频加载正常。

这是我用来加载视频的代码：

    let playerVars: [AnyHashable: Any] = ["playsinline" : 1]
    self.playerView.load(withVideoId: videoID, playerVars: playerVars)

以下是两张有关播放前后YouTube Iframe播放器显示的图像。 影片预览

视频不可用

我看到有些人遇到了类似的问题，并且我尝试按照他们的示例来解决此问题，但到目前为止，对我来说没有任何帮助。谁能帮我解决这个问题？

固定

通过将上面的第一行代码更改为此，我终于能够找到解决此问题的方法。

let playerVars: [AnyHashable: Any] = ["playsinline" : 1,
                                      "origin": "https://www.youtube.com"]