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);
}
});
Related
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);
I want to create an audio playlist that can only play and pause. However, when the user is done listening to the entire song, I want to be able for that user to re-play the song.
Currently, the Javascript playlist only plays and stops the music. My pause button is not really working like a pause button. Not sure where I went wrong. And how exactly can I get the song to automatically re-set to the beginning once the user finishes listening to the song? I would very much appreciate the help on this! I wrote the HTML audio code already and just listed the Java Script below.
<script> // play/pause button
$(function() {
$('#play').click(function(){
$('#pause').attr('src',"media/pause.png");
});
});
$(".playBtn").on('click', function() {
var target = $(this).attr("target");
$("#audio").attr("src",target);
$("#audio").trigger("play");
});
$(".pauseBtn").on('click', function() {
$("#audio").trigger("pause");
});
});
</script>
Audio tags have several events to which you can add listeners. Here is a link to a list of them: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
The "ended" event triggers when the audio is finished playing, so it could help with resetting the song to the beginning when the audio reaches the end.
$("#audio").on("ended", function () {
this.currentTime = 0;
});
You can use loop attribute at <audio> element to continuously loop single audio source. Substitute caching <audio> DOM element for jQuery object to call .play(), .pause() at click events.
javascript
$(function() {
var audio = $("#audio")[0];
$(".playBtn").on("click", function() {
audio.play()
});
$(".pauseBtn").on("click", function() {
audio.pause()
});
})
html
<audio id="audio" src="/path/to/audio/source" loop autoplay controls></audio>
<button class="playBtn">Play</button>
<button class="pauseBtn">Pause</button>
jsfiddle https://jsfiddle.net/kkf33dpr/
Trying to call the vimeo api to pause video on a click event to hide it. And, on clicking to reveal the video again, play the video from its paused position.
There are various related questions on here, I can't find an answer to the simple "how to pause". I'm a jquery novice and can't make heads or tails of the froogaloop documentation.
Here's a FIDDLE, and my current jquery script to hide the video
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) {
$('#video').hide();
}
});
which hides it when an element without the "click" class is clicked. But the video plays on in the background. Froogaloop is loaded in the fiddle. Thanks everyone
Here's an updated FIDDLE that makes pause/play work as I'd imagined. Click the image to play the video; click outside or on empty space (you control this with classes) to pause it; click image again to play from paused position. Simple, no buttons, no excess jquery or froogaloop code.
Putting this here for those who might benefit from it. And a +1 to mbrrw for getting me started.
var iframe = $('#video iframe')[0];
var player = $f(iframe);
$('.showvideo').on('click', function(){
$('#video').show();
$('.image').hide();
player.api('play');
});
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) { //if what was clicked does not have the class 'click' (ie. any empty space)
$('#video').hide();
$('.image').show();
player.api('pause');
}
});
Remember to append api=1 to the vimeo link. And the url must be https, not http.
froogaloop can be a pain in the arse.
The code to get you started is here:
https://developer.vimeo.com/player/js-api#universal-with-froogaloop
I've adapted that to get it working i think how you expect here:
https://jsfiddle.net/fLe5xs4v/
Setting it up like so:
var iframe = $('#video iframe')[0];
var player = $f(iframe);
Note that if you change the text in the play and pause buttons you will break this code:
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
Give it a shot it should get you going in the right direction at least. Good luck!
I'm loading in videos dynamically by changing the video tag's src in code. When I try my code on an ipad (no idea if it works in the simulator or not), the first video plays fine but the next one just gives me a black screen. I have tried playing the second video first (to check for encoding issues) and it plays fine.
Here is my javascript function that loads/plays the video:
function loadVideo(video_path){
var vid = document.getElementById('v');
vid.src = video_path;
vid.load();
// play the video once it has loaded
vid.addEventListener('canplaythrough', function(e){
vid.style.display = "block";
vid.play();
}, false);
// hide the video container once the video has finished playing
vid.addEventListener('ended', function(e){
vid.style.display = "none";
}, false);
}
Called from my code like:
$('a').click(function(){
switch(video){
case 0:
loadVideo('path/to/myvideo.mp4');
break;
case 1:
loadVideo('path/to/myvideo2.mp4');
break;
case 2:
loadVideo('path/to/myvideo3.mp4');
break;
// etc
}
video++;
});
And my html inside the body tag:
<video id="v" type="video/h264" width="960" height="500"></video>
I have tried removing the video tag after each play and inserting it in again but that had no effect. Ideas welcome! :)
This isn't a solution for your exact question, but the concepts are there and you should be able to adjust it to your own code (the full extent of which I'm not privy to, of course). The following code is something I put together to have the VIDEO element load in and play the next video source in a queue automatically after the current video source is done.
The reason I use timeupdate to check for the video being "near" the end instead of just looking for the ended event is because the ended event is notoriously unreliable on older devices (such as the original iPad). You can use the ended event if you so wish, of course.
(function ($) {
var srcs = [
"video1.mp4",
"video2.mp4",
"video3.mp4",
"video4.mp4"
],
index = 0,
$video = $("#vid").attr("src", srcs[index]).bind("timeupdate", timeUpdateHandler),
video = $video.get(0);
function timeUpdateHandler(e) {
if (video.currentTime >= (video.duration - 0.1)) {
nextVideo();
}
}
function nextVideo() {
index++;
if (index === srcs.length) {
index = 0;
}
$video.attr("src", srcs[index]);
video.play();
}
})(jQuery);
Let me know if this helps you or if you have any questions.
You can use
<video onended="javascript:on_video_ended();"></video>
<script>
function on_video_ended(){
//javascript code goes here.
}
</script>
Is there any way to pause and rewind to 0s a HTML5 video? Or just simply stop?
I got a jQuery popup, so when someone clicks on it, the popup shows up and the video plays, and when you hit the close button the video pauses. So what I'm trying to do is that if you click again the button to show the popup the video begins in the start position (0 secs).
Thanks.
You can get a reference to your jquery video element upon opening it (or closing the popup) and pause it using pause(), and then set the "currentTime" property to 0 to go back to the beginning.
Here's a reference to the documentation for currentTime.
here's a code sample:
var mediaElement = document.getElementById("video");
mediaElement.pause();
mediaElement.currentTime = 0;
To have a proper stop (pause & rewind) functionality you could do the following:
var video = document.getElementById('vidId');
// or video = $('.video-selector')[0];
video.pause();
video.currentTime = 0;
video.load();
Note: This is the only version that worked for me in chrome using nodejs (meteorjs) in the backend, serving webm & ogg files
Just call the pause() method of the video element. To reset the time, set currentTime to 0 (or any other value if needed, in seconds).
To reset a video to 0 seconds in jQuery:
$('#video')[0].currentTime = 0;
Or, in vanilla JS (Although this has been pointed out above):
var video = document.getElementById('video');
video.currentTime = 0;