CODEWITHSUNDEEP
youtubehtml5-videovimeovideo.js
Don P
Don P

Reputation: 63718

Host a video, and have playback speed between 25% and 1,000%

Where should I host a video to be able to control playback rate from 25% speed all the way up to 1,000% speed (10x faster)?

Controlling playback speed is easy with HTML5 <video>. However I can't find a video host to support the speed range I need.

Options I've considered:

Self-hosting

One option is to host the video on my own servers. From what I've read this comes with a lot of complications, and it's preferred to host on existing services (Youtube, Vimeo, Brightcove, etc).

Youtube

I looked through the YouTube video API, but it only has a certain range of playback rates that doesn't sound like it gets up to 1,000% speed. Although I own the videos, so maybe I have control over available playback rates them when I upload?

Vimeo

No playback rate controls.

Brightcove

API has a function for setting playback rate. But also requires paying...

Upvotes: 6

Views: 1405

Answers (4)

jcoshea
jcoshea

Reputation: 190

Can be done with Vimeo, the Pro version anyway. I go to the hosted video, Video File and Access your video files. There are links there to video files that can be use as the source for the HTML5 video.

<video id="video" src="http://player.vimeo.com/external/1278xxx.hd.mp4?s=xxx&profile_id=119">

After that it's using jQuery to get a handle on the video

var video = $("video")[0];

And changing playback rate is

video.playbackRate = 0.25;

Might run into some security issues as anyone with the link can now download the file with a Right Click and Save As.

Upvotes: 0

avnr
avnr

Reputation: 666

You can host the media files on AWS S3 (either on AWS itself or compatible services such as Dreamhost). S3 solves some of the FTP issues with self-hosting of media files such as uploading large files, versioning, etc., and it might be a reasonable compromise when complete media-player control is a must.

If the above solution is not feasible then you can:

  • Transcode the media upfront in several most-relevant speeds. Changing the playback speed will mean switching to a different movie.

  • Provide the option to download the files or relevant chunks so the user will use a local player (e.g. VLC) to "play" with the media.

Upvotes: 0

Josiah
Josiah

Reputation: 3158

It doesn't look like this is possible unless you use the HTML <video> element in a custom implementation. Even the Youtube API states:

Even though the AS3 player supports playback rate controls, variable speeds are currently only supported in the HTML5 player.

At present (May 2015), your best bet is to create your own solution, since youtube seems use flash even on some browsers that support html5 videos, like my Opera 29 (though if I change my user-agent to chrome, it does serve the html5 player...). Most browsers can handle mp4, and you could encode the video at different playback speeds as a fallback if the <video> element isn't supported. At this point <video> support is approaching 95% in the US, so a fallback may not be necessary depending on your audience.

Another point in favor of using your own solution is that youtube seems to only support playback up to 2x speed (200%).

The biggest problem with hosting your own video that isn't solved by the <video> element as far as I've seen is the load on the server. Using a CDN would probably solve this problem. Please note that my laptop can't play smooth hd video (well, DVD quality, I don't have a lot of videos to test with) served from my own machine at more than 2x, so unless you're using very small videos you might find 10x impractical.

HTML5 Rocks has a good overview of setting up the <video> element.

Upvotes: 1

Knifa
Knifa

Reputation: 436

You may be able to make use of MediaElement.js particularly with this example here. It is possible that YouTube simply won't serve the content fast enough to run at 1,000% speed, however.

If that is the case, I do think that rolling on your own solution with the <video> element is easiest here, making use of any CDN service to serve your content. The caveat here is that you are restricted by browser support, though almost all modern browsers will support the <video> tag.

Upvotes: 2

Related Questions