Change HTML5 Video’s Quality From JavaScript

In YouTube, we can change the quality of the video from a dropdown like 360p, 144p, 240p, etc. Can we do the same with HTML5 video element from JavaScript?

Solution 1:

Manual selection of quality is just a matter of:

1. Saving the currentTime in a variable
2. setting the video src to the URL of a different video (with the same content at a different quality)
3. Setting the currentTime to the value in the variable
4. Playing the video

Solution 2:

You want to use the youtube-api with html5-player or you are using video files on your server? if youtube-api, try:

https://developers.google.com/youtube/iframe_api_reference

[edit]

The javascript or actionscript only access different videos, as they do not have exchanged the quality would have to recompile in real time (which is unfeasible).

Do you happen to be interested, you can use ffmpeg on your server (or before you upload the videos to your desktop) to generate various formats (qualities) of video, you can study the following link: http://ffmpeg.org/trac/ffmpeg/wiki/Creating%20multiple%20outputs

hope this helps.