Speeding up HTML5 video seek? - javascript

Hey all I wonder if you guys know some trick that could help me out. What I have implemented is a slider that controls the seek position of an HTML5 video via the currentTime property. What I would like to have happen is as the user is dragging the slider the video is updating in real time.
What I have works but the video players image doesnt update to each frame as I set the current time. Any thought?
slide: function(e, ui){
seeksliding = true;
$gVideo[0].currentTime = ui.value;
},

Modern browsers are generally very good at seeking quickly, even to the point where you can synchronize two or more videos using Javascript, with the same kind of functionality you're describing. (Firefox around version 4-5 would take a few extra milliseconds and lose sync, but it's better now.)
The code you have should work, as long as ui.value is between zero and the duration of the video. But you may run into problems if a) the video is not loaded or b) there is something up with the encoded video file.
First, make sure the browser can play the video and seek without any Javascript controls. Just try opening up the file in the browser, first straight off your hard drive and then off the network. If you can't seek with the native controls, you can't seek with Javascript. I've sometimes seen seeking errors solved by re-encoding a video without B-Frames.
Next, see if the video is loaded when you're trying to seek. You can speed this up by adding a preload attribute to the video tag. And make sure the slider event isn't enabled until the browser has the video's duration, by putting the slider code inside a loadedmetadata event.

Related

APNG gets out of sync after second page refresh

I have an app with an animated UI realised via APNG images.
Each block has 2 APNG images and one PNG one:
Appearing (APNG)
PingPong (APNG)
Static (PNG)
I need to play the second animation right after the first one is finished and only make visible the PNG image after a touch event. I've done it via setTimeout but, unfortunately, after second page refresh a browser completely ignores some animations, some of them start jittering, some disable in an inappropriate moment.
How can I fix the problem?
And can I catch the moment when APNG animation has finished? Do APNG images emit any events?
To check the problem, open the app on mobile device and scan the code.
Browsers don't have any built-in support for treating APNGs as anything other than an image: there is no way to determine when an APNG has started or stopped playing. You could probably fix the issue by just converting the APNGs to an actual video file format, and embedding the images with <video> instead, since that has an API for controlling playback. Alas, it doesn't seem that any browsers support treating APNGs as video so you'll need to convert it to another video format, such as WebM.
If you are really committed to not converting your APNGs to a video file format, you could work around the limitation in browsers by using a library such as pngjs to decode the APNG, extracting the fdAT chunks, and then manually animating through those extracted frames (each frame in an APNG is itself a (non-animated) PNG).

YouTube embed setup without controls but with fullscreen

I need to embed a YouTube player with the following attributes:
Must not allow users to go forward or back (no progress bar)
Must have access to player events (player disappears and message is displayed when video ends)
Must be able to go fullscreen and back to normal at user's request.
I was hoping the JS API would allow me to do this easily, but apparently Flash security makes it so the user has to click somewhere within the flash element itself in order to use Flash to go fullscreen.
As a workaround, right now I'm using the HTML5 fullscreen API as seen here: http://blogs.sitepointstatic.com/examples/tech/full-screen/index.html
But this causes cross-browser funkiness and even appears to be messing with my player events (the video stops playing and goes back to the beginning when I requestFullScreen). I could try to work this angle some more but I'm praying there's an easier way.
I would love if there was some way to customize the embedded YouTube player to remove the progress bar but still allow fullscreen w/ Flash, since it's just so much more seamless. Is this even possible?
Your users should still be able to fullscreen by double clicking the video. The HTML5 fullscreen api should work fine, but if you're having issues where the flash plugin in re-initializing I would do two things. First report the bugs to the browser vendors so they can be fixed. Two listen for onYouTubePlayerReady a second time and add your event listeners again. Then seek to the point in the video they were at before going fullscreen.

smooth video transition HTML5

looking to use HTML5 video tag and JS. the aim is to make a video swap from one video to the next very smoothly just like a cut in the movie. I have had a look at the API
http://www.w3.org/TR/html5/video.html#tracklist
if anyone has an idea that would be great. My current plan is to familiarise myself with the API and figuare out how to que up the video for a smooth change. currently sellect a src and then play() causes an ugly white space pause before the next video comes in.
many thanks for looking
Use firefox and make hardware acceleration on. if you have good hardware it should work.
and you can also try this method, imagine if you have 5 videos to play and when you are in the 2nd video you can keep them by the video currently you are playing ,keep them on left and right sides and make them pause. when you move on to the 3nd video you can just get that relevant video and make it play. this method should eliminate any unnecessary lags.
HTML5 videos use a very low amount of CPU, so there's no reason you can't have multiple tags on the page at the same time. I would suggest having them all on the page and then using CSS and JavaScript to transition between them.
You won't be able to make this work on iOS since it doesn't allow playback to initialize without user interaction. The user will have to click to start each video.
Annoying, but that's how Apple rolls.

JPlayer Audio Issues

I'm attempting to have JPlayer play an audio clip on a specific event, but I'm getting some finicky results. Sometimes the audio doesn't play back, sometimes the audio stutters on the first 1/4 second, and sometimes after playback a repeat attempt plays the audio clip, but starting near the end. The code I'm using looks like:
The setup:
$("#div").jPlayer({ready: function (){
$(this).jPlayer("setMedia", {
mp3: "./test.mp3"
});
}, swfPath: "/dir/", preload: "auto"
});
Event Fired:
$('#div').jPlayer("play", 0);
Any help is greatly appreciated, and maybe an idea of a better way (different plugin, or none altogether) to achieve the result would be awesome.
Thank you!
Side Note:
Main end platform is the Ipad (Safari), but cross-browser support would be the best!
What I ended up doing was using SoundManager2 to playback the audio file. It's been giving consistent results for all of the playbacks I've tested. Also, it works on many browsers, so it fits my needs just fine.

How can I stop the preload of a video (HTML5 - Javascript)

I have a web page with a video player preloading 3 videos (low, med, and high quality of the same video). Then, when the user clicks on one the button corresponding to the desired version, the video opens.
What I would like to do is to then stop the preloading of the two other videos.
Is that possible? In other words, can the "preload" attribute of the HTML5 Video tag be cancelled or stopped on the fly with some Javascript ?
I just came up with a solution to a problem I had that resembles your own. I am preloading a list of movies on my page, in series, but I need to be able to jump to one of them and prioritize it ahead of whatever might have already been preloading, in order to play it as quickly as possible.
I have a div#prebuffer element that holds the preloaded videos, as they are buffered. When I need to forget about preloading, I simply do this:
var $video = $('#prebuffer video:last');
$video.find('source').attr('src', '');
$video[0].load();
// it has now stopped preloading.
// and then, because I don't want this half-loaded broken cruft hanging around:
$video.remove();
It's slightly ugly, but I wasn't able to find a nicer way. And it gets the job done.
With jQuery, you can try:
$('#videoPlayerId').removeAttr('preload');
I don't know that it will stop a video that's already preloading.
From a UI perspective, why are you trying to preload all 3 videos at the same time? This will slow down the loading speed of all three; if you only preload one of them, more of the video will have a chance to buffer before the user starts viewing it.
I would suggest preloading one of the videos of a default quality and only loading a different quality video if the user selects it. This is the behaviour used by YouTube, Netflix, and others.
There is dedicated tag nowadays:
<video preload="none" ....>

Categories