javascript image slideshow, video like playback - javascript

I want to take a video and dump it into seperate frames and then create a Javascript/HTML5 player that can play through a sequence of images.
Key reasons I want to use images is to allow for an all keyframes style fast forward and rewind for use in a slow motion player and also for use in video editing where you need to be able to skip to any keyframe.
Any suggestions appreciated.

Related

On video.js Is it possible to pre-load a video while you have an existing video playing (without having two video.js instances)

We are using video.js to play through a playlist of videos in a continuous fashion. Sometimes the buffering time between the next ad or video can be quite long when a video ends and the next one begins. Is it possible to prebuffer/preload the next video while the existing one plays. One idea would be to use a separate video player and swap back and forth between but that seems quite complex. Is there any way to do this without having two instances (or is their a plugin that makes managing two video.js instances seamless?)

html5 video detect end then play in reverse? JQuery and Javascript

I have limited knowledge on JS/JQuery but I am wondering if you can detect the end of a HTML5 video and then Play the video in reverse and then play it from the start so basically an endless loop playing forwards and then backwards?
Using JQuery/Javascript
Streaming video codecs are optimised to be played forward so, while there is a playbackRate property of HTML5 video which you might be able to use to reverse the playback of your video (try setting it to -1), the result is probably not going to be particularly satisfactory.
A better approach would be to create an additional video at the encoding stage which runs in reverse. You could then use the video's ended event to toggle the source back and forward between the forward and reversed videos.
Or as Ken, has helpfully suggested in the comments, create a single video in which the sequence is played forward and then in reverse. You can then set the video to loop and you've got what you're after.
Just for your reference, the w3 have quite a handy example which allows you to explore in real time the various methods, properties and events available in HTML5 video.

Load multiple videos without playing

I'm building a video player where each scene is filmed from multiple angles. All videos are hosted on YouTube. I'd like to allow the user to be able to switch between angles seamlessly during playback.
To facilitate this, I need a way to load videos from YouTube without playing them. That way I can load alternate angles in the background while one angle is playing. When the user switches angle, the new angle should be at least partially loaded and ready to play immediately.
Unfortunately, I can't find a way to load a video without playing it.
The loadVideoById method autoplays the video as soon as the request to load the video has returned so that won't work.
Is this possible?
There's no way to cue up a video and force it to pre-buffer.
You can load (as opposed to cue) a video and then immediately pause it, and it may or may not pre-buffer, but that's dependent on a number of factors and is outside your control as someone using the API.

Convert YouTube/Vimeo video into silent, animated images (think "moving pictures" from Harry Potter)?

How could you programmatically convert a YouTube/Vimeo video into a series of animated images that each reflect 5 seconds of the video? Essentially, the goal is to deconstruct the video into silent, 5-second animated pictures -- think "moving pictures" from Harry Potter.
One option is to slice the video into 5-second video chunks, but the output should feel like animated GIFs ... that is, play instantly, be lighter than combining 150 pictures into one JavaScript slideshow (assuming 30 FPS), but have the image quality of a JPG or PNG. If this is possible with video, then it's an option we're open to exploring.
Another option is to take screen shots of the video, but that is not programmatic.
Ideas?
The output needs to get rendered in HTML5 on Mobile Safari.
You've a bit of a problem here — quality is directly related to file size. So if you create a video of 30fps (higher than regular broadcast TV, really?), you're going to run into issues with it being light & fast loading.
I don't know if I'd go down the route of making actual GIFs if you're looking for a high-ish framerate, but if it's for a web project, HTML5 video tag should be able to have autoplaying video that integrates into the page fairly seemlessly.
What you would want to do here is take a programme like Handbrake, put the video at the highest possible compression settings (lowest quality/framerate) & slowly bring it up until you have something that you think is the minimum you can get away with.
From there, you can look into scripting the process using these settings & something like FFmpeg. You'll probably also want to remove video metadata to save as much filespace as possible.

Multiple audio tracks for HTML5 video

I'm building a video for my website with HTML5. Ideally, I'd have only one silent video file, and five different audio tracks in different languages that sync up with the video.
Then I'd have a button that allows users to switch between audio tracks, even as the video is playing; and the correct audio track would come to life (without the video pausing or starting over or anything; much like a DVD audio track selection).
I can do this quite simply in Flash, but I don't want to. There has to be a way to do this in pure HTML5 or HTML5+jQuery. I'm thinking you'd play all the audio files at 0 volume, and only increase the volume of the active track... but I don't know how to even do that, let alone handle it when the user pauses or rewinds the video...
Thanks in advance!
Synchronization between audio and video is far more complex than simply starting the audio and video at the same time. Sound cards will playback at slightly different rates. (What is 44.1 kHz to me, might actually be 44.095 kHz to you.)
Often, the video is synchronized to the audio stream, but the player is what handles this. By loading up multiple objects for playback, you are effectively pulling them out of sync.
The only way this is going to work is if you can find a way to control the different audio streams from the video player. I don't know if this is possible.
Instead, I propose that you encode the video multiple times, with the different streams. You can use FFMPEG for this, and even automate the process, depending on your workflow. Switching among streams becomes a problem, but most video players are robust enough to guess the byte offset in the file, when given the bitrate.
If you only needed two languages, you could simply adjust the balance between a left and right stereo audio channel.
If you're willing to let all five tracks download, why not just mux them into the video? Videos are not limited to a single audio track (even AVI could do multiple audio tracks). Then syncing should be handled for you. You'd just enable/disable the audio tracks as needed.
It is doable with Web Audio API.
Part of my program listens to video element events and stops or restarts audio tracks created using web audio API. This gives me an ability to turn on and off any of the tracks in perfect sync.
There are some drawbacks.
There is no Web Audio API support in Internet Explorers except for Edge.
The technique works with buffered audio only and that's limiting. There are some problems with large files: https://bugs.chromium.org/p/chromium/issues/detail?id=71704

Categories