CODEWITHSUNDEEP
ipadhtmlhtml5-audio
Sarang
Sarang

Reputation: 11

HTML 5 audio.playbackRate not working in iPad but works on Safari on Windows

Following code does not have any effect (audio continues to play in the same manner before pressing the PlayFast button iPad. It works beautifully on Safari on windows box

function playFast() 

       { 
            var myVideo = document.getElementsByTagName('audio')[0]; 
            myVideo.playbackRate = myVideo.playbackRate + 1; 
            alert(myVideo.playbackRate);
       }

Initially the playbackRate is set to 1

Can any one please help.

Upvotes: 1

Views: 3744

Answers (3)

mlb
mlb

Reputation: 681

You can set the audio or video playbackRate property to nonzero values to play media in slow motion (values >0 and <1) or fast forward (values >1) in Safari on the desktop and iOS 6+.

Source: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-DontLinkElementID_1

Upvotes: 1

Arnaud Leyder
Arnaud Leyder

Reputation: 7002

To give an updated answer with the official statement from Apple on iOS:

You can set the audio or video playbackRate property to nonzero values to play media in slow motion (values >0 and <1) or fast forward (values >1) in Safari on the desktop. Setting playbackRate is not currently supported on iOS.

Having said that I have managed to change the playbackRate on iPad/iOS7 with the following code. It seems you need to pause the video before the playbackRate can be set. I am just wondering now if the Apple document is up to date (?)

<video controls id="videoTag" width="640" height="360" preload="none">
<source src="media/360p.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' id="mp4Source">
</video>
<div id="change">change rate to x2</div>
<div id="change2">change rate to x0.5</div>
<script type="text/javascript">
var video = document.getElementById('videoTag');
video.addEventListener('canplay',function(){
document.getElementById('change').addEventListener('click',function(){
    video.pause();
    video.playbackRate = 2.0;
    video.play();
},false);
document.getElementById('change2').addEventListener('click',function(){
    video.pause();
    video.playbackRate = 0.5;
    video.play();
},false);
},false);
</script>

Upvotes: 3

Leo Dabus
Leo Dabus

Reputation: 236458

Playback Rate in JavaScript

You can set the audio or video playbackRate property to nonzero values to play media in slow motion (values >0 and <1) or fast forward (values >1) in Safari on the desktop. Setting playbackRate is not currently supported on iOS.

Upvotes: 1

Related Questions