Revision 901969 of HTMLMediaElement.playbackRate

Revision slug: Web/API/HTMLMediaElement/playbackRate
Revision title: HTMLMediaElement.playbackRate
Revision id: 901969
Created: Aug 16, 2015, 10:30:13 PM
Creator: markg
Is current revision? Yes
Comment

Tags:

Revision Content

The HTMLMediaElement.playbackRate property sets the rate at which the media is being played back. This is used to implement user controls for fast forward, slow motion, and so forth. The normal playback rate is multiplied by this value to obtain the current rate, so a value of 1.0 indicates normal speed.

If playbackRate is negative, the media is played backwards.

The audio is muted when the media plays backwards or if the fast forward or slow motion is outside a useful range (for example, Gecko mutes the sound outside the range 0.25 to 5.0).

The pitch of the audio is corrected by default and is the same for every speed. Some browsers implement the non-standard preservespitch property to control this.

Syntax

var dSpeed = video.playbackRate;
audio.playbackRate = 1.0;

Value

A double. 1.0 is "normal speed," values lower than 1.0 make the media play slower than normal, higher values make it play faster.

Example

var obj = document.createElement('video');
console.log(obj.playbackRate); // 1

Specifications

Specification	Status	Comment
{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement.playbackRate")}}	{{Spec2('HTML WHATWG')}}	No change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.playbackRate")}}	{{Spec2('HTML5 W3C')}}	Initial definition.

Browser compatibility

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
`playbackRate` property	{{CompatVersionUnknown}}	{{CompatGeckoDesktop("20.0")}}	{{CompatIE("9")}}	{{CompatUnknown}}	{{CompatUnknown}}

Feature	Android	Firefox Mobile (Gecko)	Firefox OS (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
`defaultPlaybackRate` property	{{CompatVersionUnknown}}	{{CompatGeckoMobile("20.0")}}	{{CompatVersionUnknown}}	{{CompatUnknown}}	{{CompatUnknown}}	{{CompatUnknown}}

Revision Source

<div>{{APIRef("HTML DOM")}}</div>

<p>The <strong><code>HTMLMediaElement.playbackRate</code></strong> property sets&nbsp;the&nbsp;rate at which the media is being played back. This is used to implement user controls for fast forward, slow motion, and so forth. The normal playback rate is multiplied by this value to obtain the current rate, so a value of 1.0 indicates normal speed.</p>

<p>If <code>playbackRate</code> is negative, the media is played backwards.</p>

<p>The audio is muted when the media plays backwards or if the fast forward or slow motion is outside a useful range (for example, Gecko mutes the sound outside the range <code>0.25</code> to <code>5.0</code>).</p>

<p>The pitch of the audio is corrected by default and is the same for every speed. Some browsers implement the non-standard <code>preservespitch</code> property to control this.</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="syntaxbox">
var <em>dSpeed</em> = <em>video</em>.playbackRate;
<em>audio</em>.playbackRate = 1.0;
</pre>

<h3 id="Value">Value</h3>

<p>A double. 1.0 is "normal speed," values lower than 1.0 make the media play slower than normal, higher values make it play faster.</p>

<h2 id="Example">Example</h2>

<pre class="syntaxbox">
var obj = document.createElement('video');
console.log(obj.playbackRate); // 1
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement.playbackRate")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No change from {{SpecName('HTML5 W3C')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.playbackRate")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td><code>playbackRate</code> property</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("20.0")}}</td>
   <td>{{CompatIE("9")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td><code>defaultPlaybackRate</code> property</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("20.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_Also" name="See_Also">See also</h2>

<ul>
 <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li>
</ul>

Revert to this revision