Fade in icon when video html5 ends - javascript

I am trying to fade in an icon when video finish, but nothing.
Html
<video>
<source src="">
</video>
<div class="icon"></div>
First Try
$("video").on("ended", function() {
$(".icon").fadeIn;
});
Second try
$('video').parent().on("ended", function() {
if($(this).children("video").get(0).paused) {
$(this).children(".icon").fadeIn();
}
});
Actually has onclick event working fine
$("video").parent().on("click", function() {
$(this).children(".icon").fadeToggle();
});

You can try this way:
<video id="myVideo">
<source src="">
</video>
<div class="icon"></div>
var vid = document.getElementById("myVideo");
vid.onended = function() {
alert("The video has ended"); //Just to verify if the event is trapped
$(".icon").fadeIn();
};

You can achieve it in this way
document.getElementById('video').addEventListener('ended',function() {
$(".icon").fadeIn();
},false);

Related

Play video when mouse hovers trigger object

I'm designing a page where i want the video for each post to play when the user hovers the post. I've set it up like this:
<div class="project-link-block">
<div class="video-cover">
<video class="playonhover"height="100%" width="100%" muted playsinline loop data-object-fit="cover">
<source src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e" type="video/mp4">
Your browser doesn't support HTML5 video tag.
</video>
</div>
</div>
<script>
$(document).ready(function() {
$(".playonhover").on("mouseover", function(event) {
this.play();
}).on('mouseout', function(event) {
this.pause();
});
})
</script>
This works, but I actually want the video to play when the top div (class .project-link-block) is hovered, not the video itself. Is there any way to do this? Switching the class in the JS didn't work. Using Webflow for this, in case it's relevant.
Did you also change this when you switched the class? Once you switch the class, the video element is no longer this.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<div class="project-link-block">
<div class="video-cover">
<video class="playonhover" height="100%" width="100%" muted playsinline loop data-object-fit="cover">
<source
src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e"
type="video/mp4">
Your browser doesn't support HTML5 video tag.
</video>
</div>
</div>
<script>
$(document).ready(function () {
$(".video-cover").on("mouseover", function (event) {
$(".playonhover").get(0).play();
}).on('mouseout', function (event) {
$(".playonhover").get(0).pause();
});
})
</script>
See if this code below achieves your expected result. Then convert to JQuery (if required).
<!DOCTYPE html>
<html>
<body>
<div class="project-link-block">
<div class="video-cover">
<video class="playonhover"height="100%" width="100%" muted playsinline loop data-object-fit="cover">
<!-- <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> -->
<source type="video/mp4"
src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e"
>
Your browser doesn't support HTML5 video tag.
</video>
</div>
</div>
<script>
window.addEventListener( "load", on_documentReady );
function on_documentReady()
{
//const myTargets = document.getElementsByClassName("playonhover");
const myTargets = document.getElementsByClassName("project-link-block");
for (var i = 0; i < myTargets.length; i++)
{
myTargets[i].onmouseover = handle_mouseOver;
myTargets[i].onmouseout = handle_mouseOut;
}
}
function handle_mouseOver( evt )
{
//alert( "## was rolled over" );
evt.target.play();
}
function handle_mouseOut( evt )
{
//alert( "## was rolled out" );
evt.target.pause();
}
</script>
</body>
</html>

Image On Hover Play Video And Reset the div with image on completion

I would like to show thumbnails for videos on load and on hover or touch I want to play the video inside the parent div of the image. On mouseout and video ends, the div should show the image automatically. How can I do it?
In simple, I need a homepage just like youtube page. I will show the images first and on hover it should play or pause respective videos.
Can you try this :
var vid = document.getElementById("myVideo");
var text = document.getElementById("text");
function playVid() {
vid.play();
text.innerHTML = "Start Video";
}
function pauseVid() {
vid.pause();
text.innerHTML = "Stop Video";
}
<!DOCTYPE html>
<html>
<body>
<video muted="muted" id="myVideo" onmouseenter="playVid()" onmouseleave="pauseVid()">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
<p id="text"></p>
</body>
</html>
Check out If That's What You Want Here It Is
(Play video on hover over image)
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
Html
<div id="content" style="width: fit-content;">
<img id="image" src="resources/thumb.png" />
<video id="video" style="display:none;">
<source src="resources/video_test.mp4" autoplay="true" muted="muted" type="video/mp4" />
</video>
</div>
jquery script
<script>
//onHover function
$(document).on('mouseover', '#content', function() {
$(this).find("#image").css("display", "none");
$(this).find("#video").css("display", "block");
});
//play video on hover
$(document).on('mouseover', 'video', function() {
$(this).get(0).muted = true;
$(this).get(0).load();
$(this).get(0).play();
});
//pause video on mouse leave
$(document).on('mouseleave', 'video', function() {
$(this).get(0).currentTime = 0;
$(this).get(0).pause();
//hideVideo
$(this).css("display","none");
$(this).find("#image").css("display","block");
});
//show video controls on Click
$(document).on('click', 'video', function() {
if($(this).attr('controls')) {
$(this).removeAttr('controls');
}else {
$(this).attr('controls', '');
}
});
</script>

jQuery mouseleave - mouseenter just work in the First Element

I'm struggling trying to set a mouseenter and mouseleave event in several videos. Everything seems that work perfectly, the video plays when I mouseenter and stop when mouseleave.
However, when I add more than one video, just play the first video. I am trying to figure out what it's missing what I don't find the way to do it.
Here is the link to codepen: https://codepen.io/felixgonzalo/pen/poJoXRW
My code is:
<div class="main-wrapper">
<div class="video-container">
<video id="video" class="video" controls class="border" controls="false" muted loop>
<source src="https://www.errorerror.studio/wp-content/uploads/2020/01/ee.st-honesty-clip-00.mp4" preload="auto" type="video/mp4" autoplay />
</video>
<div class="overlay"></div>
</div>
<div class="video-container">
<video id="video-2" class="video" controls class="border" controls="false" muted loop>
<source src="https://www.errorerror.studio/wp-content/uploads/2020/01/ee.st-honesty-clip-00.mp4" preload="auto" type="video/mp4" autoplay />
</video>
<div class="overlay"></div>
</div>
</div>
jQuery
$('.video').prop('currentTime', 0)
function Play() {
$('.video').get(0).play();
}
function Stop() {
$('.video').prop('currentTime', 0).get(0).pause();
}
$(document).ready(function(){
$('.video-container').mouseenter(function(){
$('.overlay', this).addClass("hide")
Play();
}).mouseleave(function(){
$('.overlay', this).removeClass("hide")
Stop();
});
});
I also tried to make it in JS but didn't work out:
var container = document.querySelector('.video-container');
container.addEventListener('mouseleave', function() {
this.querySelector('.overlay').classList.remove('hide');
Stop();
});
container.addEventListener('mouseenter', function() {
this.querySelector('.overlay').classList.add('hide');
Play()
});
Really appreciate any help
Your function play gets only the first video because you specified the 0 index. You need to pass the current video index you're hovering to trigger the playback.
EDIT: Working code.
I made your functions taking an argument, which I'm setting to the first video element children of the element triggering the mouse events.
$('.video').prop('currentTime', 0)
$(document).ready(function() {
$('.video-container').mouseenter(function() {
$('.overlay', this).addClass("hide")
$(this).children('.video')[0].play();
}).mouseleave(function() {
$('.overlay', this).removeClass("hide")
$($(this).children('.video')[0]).prop('currentTime', 0)
$(this).children('.video')[0].pause();
});
});

Display elements only when player is paused

I want try to display some information inside div content when player is paused, but problem is because this is displayed when player is paused and when is seeked.
I have create example:
var video = $('#video')[0];
video.addEventListener("playing", function() {
$('.text').text('playing');
});
video.addEventListener("pause", function() {
$('.text').text('pause');
});
video {
width:300px;
height:150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">test</div>
<video id="video" controls>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
If you seeking you will see that player is change event to pause. Can't find solution to display something only when player is paused. Any idea?
You can add another event listener for seeking using the WebEvent seeking which is fired when a seek operation began.
Check the Code Snippet below for a practical example of using the seeking event.
var video = $('#video')[0];
video.addEventListener("playing", function() {
$('.text').text('playing');
});
video.addEventListener("pause", function() {
$('.text').text('pause');
});
video.addEventListener("seeking", function() {
$('.text').text('seeking');
});
video {
width:300px;
height:150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">test</div>
<video id="video" controls>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

Show div when the video is paused

This is my code so far, I want to show a div when the video is paused and hide it when the video is resumed.
var video = document.getElementById('video');
video.addEventListener('click', function() {
video.play();
},false);
<video width="1000" height="480" autoplay onclick="this.paused?this.play():this.pause();">
<source src="../../video/operation.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
var video = document.getElementById('video_elm');
video.addEventListener('click', function() {
this.paused?this.play():this.pause();
},
false);
video.addEventListener("pause", function() {
document.getElementById("paused").style.display = "";
});
video.addEventListener("play", function() {
document.getElementById("paused").style.display = "none";
});
<video id="video_elm" width="200" autoplay>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="paused" style="display: none">The video is paused, click it again to resume</div>
First thing you have missed the id="video" attribute on the <video> tag.
<video width="1000" height="480" autoplay
onclick="this.paused?this.play():this.pause();" id="video">
//-----------------------------------------------------^^^^^^^^^^
Secondly, you can use the Media Event pause to bind with the video and show the div.
video.addEventListener('pause', function() {
div.style.display = 'block';
}, false);
You can use the media events that get sent when the video is paused/resumed.
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
video.addEventListener('pause', function() {
// show div
});
video.addEventListener('play', function() {
// hide div
});

Categories