如何在移动设备上更改 HTML5 视频的播放速度?
Posted
技术标签:
【中文标题】如何在移动设备上更改 HTML5 视频的播放速度?【英文标题】:How to change the playing speed of videos in HTML5 on mobile? 【发布时间】:2016-05-25 03:35:54 【问题描述】:根据this site,这在playbackRate
和defaultPlaybackRate
属性中得到支持,可通过DOM 访问。但这不适用于移动设备。示例:
<!DOCTYPE html>
<video id="my-video" src="chubby-bubbies.ogv" ...></video>
<script type="text/javascript">
/* play video twice as fast */
document.getElementById("my-video").defaultPlaybackRate = 2.0;
document.getElementById("my-video").play();
/* now play three times as fast just for the heck of it */
document.getElementById("my-video").playbackRate = 3.0;
</script>
以上内容适用于 Chrome,也适用于桌面版 Firefox 20 and above。
【问题讨论】:
我认为这与移动端 html 视频的限制有关。在用户点击播放视频之前,您无法控制视频元素。您不能通过 JS 强制视频开始播放。 【参考方案1】:答案很简单,移动 Chrome (android) 不支持播放速率更改,即使该网站表示支持:https://developer.mozilla.org/en/docs/Web/API/HTMLMediaElement#AutoCompatibilityTable
这是移动端播放速率变化支持的真实浏览器:
Chrome 20+ ✔ 火狐 20+ ✔ IE 9+ ✔ Safari 6+ ✔ Opera 15+ ✔ 移动 Chrome (Android) ✖ 移动 Firefox 24+ ✔ IE 移动 ✖ 移动版 Safari 6+ (ios) ✔ Opera 手机 ✖我创建了一个网站并通过首先将以下内容添加到 web.config 文件来对其进行测试:
<system.webServer>
<staticContent>
<mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
</staticContent>
</system.webServer>
然后我将一个简单的视频上传到我的网站并上传到 Azure 以在不同的浏览器中进行测试:http://pandasneezy.azurewebsites.net/
我建议您使用 Mobile Firefox 24+,它应该可以正常工作
:
document.getElementById("my-video").playbackRate = 3.0;
【讨论】:
在 firefox HTML5 视频播放速率有效。知道如何调整 youtube 嵌入式视频的播放速率。我尝试使用 youtube 的 javascript API,但它不适用于 firefox 和 chrome。 看看这个:***.com/questions/22604934/… 我查过了。player.setPlaybackRate(2);
不适用于移动 chrome/firefox。它仍然以 1 倍的速度播放
Mobile Firefox 24+ ✔ 应该是 ✖ 那么?
是的,Mobile Firefox 24+ 是 ✖ 移动版。以上是关于如何在移动设备上更改 HTML5 视频的播放速度?的主要内容,如果未能解决你的问题,请参考以下文章