CODEWITHSUNDEEP
javascriptandroidhtmlmobile
Rajesh Kanna
Rajesh Kanna

Reputation: 73

How to change the playing speed of videos in HTML5 on mobile?

According to this site, this is supported in the playbackRate and defaultPlaybackRate attributes, accessible via the DOM. But this is not working on mobile. Example:

<!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>

The above works on Chrome, and also Firefox 20 and above on desktop.

Upvotes: 3

Views: 20156

Answers (1)

Tobias Kullblikk
Tobias Kullblikk

Reputation: 226

The answer is simply that Mobile Chrome (Android) doesn’t support playbackRate changes even tho this website says it does: https://developer.mozilla.org/en/docs/Web/API/HTMLMediaElement#AutoCompatibilityTable

This is the real browser supported by playbackRate changes on mobile:

  • Chrome 20+ ✔
  • Firefox 20+ ✔
  • IE 9+ ✔
  • Safari 6+ ✔
  • Opera 15+ ✔
  • Mobile Chrome (Android) ✖
  • Mobile Firefox 24+ ✔
  • IE Mobile ✖
  • Mobile Safari 6+ (iOS) ✔
  • Opera Mobile ✖

I created a website and tested it by first adding the following to the web.config-file:

<system.webServer>
    <staticContent>
           <mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
    </staticContent>
</system.webServer>

Then I uploaded a simple video to my website and uploaded it to Azure for testing in the different browsers: http://pandasneezy.azurewebsites.net/

I suggest you use Mobile Firefox 24+, and it should work just fine with : document.getElementById("my-video").playbackRate = 3.0;

Upvotes: 2

Related Questions