具有自定义速度的嵌入式YouTube视频(例如3)
Embedded YouTube video with custom speed (e.g. 3)
我在一页中嵌入了一个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上我没有这种访问权限。
您在哪里看到播放器 API 限制了这些值?在javascript API中,您可以使用setPlaybackRate来设置建议的播放速率,但是它说不能保证您发送的内容将被设置。 您应该使用 getAvailablePlaybackRates 获取播放速率列表,然后选择适当的播放速率。您可以通过收听onPlaybackRateChange事件来计算它实际设置的速率。如果您尝试将其设置为 3 并且这不是可用速率之一,它将向 1 舍入到最接近的速率。
编辑:这不再有效了。
这是由于同源策略。当根来源(您的网站)访问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>
有关更多信息,请参阅此帖子。
你不能在iFrame中做同样的事情。
您在 Youtube 中所做的是编辑实际的视频标签,但从另一个网站执行此操作的唯一方法是通过 Google 提供的 API(出于 XSS 问题),如果他们决定只允许建议的值,您最好的机会是做一些可能违反他们服务条款的事情, 是联系谷歌并要求他们通过API允许第三级速度。
不幸的是,您正在尝试从另一个域编辑iframe的内容。 没有一个主流浏览器允许你通过JavaScript来做到这一点。
我尝试并创建了PHP文件,该文件将获取YouTube嵌入iframe的内容
<?php
$url = $_GET['url'];
$contents = file_get_contents($url);
echo $contents;
?>
但不知何故,YouTube阻止了不同的起源,它只给了我黑屏。正如我猜测的那样,这是因为YouTube使用Flash Player嵌入视频(而不是像在网站上那样使用HTML5)。
所以我很抱歉,但这是不可能的。
- RegEx删除空属性?例如,如果(class=“”||class=“”)移除;否则就下课
- 视频HTML没有'无法在Internet Explorer 11上工作
- 播放当前视频时如何停止其他视频?JavaScript
- 使用Facebook live API创建实时视频对象时的隐私设置
- Brightcove获取/显示HTML中的当前视频标题和描述
- Twilio-显示所有连接参与者的远程参与者视频
- WebRTC视频聊天可以在FF中使用,但不能在Chrome中使用
- 是否可以使用iframe API在iOS浏览器上播放youtube视频
- 如何检查用户在html5视频播放器中观看了完整的视频
- Fullpage.js-视频+背景在同一部分
- html5视频中的Youtube类型注释
- 角度p2p视频聊天-远程流是黑视频
- tiltSlider播放/暂停视频元素(如果li有当前类)
- 可以在响应时隐藏iphone上的“播放”按钮以进行视频播放
- 在三个.js中创建球体(例如地球)的磁力线
- Javascript-在视频中跟踪鼠标位置
- 具有自定义速度的嵌入式YouTube视频(例如3)
- 将Firefox选项卡录制为视频,例如在chrome上截屏
- 使用javascript控制视频(例如streamcloud)
- 是否可以使用用户'的视频卡,例如使用WebGL或Flash