I have embedded a youtube player in an iframe. I want to know the duration of video before it starts playing or want to get notified when duration is updated from 0 to actual duration. How can this be done?
Thanks.
According to the Google YouTube api...
Retrieving video information
player.getDuration():Number
Returns the duration in seconds of the currently playing video. Note that getDuration() will return 0 until the video's metadata is loaded, which normally happens just after the video starts playing.
If the currently playing video is a live event, the getDuration() function will return the elapsed time since the live video stream began. Specifically, this is the amount of time that the video has streamed without being reset or interrupted. In addition, this duration is commonly longer than the actual event time since streaming may begin before the event's start time.
Related
I am testing videoJS in a web app in chrome and measurement first buffering time (to start to play) and delay is ok but when I test in a different device, like a tv the delay increases to ~7s.
I am testing only HLS videos and I noticed that fragments are loaded much time early the video finish to play then I am asking if it's possible to start to buffer the second video once the current video is 100% downloaded and then the client does not notice that time delay to playback.
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).
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.
I have 86mb 1920x1080 video that I am playing online using videogular.
The video freezes often, taking 5-10 seconds to continue playing.
Is there a way to preload video completely and then play?
Is there a way to indicate how much has been loaded (as it's done on youtube?)
I've already tried preload:"auto",preload:"none" and preload:"preload".
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";
}