具有自定义速度的嵌入式 YouTube 视频（例如 3）

Question

我在一个页面中嵌入了 YouTube 视频，并且有一个可以设置播放器速度的滑块。

我正在使用 player.setPlaybackRate(value);

问题是我想要范围从 0.5 到 3，但是播放器 API 将值限制为预定义的 [0.25, 0.5, 1, 1.25, 1.5, 2]。

在 YouTube 中，我可以使用 document.getElementsByTagName("video")[0].playbackRate = 3 轻松调整速度，但在 iframe 上我没有这样的访问权限。

Answer 1

很遗憾，您正在尝试从另一个域编辑 iframe 的内容。 none 的主要浏览器允许您通过 javascript 执行此操作。

我尝试并创建了 php 文件，该文件将获取 youtube 嵌入 iframe 的内容

<?php 
    $url = $_GET['url'];
    $contents = file_get_contents($url);
    echo $contents;
?>

但是 youtube 以某种方式阻止了不同的来源，它只给我黑屏。正如我猜测的那样，这是因为 youtube 使用 flash 播放器来嵌入视频（而不是像他们在网站上那样使用 html5）。

所以很抱歉，这是不可能的。

Answer 2

你在哪里看到玩家API限制了数值？在javascriptAPI中，可以使用setPlaybackRate to set the suggested playback rate, but it says there is no guarentee that what you send will be set. You should use getAvailablePlaybackRates to get the list of playback rates and then choose an appropriate one. You can figure out what rate it was actually set to by listening to the onPlaybackRateChangeevent。如果您尝试将其设置为 3，而这不是可用汇率之一，它将向 1 舍入到最接近的汇率。

Answer 3

编辑：这不再有效了。

这是由于同源政策。当 iframe 被根源（您的网站）访问时，它似乎也改变了 iframe 的源。因此无法从其他来源 (youtube.com) 加载视频。看我的 test on JSFiddle.

我认为它之前有效的事实是最近已修复的 XSS 安全问题。所以我无法想象在 youtube iframe 中修改某些东西甚至是可能的。至少不是这样。

感谢@maxple 指出！

原文post:

使用较新的浏览器和 HTML5 Iframe Sandbox Attribute:

应该可以做到这一点

通过该选项，您可以访问 iframe DOM 节点。

<iframe id="myframe" sandbox="allow-scripts" src="about:blank">    </iframe>

<script>
    var frame = document.getElementById("myframe");
    var fdoc = frame.contentDocument;

    fdoc.getElementsByTagName("video")[0].playbackRate = 3; // or whatever
</script>

查看此 post 了解更多信息。

Answer 4

您不能在 iFrame 中做同样的事情。

你在 Youtube 中所做的是编辑实际的视频标签，但从另一个网站这样做的唯一方法是通过 Google 提供的 API（由于 XSS 问题），如果他们决定只允许建议的值，除了做一些可能违反他们的服务条款的事情之外，你最好的办法是 contact Google 并要求他们允许第三级速度通过 API.

具有自定义速度的嵌入式 YouTube 视频（例如 3）

Embedded YouTube video with custom speed (e.g. 3)

javascript

api

video

youtube

youtube-api