"Hide" a YouTube Video's Loading screen - javascript

After looking through the YouTube IFrame API, I haven't been able to find anything that can help me.
My goal is to "hide" the loading screen a YouTube video has; i.e. this black screen with a spinning wheel. While it only appears for a brief second and doesn't bother me, it's bothersome when trying to use a YouTube as the background of an element.
My approach to solving this problem was to have a picture of the first frame of the YouTube video overlap the video and then hide it when video starts playing. I originally thought I'd be able to use onStateChange and watch for the YT.PlayerState.PLAYING value so I can hide the image but this event is triggered when it is about to start playing; in other words, it hides the images when the video is about to start playing which is when the loading screen appears.
Are there any other approaches to this or am I stuck with the brief loading screen or would a self-hosted video be the better approach? I wanted to avoid self-hosting the video because of bandwidth.

set the background of the iframe container to black and set the iframe opacity to 0, once it starts playing set the opacity back to 1

Host the video and use an API where you can; customize the media player, hide / show / customize load screens, cue points, start poster / end poster, etc. Or else your spending your time hacking youtube API capabilities with funky javascript.
JW player: http://www.jwplayer.com/
Flow Player: https://flowplayer.org/docs/cuepoints.html
And many others you could check out.
video.js, popcorn.js, etc etc.

<div id="player" style="background: #FFFFFF; opacity: 0;"></div>
// 2. This code loads the IFrame Player API code asynchronously.
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
// 4. The API will call this function when the video player is ready.
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video(state=1),
// the player should play for six seconds and then stop.
if (event.data === 1) {
console.log('video plays');
document.getElementById("player").style.opacity = "1";
}

Related

Dynamic change video.src HTML 5

how to change video.src when watching a video
current = video.currentTime;
video.src = '2.mp4';
video.currentTime = current;
video.play();
Everything is working. But the video is interrupted for a moment.
How to change video without interrupting viewing. Youtube dynamically changes video with automatic quality change
youTube uses something called Adaptive Streaming - a fragmented MP4 structure allows them to change quality up/down quickly and seamlessly because they are only loading content in very small chunks (about 2 seconds). If you want to do that, they you would need to look at a player that supports HLS or (better for the future) MPEG-DASH (eg jwPlayer) along with a suitable encoding solution (eg Encoding.com)
If you want to change source to a new video seamlessly then the best way to do that is to have two video elements on the page, with the second source loaded, buffered, and paused (or update the currentTime to keep them in sync) and then when you want to switch toggle the visibility on the two video elements. There will still be a slight transition (especially if the two playheads are not in the same position).

Show loading image when video buffer next frames

I' using html5 video. I need to show the loading image when video buffering next frame like a youtube when video is stop and downloading next frames youtube show a loading image which is circle gif image and when video download enough frame to start it loading image disappear.
I'm not asking about first time video start.
I know I can use poster while video is not starting or I can use event loadstart and canplay.
These things work fine when video is starting first time. But problem is that I want loading image when video is stop while playing due to buffering next frame.
So, what I event use or how can I do this.
Thanks.
To achieve this, you may want to listen to the corresponding events from the video element. A list of available events can be found at w3schools.com.
The two events of interest for your goal are stalled and waiting, once they are fired you can display your loading animation.

Pause a youtube video in a slideshow

I have a slideshow/slider containing images and videos from youtube.
Is it possible to pause the current youtube video if the next or prev button is pressed.
Also would i be able to auto play the clip when one comes back to the same slide?
Yes. YouTube JavaScript Player API Reference is what you need https://developers.google.com/youtube/js_api_reference#GettingStarted
Use player.stopVideo() method.

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.

How to disable / enable the play button on a YouTube video with jQuery?

Background:
I am building a timed jQuery slideshow that contains a YouTube video as one of the elements. I am using the YouTube JavaScript Player API to detect the play status of a video (slide 1) and pause the slideshow if a video is playing. This portion is working.
However, there is a problem if the user clicks the play button during the 700ms slide transition. My jQuery will not detect the playing video on that cycle (slide 1), but it will detect the playing video on the next cycle (showing slide 2). It will pause the slideshow on slide 2, and there is no way to resume the slideshow again - since that would require pausing the YouTube video on slide 1 (now hidden).
Question:
How can I disable the play button on the YouTube video during the transition and re-enable it after it is complete? One option is to put a transparent gif image over the entire video, but perhaps there is a more elegant / less kluge-y solution using the YouTube API? I haven't been able to find it.
I don't think you can do what you want to do with the default interface. However, have you taken a look at the YouTube Chromeless Player? It's part of the YouTube API, but strips away part or all of the "chrome" on YouTube. My only concern is that this might remove too much of that chrome. Give it a look and see if it will work for you.

Categories