my case is when the video is playing and the user want to move to other one, the (react-player) has the white screen until the the other video is loaded, then the other video will start ,
what I want is , the first video will be play until the other video is loaded and ready to play , then will be like switch between each other , without the white screen.
any suggestions ?
Related
I want to achieve the feature when a user is in the video section React player will play the video and pause when the user leaves the section.
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.
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";
}
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.
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.