Show div when the video is paused - javascript

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
});

Related

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>

Fade in icon when video html5 ends

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);

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>

redirect to image after video ends

i am working on a site that has a video as soon as we enter the site.
The problem is it just ends and I want to replace it with an image after it ends.
Is there a way I can redirect it within the same container.?
<video id="video_background" preload="auto" volume="5" autoplay="1"><!--or turn on loop="loop"-->
<source src="videos/trailer.webm" type="video/webm">
<source src="videos/trailer.mp4" type="video/mp4">
<source src="videos/trailer.ogv" type="video/ogg ogv">
</video>
You'll have to use JavaScript to detect video end but it's easy to implement:
var video = document.getElementById('video_background');
video.addEventListener('ended', function() {
// show image here
}, false);
I would recommend to target a parent container which has a pre-loaded image hidden and which you toggle to when the event kicks in (obviously also hiding the video element).
You could also add the image dynamically but be aware of that you will have a delay while the image is loading.
You need to wrap your video tag in a div container. Try the following code:
CSS:
#wrapper{
width:640px;
height:360px;
background:#000;
}
#image_background{
display:none;
}
HTML:
<div id="wrapper">
<video id="video_background" preload="auto" volume="5" autoplay="1" width="100%" height="100%">
<source src="videos/trailer.webm" type="video/webm" />
<source src="videos/trailer.mp4" type="video/mp4" />
<source src="videos/trailer.ogv" type="video/ogg ogv" />
</video>
<img id="image_background" src="yourImage.jpg" width="100%" height="100%" />
</div>
JS:
var video = document.getElementById('video_background');
var wrapper = document.getElementById('wrapper');
var image = document.getElementById('image_background');
video.addEventListener('ended', function() {
video.style.display = 'none';
image.style.display = 'inline';
}, false);
EDIT: how do i smooth-en the transition fade it in or something?
I would use jQuery for this as it is built with such functionalities.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var video = $('#video_background');
var image = $('#image_background');
video.on('ended', function() {
$(this).fadeOut('200',function(){//$(this) refers to video
image.fadeIn('200');
});
});
</script>

play video before redirecting to another page

I want to use a video as a background that automatically stretches to the whole screen,in such a way that if a page is loaded then just before the loading of the content a video plays for 5 sec then it pauses and contents are loaded and again start playing if user clicks on another link,and the user will not be redirected before the video finishes.
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
});
my code is working fine its just that I don't know how to play the video just before redirecting to another page without using an intermediate page
<script type="text/javascript">
function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("Video1");
video.currentTime += value;
}
</script>
</head>
<body>
<video id="Video1" >
// Replace these with your own video files.
<source src="demo.mp4" type="video/mp4" />
<source src="demo.ogv" type="video/ogg" />
HTML5 Video is required for this example.
Download the video file.
</video>
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>
Think you need something like this:
$( "a" ).click(function( event ) {
event.preventDefault();
var link = $(this).attr('href');
BV.play();
BV.addEvent("ended", endFunc);
function endFunc(link) {
window.location = link;
};
});
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls" preload="auto">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</body>
</html>

Categories