smooth video transition HTML5 - javascript

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.

Related

Make YouTube video quality as low as possible when out of view range

Question
So I want to have embedded YouTube videos. But when you scroll down it's just gonna use the sound and put fixed controls on the bottom of the page.
When you don't see the video anymore but just use it as sound, the quality of the video doesn't matter, so to not drain someone's internet, can I change the YouTube video's quality to the lowest possible (144p) with YouTube ? It should still be possible to change the YouTube video to its old quality when you scroll back up.
Not part of the question, but if you know this you can help me out :)
In this post I saw its not allowed to
just have the controls of the Youtube video to use it for audio. But
if I do it this way where I still use the video but when off the screen just
use the sound. Is this allowed?

Stop Audio in Wordpress

I am using the background video option in Divi (by elegant themes) in Wordpress to show a 4 minute or so long video in the background. The thing is, I don't want the audio. I understand if you scroll down far enough the entire thing stops, but I just don't need or want the audio. Is there any custom code that I can use (or a plugin) to get the audio to stop playing ON THE VIDEO BACKGROUND, or will I have to convert it to a gif? Thanks.

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.

Custom YouTube player sizes + a custom fall-away overlay poster image?

I have been fine hitherto working with lightboxes and just simply having an image "button" to fire videos off, however some requirements have recently changed in one particular scenario.
I have a custom area on a page that has is contained within a news rotator area. I've eliminated the rotation and it is now effectively just a menu, however I need to both define a custom size for a YouTube video player (the two default sizes, sans full screen, are not appropriate). Consequently I have to figure out how to define a custom size in between and preferably HTML5, falling back to Flash.
Next, I need to have an overlay image that will fall out of the way to uncover the YouTube player once clicked and activate the play function without interaction.
What's the best process to follow here? I would prefer to use YouTube for several reasons over a custom HTML5 player (although there are nice options I've used).
A big bonus would be if I could leverage js to display another overlay image once the video has completed playing.
In the end I moved away from YouTube towards another solution. It's not free, but it is a superior solution.
However, saying that #PaulIrish had a suggestion that merits review: http://www.blogseye.com/i-make-plugins/youtube-poster-plugin/
The solution I ended up leveraging in the end is Wistia. They have a solid player + experience and the metrics are really nice. I appreciate the prompt reply from support so there's that personal human touch you completely miss from YouTube, and that alone is worth paying for to me.

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