Slow motion youtube videos

May 2, 2014 10:17 pm 2 comments

I have been playing guitar for long time now, and there has been something that I always wanted: make guitar videos on youtube go slower to see clearly how some piece is played. Now that most of the video sites use html5 video tags to render their videos, playing them in slowmotion is a piece of cake.

I have created a bookmarklet to everyone who needs the same:

Slow motion video

Just drag the link above and drop it on your bookmark bar, visit youtube or vimeo start a video and click on it. That’s it, you should be watching your video at half of the original speed.

Looks great. How does it work?

Nowadays browser let the developer take the controls of how to display videos thanks to the <video> tag. That tag offers you an API to play, pause and seek video moments. And also there are a property called playbackRate to control the playback speed.

So the bookmarklet just fetch the video tag from the DOM and change the playbackRate value to 0.5

As you can see, hitting the bookmark again will restore the playbackRate value to 1. Set values lower that 1 to play the video slower and bigger than 1 to play it faster. It is possible even to set negative values to play the video backwards.

For playbackRate values lower than 0.5 the sound is muted.

It is needed that the video is served in HTML5 format (default for most of browsers), otherwise it won’t work.

If you want to know more from the HTML5 video API, have a look at Mozilla’s docs.

javi

Let’s push your website a bit further

My name is Javier Márquez and I have more than 10 years of web programming and web designing experience. If you have a difficult development to complete, maybe you can stop by and see what I can do for you. You can find me on and Twitter.

2 Comments - Leave yours

Leave a reply


contact meAnything related to web development like javascript and CSS to create responsive designs, or PHP and node.js to make your website work properly, is my pleasure. If you have an interesting project in mind, I can help to make it real.