标签: youtube-iframe-api

目前,我们有一个YouTube iFrame API设置,其中包含以下(漂亮的样板)代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
  var player;
  YT.ready(function() {
    player = new YT.Player('player', {
      videoId: 'iyBaInK2TsI',
      width: 200,
      height: 200,
      events: {
        onReady: "onReady",
        onStateChange: "onStateChange",
        onPlaybackQualityChange: "onPlaybackQualityChange",
        onError: "onPlayerError"
      },
      playerVars: {
        fs: 0, // hide fullscreen button by default
        playsinline: 1, // make the player not go fullscreen when playing on ios
        modestbranding: 1, // hide youtube logo by default - we say 'powered by youtube'
        controls: 0, // hide controls by default
        showinfo: 0, …

我想在 iframe youtube 360​​ 视频播放器上设置一个 javascript 侦听器，它可以捕获正在旋转的 360 全景图的平移/倾斜坐标。

有谁知道这是否可能或 youtube 360​​ 播放器的 api 的一些文档？我自己找不到任何东西。

当我尝试autoplay在没有焦点的Google Chrome标签中创建YouTube iframe播放器时，直到标签获得焦点，视频才开始播放。即使手动呼叫playVideo也无法播放视频。起初，我认为这是该新功能的一部分，该功能可以阻止YouTube视频在新打开的标签页中播放，但这似乎只会影响Google Chrome。

您可以通过以下操作随意复制该问题：

• 转到http://www.tandem.io并创建一个房间
• 转到您在Chrome和firefox（或Opera）中新创建的房间
• 使Opera中的播放器静音
• 确保Chrome标签页没有焦点
• 将YouTube视频添加到Opera中的播放列表
• 在标签页/窗口处于活动状态之前，视频无法在Chrome中播放

我发现最新的iOS 10 beta 5,YouTube视频不能在设备上内联播放(我的iPhone 6),但它们在模拟器上播放.

我相信这是从早期的iOS测试版改变的新行为.

视频播放,但全屏显示.例如,使用YouTube帮助程序库,调用

[self.playerView loadWithVideoId:@"M7lc1UVf-VE"playerVars:@ {@"playsinline":@(1)}];

任何想法如何让视频再次内联播放？

似乎 Youtube iframe API 最近在他们的 iframe API 中引入了一个错误。

这是一个错误示例，直接从Youtube iframe 演示页面中提取：

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://google-developers.appspot.com').
g.C @ www-widgetapi.js:116
g.G @ www-widgetapi.js:113
setInterval (async)
ab @ www-widgetapi.js:89
kb @ www-widgetapi.js:114
W @ www-widgetapi.js:98
Y @ www-widgetapi.js:118
createYTPlayer @ as3_demo_functions.js:385
onYouTubePlayerAPIReady @ as3_demo_functions.js:424
(anonymous) @ www-widgetapi.js:140
(anonymous) @ www-widgetapi.js:140
10:33:24.521 

知道如何解决这个问题吗？据说设置origin应该防止这种情况发生，但似乎他们没有origin在他们的 JS 中正确使用。

我已将此 iframe 代码附加到我的纯 html 页面。在这里，我想在页面加载时进行自动播放。我在 Firefox 中尝试过，它对我来说工作正常。当我加载 chrome 时，它​​没有自动播放。

我的代码是 <iframe width="420" height="345" src="https://www.youtube.com/embed/qsP3Y4hHyeM?autoplay=1"> </iframe>

它适用于 Firefox 浏览器。但是当我加载到 chrome 浏览器时它不起作用。

有人可以帮我吗？

我必须做额外的参数吗？

谢谢你。

我能够在我的 Angular 6 应用程序中使用 Youtube Iframe API（以某种方式）。但是，我想从我控制的列表中为它提供动态 videoIds。我的计划是监听来自播放器的事件，然后在播放完当前视频后加载另一个视频。但我似乎无法解决这个问题。我仍在学习 Typescript 和 Angular，我很好奇为什么我从 IFrame API 播放器中调用的任何函数调用的任何方法都会得到 Uncaught TypeError：

这是我的代码：

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { Video } from '../shared/model/video.model';
import { Subscription } from 'rxjs';
import { VideoPlayerService } from '../shared/services/video-player.service';

@Component({
  selector: 'ntv-video-player',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.css']
})
export class VideoPlayerComponent implements OnInit, AfterViewInit {

  player;
  video: Video;
  videos: Video[];
  videoSubscription: Subscription;

  constructor(private videoService: VideoPlayerService) { }

  ngAfterViewInit() {
    const doc = (<any>window).document;
    const playerApiScript = doc.createElement('script'); …

HTML：

<div class="video">
  <iframe src="https://www.youtube.com/embed/bRhZUF47p2E?version=3&amp;rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;mute=1&amp;loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

CSS：

.video {
  width: 100%;
  height: 200px;
  border: 1px solid red;
  overflow: hidden;
  position: relative;
}
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JSFIDDLE： http : //jsfiddle.net/pj2utq4v/

问题：如何强制 iframe 为父 div 宽度的 100%。由于父 div 的高度只有 200 像素，因此 iframe 视频将被裁剪，这对我来说也没有问题。

我正在使用这个Youtube Iframe Api。自定义播放率在网络上运行良好，而不是在移动浏览器上运行。

HTML：

<iframe id="ws-frame" width="640" height="360" src="https://www.youtube.com/embed/HREjplMivXE?enablejsapi=1&rel=0&webm=1"frameborder="0" allowfullscreen>

<select id="speed">
    <option>0.25</option>
    <option>0.5</option>
    <option selected="selected">1</option>
    <option>1.5</option>
    <option>2</option>
</select>

JavaScript：

$('#speed').on('change', function () {
    player.setPlaybackRate($(this).val());
});

如何让它在移动浏览器中工作。

我正在为内容管理系统管理 UI 构建扩展。该扩展由 CMS 在沙盒 iframe 中托管。

扩展的目的是嵌入 YouTube 视频，以便用户能够看到其预览。所以它是沙盒 iframe 中的一个 iframe。

我遇到的问题是沙箱（父 iframe）没有allow-presentation允许，这导致在 YouTube 嵌入代码中触发以下异常：

DOMException: Failed to construct 'PresentationRequest': The document is sandboxed and lacks the 'allow-presentation' 

视频工作正常，但未处理的错误正在生成不需要的调试断点，并向浏览器控制台发送垃圾邮件。

我试图用?fs=0参数禁用全屏模式，但仍然调用代码并且仍然抛出错误。

有没有办法使嵌入代码在没有启用允许呈现的 iframe 中工作而不会出错？