How to change the playing speed of videos in HTML5?

javascript html performance video html5-video
Young picture Young · Jun 12, 2010 · Viewed 153.6k times · Source

How to change the video play speed in HTML5? I've checked video tag's attributes in w3school but couldn't approach that.Any help would be appreciated!

Answer

Jeremy Visser picture Jeremy Visser · Jun 12, 2010

According to this site, this is supported in the playbackRate and defaultPlaybackRate attributes, accessible via the DOM. Example:

/* play video twice as fast */
document.querySelector('video').defaultPlaybackRate = 2.0;
document.querySelector('video').play();

/* now play three times as fast just for the heck of it */
document.querySelector('video').playbackRate = 3.0;

The above works on Chrome 43+, Firefox 20+, IE 9+, Edge 12+.

Related questions

Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.? or function myJsFunc() { alert("myJsFunc"); } <a href="javascript:…

Read More
Fastest method to escape HTML tags as HTML entities?

I'm writing a Chrome extension that involves doing a lot of the following job: sanitizing strings that might contain HTML tags, by converting <, > and & to &lt;, &gt; and &amp;, respectively. (In other words, the …

Read More
Which browsers support <script async="async" />?

On December 1, 2009, Google announced support for asynchronous Google Analytics tracking. The asynchronous tracking is achieved using the async directive for the <script> tag. Which browsers support the async directive (<script async="async" />) and since which version?

Read More