Workaround to rewind HTML5 video on iPhone and iPod

If you’re reusing the same element and changing the “src” property, you’ll see videos won’t properly start from the beginning on iPhones and iPods with Mobile Safari and iOS 5/6. Setting “currentTime” also doesn’t work since it requires the native video player to be in full-screen mode. Sucks huh?

This should work for example (but doesn’t):

$('video')[0].src = "video.mp4";
$('video')[0].currentTime = 0;
$('video')[0].play();

The best workaround so far is to use <source> tags instead of the “src” property. For example:

$('video').html('<source type="video/mp4" src="video.mp4" />'); 
$('video').find('source').last().on('error', function() { alert('some error'); });
$('video')[0].play();

Give it a try.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s