具有自定义速度的嵌入式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

您在哪里看到播放器 API 限制了这些值？在javascript API中，您可以使用setPlaybackRate来设置建议的播放速率，但是它说不能保证您发送的内容将被设置。 您应该使用 getAvailablePlaybackRates 获取播放速率列表，然后选择适当的播放速率。您可以通过收听onPlaybackRateChange事件来计算它实际设置的速率。如果您尝试将其设置为 3 并且这不是可用速率之一，它将向 1 舍入到最接近的速率。

Answer 2

编辑：这不再有效了。

这是由于同源策略。当根来源（您的网站）访问iframe时，它似乎也会改变iframe的起源。因此，视频无法从其他来源加载 （youtube.com）。请参阅我在 JSFiddle 上的测试。

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

感谢@maxple指出！

---

原文：

这应该可以在较新的浏览器和HTML5 Iframe沙盒属性中实现：

使用该选项，您可以访问 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>

有关更多信息，请参阅此帖子。

Answer 3

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

您在 Youtube 中所做的是编辑实际的视频标签，但从另一个网站执行此操作的唯一方法是通过 Google 提供的 API（出于 XSS 问题），如果他们决定只允许建议的值，您最好的机会是做一些可能违反他们服务条款的事情， 是联系谷歌并要求他们通过API允许第三级速度。

Answer 4

不幸的是，您正在尝试从另一个域编辑iframe的内容。 没有一个主流浏览器允许你通过JavaScript来做到这一点。

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

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

但不知何故，YouTube阻止了不同的起源，它只给了我黑屏。正如我猜测的那样，这是因为YouTube使用Flash Player嵌入视频（而不是像在网站上那样使用HTML5）。

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