Need Action when Video is complete in video Player - javascript

I need video player which give me some events when video will complete. So, I can start another video after completing one video
How can I achieve it ?
Actually, I want to do it in ionic project. So, html and js video player will helpful for me
Thanks in advance

You can add listener to your video element
var videos = document.getElementsByTagName("video");
videos[0].addEventListener("ended", function() {
videos[1].play(); // the second video on page will start as just the first video ended
}, true);

Related

Show a button after video reaches certain time of a video

I have a video page with a button to link to another page. I need to hide the button initially but only shows the button when it's reaches 5 seconds before the completion of the video.
It's in standard HTML code like below.
<video controls preload=metadata width=1280 height=720>
<source src='media/video.mp4' type=‘video/mp4'>
<p>Please use a modern browser to view this video.</p>
</video>
How can I achieve that using Javascript? All the examples I can find are about youtube videos and using the function provided by Youtube. Mine is video deployed on intranet.
Thanks for the help,
You can listen for timeupdate event of <video> element. The documentation for it can be found here.
Code will basically look like this:
const TIME_TO_SHOW_BUTTON = 60; // 60 seconds;
const video = document.getElementById('video');
video.addEventListener('timeupdate', function showButton() {
if (video.currentTime > TIME_TO_SHOW_BUTTON) {
// your logic to show the button
video.removeEventListener('timeupdate', showButton);
}
});

Preload Javascript audio to play in script

I have a simple program where I run this script:
function PlayAudio(Location){
var audio = new Audio(Location);
audio.Play()
}
in an onclick HTML attribute. I have a fancy loading picture that I know how to make appear and have successfully made it work. I would like to show this picture while the audio is loading, and then make it go away after the audio file is done loading and ready to play. Right now, there is a considerable delay between clicking the element and hearing the sound.
My trouble is knowing when the audio is done loading and ready to play. I figure the best way to know when it's complete loading is to preload the file in-script. I don't know how to do that.
And that's my question:
How do you preload files inside a script?
Or, is there a way to know when an audio file is finally playing?
Note: I cannot use an <audio> element, unless there is some way to nest a <div> inside the <audio> so that the sound in the <audio> is triggered by clicking anywhere in the content of the <div>
Sorry for my slightly confusing descriptions!
Thanks,
Lucas N
You can use canplaythrough event
Sent when the ready state changes to CAN_PLAY_THROUGH, indicating that
the entire media can be played without interruption, assuming the
download rate remains at least at the current level.
function PlayAudio (Location){
var audio = new Audio;
audio.oncanplaythrough = function(event) {
// do stuff, e.g.; set loading `img` `style` `display` to `none`
this.play();
}
audio.src = Location;
}
You change its preload attr by
. audio.preload = "auto";
It will load the whole audio file on start

Pause and resume slick slider once video finishes

I have a slick.js slider that contains video and I want the slider to pause once it reaches a video slide and resume cycling once the video finishes without user interaction. I can get this functionality to work with the first video in a cycle but on the second video slide, the slider will not resume once the video completes.
Fiddle
I have a console log that writes out when the video completes but it won't say anything once the second video completes. I believe it is not seeing the function to play the slick slider.
function myHandler(e) {
console.log('Video Complete')
$('.sliderMain').slick('slickPlay');
}
You were only binding the first video tag to your myHandler function:
// It only gets the first element
var video = document.getElementsByTagName('video')[0];
video.addEventListener('ended',myHandler,false);
Since you're using jQuery, you can bind an event when the videos have ended like that:
$('video').on('ended',function(){
console.log('Video Complete')
$('.sliderMain').slick('slickPlay');
});
jQuery demo
The JavaScript equivalent would be so:
var videos = document.getElementsByTagName('video');
for (var i=0; i<videos.length; i++) {
videos[i].addEventListener('ended',myHandler,false);
}
JavaScript demo
SlickSlider is responsive and needs to work 360 (across all devices).
Your solution will not work on mobile, since autoplay of a video is forbidden.
Also this solution allows multiple videos to be playing at once, which is sub-optimal.
A better solution would be to pause the carousel only when the video is played by the user, and resume the carousel (pausing the video) when a slide is detected.
This works also on mobile devices. Just make sure, you don't serve a video tag on mobile. Before outputting your slide via PHP template, just check the user agent and serve a fallback image instead. Then use this for your video/autoplay/resume issue:
$('.homepage .hero-slider').on('afterChange', function(event, slick, currentSlide, nextSlide) {
var $active = $('.slick-slide.slick-current.slick-active');
var video = $active.find('video');
if (video.length == 1) {
var $slickInstance = $(this);
// play() only works with a valid id as selector :)
var video = document.getElementById(video.attr('id'));
video.play();
$slickInstance.slick('slickPause');
video.addEventListener('ended', function () {
$slickInstance.slick('slickPlay');
}, false);
}
});

How to properly insert <video> tag into html with javascript?

I'm just getting started here with javascript and have made this.
I have made a codepen that shows the two issues I am having
1) there are two duplicate videos being loaded in, when I delete one of the video tags it prevents the randomize button from working or any video from loading up. I am only trying to have one video load in.
2) In the codepen I have a button that clicks to randomize but instead I am trying to have the video wrapped with an tag so that the video can be clicked to initiate the randomize. Whenever I try and do this I get an undefined error or the videos will not load in =/
Play video
<div class="video-label"></div> <!-- loads in top video (only want one video) -->
<video loop autoplay> <!-- loads in bottom video (only want one video) -->
Your browser does not support the <code>video</code> element.
</video>
If you click on the codepen you will hopefully be able to see where the two videos are being loaded in and where the click tag is. Any help is greatly appreciated!! I've been trying to figure it out all night :/
Here is the codepen
Codepen
Thanks in advance!
You can create a html5 video tag using javascript by following this logic:
var videoelement = document.createElement("video");
videoelement.setAttribute("id", "video1");
var sourceMP4 = document.createElement("source");
sourceMP4.type = "video/mp4";
sourceMP4.src = "http://zippy.gfycat.com/SpottedDefensiveAbalone.mp4";
videoelement.appendChild(sourceMP4);
var sourceWEBM = document.createElement("source");
sourceWEBM.type = "video/webm";
sourceWEBM.src = "http://zippy.gfycat.com/MinorGregariousGrub.webm";
videoelement.appendChild(sourceWEBM);
$('.video-label').html(videoelement);
var video = document.getElementById("video1");
video.play();
This code is creating a video tag and including it into your div (.video-label), then the video starts automatically. This is working without the random stuff (the same url is used everytime), so you can update it at your convenience. Try to remove the video in you html file, it works now:
<video loop autoplay>
Your browser does not support the <code>video</code> element.
</video>
Here is a link where you can download your code updated with working solution (without randomization):
http://tests.krown.ch/Codepen.zip
Also when you click on your video div (.video-label), the video tag will be deleted and created back (but with same url, you just need to update video url with your randomize stuff)
In this line you find any video tags on the page and try to copy it's content into div:
var $video = $('video');
...
$('.video-label').html($video.get(0).outerHTML);
But if you delete video from the page there will be nothing to copy. You need to move video tag inside div in first place. Or create it dynamically, not by copying, when user clicks link.

youtube playlist plays next video in list

im using this youtube playlist plugin http://geckohub.com/jquery/youtubeplaylist/ and im trying to find a way of adding a bit of code that will allow the list of videos to be played next after the main video has finished playing. I have managed to loop the main video but trying to get the next video on the list to play.
cheers
Steve
check this URl autoplay youtube video it is not using this youtubeplaylist plugin. But you will get some idea to call next video when statechange
var o = document.getElementById( 'ytplayer_object' );
if ( o )
{
o.addEventListener( "onStateChange", "ytplayer_statechange" );
o.addEventListener( "onError", "ytplayer_error" );
}

Categories

Resources