How can I change an image by a video on hover - javascript

I would like to do something pretty similar to the netflix page on the browser.
I got an image, when it's hovered, its scale change but I would like to replace the image by a playing video with the song. I've tried to disable/enable on hovering but I got a problem: Its always the same video which is playing (surely because I've used the same id).
I've used JQuery to detect the hover then play the video, and a getElementById to get the video itself...
Here is my javascript code:
$(document).ready(function(){
$('a').hover(function(){
Show()
Play()
}, function(){
Pause()
UnShow()
});
});
const myVideo = document.getElementById("video");
function Play() {
myVideo.play();
}
function Pause() {
myVideo.pause();
}
And my HTML code:
<body>
<nav>
<div class="logo"><h1>My Guitar Site</h1></div>
<div class="search">
<input type="text">
</div>
</nav>
<div class="ensemble">
<div class="song">
<a href="" class="a-song">
<img src="Images/LetMeDownSlowly.jpg" alt="">
<video id="video" width="120">
<source src="Video/test.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</a>
<h5 class="artistenom">Alec Benjamin - Let Me Down Slowly</h5>
</div>
<div class="song">
<a href="" class="a-song">
<img src="Images/CurduroyDreams.jpg" alt="">
</a>
<h5 class="artistenom">Rex Orange County - Corduroy Dreams</h5>
<video id="video" width="120">
<source src="Video/test2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
Thanks for your help

Im not big on jQuery but here's the general concept. You can add the poster attribute as follows. That should show the image.
<video controls poster="/images/cool-image.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg"
</video>
Assuming you have an event for hovering on and another for hovering off you can do the following:
Hover on
Play the video and remove the poster attribute:
function Play() {
var poster = $(vid).attr("poster");
$(vid).attr("poster","");
myVideo.play();
}
Hover off
Stop the video and add the poster attribute:
function Pause() {
var poster = $(vid).attr("poster");
$(vid).attr("poster", "poster.png");
myVideo.pause();
}
Again Im not a jQuery guy but generally I believe that will work.

Related

How to target a video element when there are multiple video files. But also hide that elements play button and listen for when the video ends

I'm trying to add an event listener on multiple videos and I can't seem to find the answer anywhere. I have multiple videos on my page and when the video ends, it has to load the video to be played again, display the replay button and hide the controls. This is the code I have so far. If anyone could please help me find out how to set an eventlistener for 'ended' on a specific video being watched. I would really appreciate it!
HTML
<div class="video-container">
<video class="vidDJ" width="100%" preload="none">
<source src="video1.mp4"
type="video/mp4">
</video>
<div class="vidText">
<div class="playBtn"></div>
<div class="replayBtn"></div>
</div>
<!-- vidText -->
</div>
<!-- video-container -->
<div class="video-container">
<video class="vidDJ" width="100%" preload="none">
<source src="video2.mp4"
type="video/mp4">
</video>
<div class="vidText">
<div class="playBtn"></div>
<div class="replayBtn"></div>
</div>
<!-- vidText -->
</div>
<!-- video-container -->
<div class="video-container">
<video class="vidDJ" width="100%" preload="none">
<source src="video3.mp4"
type="video/mp4">
</video>
<div class="vidText">
<div class="playBtn"></div>
<div class="replayBtn"></div>
</div>
<!-- vidText -->
</div>
<!-- video-container -->
JavaScript
$(document).ready(function() {
var video = document.getElementsByClassNames("vidDJ");
$(".playBtn").click(function() {
var video = $(this).closest(".video-container").find("video")[0];
video.play();
$(this).hide();
$("video").on("click", function() {
video.setAttribute("controls", "controls");
$("video").click(function() {
this.paused ? this.play() : this.pause();
});
});
return false;
});
video.addEventListener("ended", function() {
video.load();
$(".replayBtn").show();
$(".playBtn").hide();
$(".vidText").show();
});
I know the eventlistener I have is garbage but I was trying everything. I remember reading about possibly using querySelectorAll for the video elements and looping over them and THEN adding the event listener but I'm still pretty new to js/jQuery and can't remember how. Any help would be appreciated.
This is a function that adds a replay button and reloads the video when the video finishes. It works by selecting a video based on its id. My problem is using one addeventlistener function for all videos
video.addEventListener('ended',function(){
video.load();
$(".replayBtn").show();
$(".playBtn").hide();
$(".vidText").show();
});

By code that lets the second video start after the first finish ? Or i must use scripts for this to work?

I have 2 links for videos coded in <div>. I need a help by code to let the second video play automatically after the first video has ended.
I am using CSS and HTML5.
This is the code:
<div class="container2">
<video controls src="System Software & Application Software.mp4" autoplay></video>
</div>
<div class="container3">
<video controls src="What is Computer Hardware.mp4"autoplay> </video>
</div>
You need to remove the autoplay from the second video, then create an eventListener on your first video to listen for the ended event and then trigger the second video to play. For instance, with this HTML:
<div class="container2">
<video id="video1" controls src="System Software & Application Software.mp4" autoplay> </video>
</div>
<div class="container3">
<video id="video2" controls src="What is Computer Hardware.mp4"> </video>
</div>
Your JavaScript could look something like this:
document.getElementById('video1').addEventListener('ended',function() {
document.getElementById('video2').play();
},false);

Video not autoplaying inspite of using "autoplay" in the video tag of HTML

The code snippet is given below. I have used impress.js to create an online presentation. I want to insert a video in the last slide which autoplays when the slide comes up. But I am unable to implement that. Can anyone please help me with this?
<div class="step box" data-x="0" data-z="4000" data-rotate-y="0">
<video width="800" height="600" controls autoplay>
<source src="electric_bulb_hd_stock_video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
In impress.js, the DOM prevent video to autoplay, but you can use API, like this:
var videoStep = document.getElementById("video-step");
var video = document.getElementById("video");
videoStep.addEventListener("impress:stepenter", function(){
video.play();
}, false);
videoStep.addEventListener("impress:stepleave", function(){
video.pause();
}, false);
HTML:
<div id="video-step" class="step" data-x="-50000" data-y="2000" data-z="-60000" data-scale="6">
<video id="video" width="420" height="340" autoplay>
<source src="video/test.webm" type="video/webm">
</video>
</div>
With the code above, when you enter this step, the video will play automatically, and it will pause when you leave this step. Give it a try :)
Try autoplay="autoplay"
http://www.w3schools.com/tags/att_video_autoplay.asp
It should work.

Issue with video tag . poster is not visible after video call ends

Initially the poster is visible before video call start after video call ends i am able to see a black background in place of poster in video container.
below is the html tag that i have used for this purpose.
<div id="videoSmall">
<video id="videoInput" autoplay width="240px" height="180px" poster="img/webrtc.png"></video>
</div>
i have tried to reset "videoInput" div with this code
var tag = $("#videoInput").clone();
$("#videoInput").replaceWith(tag);
This code works and brings poster image back but the issue with this is when i am performing video call again without refreshing the page .. the poster is not vanishing in order to show video .
You can do this by adding ended eventListener to the video element, and call the video load() again.
Here is a working example: CodePEN
HTML:
<video id="video" width="320" height="240" controls poster="http://www.w3schools.com/images/w3html5.gif">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
JavaScript / jQuery:
var video= $('#video')[0];
var videoNew= $('#video');
videoNew.on('ended',function(){
video.load();
});

Change HTML5 video button on center

Is there a way to change the button on the center of an HTML5 video tag? I tried positioning the container of the video and adding another absolutely positioned div inside of it with the button as a background and added a script that would trigger the play(); event and it didn't work.
Here's a screenshot: video
Here's my HTML:
<div id="freq-content">
<div class="custom-play"></div>
<video controls>
<source src="_assets_/video/videoplayback.mp4" type="video/mp4">
</video>
</div><!-- /#freq-content -->
Here's my jQuery:
$('.custom-play').click(function(){
$(this).hide();
$('#freq-content video').play();
});
Here's my CSS:
#freq-content{position:relative}
#freq-content video{height:750px;width:100%}
.custom-play{position:absolute;left:0;top:0;right:0;bottom:0;background:url(../images/button-play.png) center center no-repeat}
I want the center button to be like this: enter image description here
move custom play below the video tag:
<div id="freq-content">
<video controls>
<source src="_assets_/video/videoplayback.mp4" type="video/mp4">
</video>
<div class="custom-play"> </div> </div>

Categories