Change HTML5 video button on center - javascript

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>

Related

How can I change an image by a video on hover

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.

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

How to click on href link with image on Html 5 video overlay fullscreen?

I have added a text overlay with href link, its working with html5 video, but when i switch video in fullscreen mode, href link is not working, I can see the text(ui) in the fullscreen mode video, but unable to click.can anyone help me?
Jsfiddle
<video id="v" controls>
<source id='mp4'
src="http://media.w3.org/2010/05/sintel/trailer.mp4"
type='video/mp4'>
<source id='webm'
src="http://media.w3.org/2010/05/sintel/trailer.webm"
type='video/webm'>
<source id='ogv'
src="http://media.w3.org/2010/05/sintel/trailer.ogv"
type='video/ogg'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div id="overlay">
This is HTML overlay on top of the video! </div>
thanks

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.

upload content only when showing

I have a video is displaying only when i hover a button and so i want to optimize the loading of my page by uploading this video only when i hover my button, how can i set it ?
$('#iso-fire').mouseover(function(){
$('#bgvid2').show();
});
$('#iso-fire').mouseout(function(){
$('#bgvid2').hide();
video#bgvid2 {
display:none;
}
<div class="circle"></div>
<video autoplay loop id="bgvid2">
<source src="video/fire.mov" type="video/mp4">
</video>

Categories