redirect to image after video ends - javascript

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>

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>

Using event listening wait for readyState html5 video

Here is my javascript on loading of video.
var vid = $("#video");
$("#video").on("load",function() {
if ( vid[0].ReadyState === 4 ) {
console.log("loaded video!");
console.log(vid);
vid.fadeIn();
}
});
I want to play my video everytime the video div refreshes after .load() runs. How do i loop this until readyState == 4? I tried using on("canplaythrough") but this is never recognized as a function...
Make sure you set preload="auto" (and don't use autoplay) in the tag, then you can use the canplay event:
var vid = $("#video");
vid.on("canplay", function() {
vid[0].play();
vid.fadeIn(1000);
});
$("#change").on("click", function() {
vid.hide();
vid[0].src = "http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video" width="500" height="280" preload="auto" style="display:none">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="change">Change source (mp4 only for this example)</button>

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>

Javascript to stop HTML5 video download, restore source when video is played

I'm working on a page that has multiple HTML5 video elements that popup in CSS modal boxes when a link is clicked. The page originally would begin download of every video on the page, but, after finding similar topics here, I was able to set the source to be src="", allowing the page to load quickly.
I'm having difficulty now trying to restore the download when a user selects a video and it pops up in the modal box.
I'm not new to Javascript, but I'm also not proficient. Ideally, each video source should be set to "", then when the video is opened, the video should reload. I also added a function to pause the video when the modal is closed as it used to continue playing. Any help or criticism is appreciated, I'm here to learn. Thanks!
HTML:
<div class="image" style="float:left;margin:0;"><img src="video-image.png" alt="Play visualization" width="150"/><br />Layers
<div id="layers" class="modalDialog">
<div>
Close
<h3>Layers</h3>
<video id="videoContainer" class="videoContainer" loop="loop" style="width:698px;">
<source src="video-file.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video-file.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video-file.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
</div>
</div>
Javascript:
$(document).ready(function(){
for(var i=0; i< 20; i++)
{
document.getElementsByTagName("video")[i].src="";
}
$("#showModal").click(function() {
var videoID = document.getElementsById("showModal").getAttribute('href');
var videoElement = document.getElementsById(videoID).getElementsByTagName("video");
videoElement.load();
});
$("#closeModal").click(function() {
$("#videoContainer")[0].pause();
});
});
This answer is maybe related.
Dont have your files but got it working using the following code:
<video id="videoContainer" class="videoContainer" style="width:698px;">
<source id="mp4Source" src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
$("#showModal").click(function () {
var videoID = document.getElementById("showModal").getAttribute('href');
var videoElement = document.getElementById("layers").getElementsByTagName("video")[0];
var srcID = document.getElementById("mp4Source");
videoElement.src = srcID.getAttribute("src");
videoElement.load();
videoElement.play();
});

Categories