I have a video in my page and I would like to have a div with specific controls over the video instead of the regular ones.
I have tried setting the div to absolute but even though the buttons appear, they are not clickable.
Is there any way (without jquery) to do this where the buttons in the div are above the video and clickable?
Video:
<div id="divVideo" style="text-align:center">
<video id="video1" width="720" autoplay loop>
<source src="01_vid.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
Buttons (they have a small script):
<button type="button" onclick="playPause(this)" class="btn btn-primary">▮▮</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
Script (probably unnecessary):
var myVideo = document.getElementById("video1");
function playPause(btn) {
if (myVideo.paused) {
myVideo.play();
btn.innerHTML = "▮▮"
} else {
myVideo.pause();
btn.innerHTML = "►"
}
}
function muteUnmute(etc) {
if (myVideo.muted) {
myVideo.muted = false
etc.innerHTML = "Mute"
} else {
myVideo.muted = true;
etc.innerHTML = "Unmute"
}
}
function goHD(el) {
if (myVideo.width != 1280){
myVideo.width = 1280
el.innerHTML = "SD"
}
else{
myVideo.width = 720
el.innerHTML = "HD";
}
}
This is my CSS:
#botoes {
float: center;
position: absolute;
bottom: 0; z-index: 1;
width: 100%;
text-align: center;
margin-bottom: 10px;
}
#divVideo {
position: relative;
width: 720px;
float: left;
height: 405px;
}
#video {
position: relative;
width: 720px;
height: 405px;
background-color: blue;
float: left;
display: block;
}
How do I make the buttons float over the video (that is inside a div)?
I cannot add a realistic video here. So imagine the image to be a video.
.video {position: relative; width: 350px;}
.video img {display: block;}
.video .buttons {position: absolute; bottom: 0; z-index: 1; width: 100%; text-align: center;}
<div class="video">
<img src="http://placehold.it/350x150" />
<div class="buttons">
<button type="button" onclick="playPause(this)" class="btn btn-primary">▮▮</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
</div>
</div>
If you wanna make it only appear once you hover your mouse over the video, there you go:
.video {position: relative; width: 350px;}
.video img {display: block;}
.video .buttons {position: absolute; bottom: 0; z-index: 1; width: 100%; text-align: center; display: none;}
.video:hover .buttons {display: block;}
<div class="video">
<img src="http://placehold.it/350x150" />
<div class="buttons">
<button type="button" onclick="playPause(this)" class="btn btn-primary">▮▮</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
</div>
</div>
video {
width: 300px;
height: auto;
}
div {
background: rgba(255, 255, 255, .85);
height: 50px;
width: 500px;
position: relative;
top: -50px;
padding: 5px;
}
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png">
<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>
<button>Start</button>
<button>End</button>
</div>
Related
I have videos that play on hover but the overlays I use block this function. I'd like to have an opaque overlay with text pop up over the video and it still plays on hover. So my question is how can I add a text and opaque overlay that doesn't block the play on hover.
reference: https://axisstudiosgroup.com/work/
I am using the following:
js:
jQuery(document).ready(function($){
var oPlayer = $("#" + this.id);
$('.work-grid .work-item').on('mouseenter', '.play-video', function(e) {
e.preventDefault();
oPlayer = $(this);
froogaloop = $f(oPlayer[0].id);
froogaloop.api('play');
}).mouseleave(function() {
froogaloop = $f(oPlayer[0].id);
froogaloop.api('pause');
froogaloop.api("seekTo", 0);
});
});
css:
.work-grid {
display: grid;
grid-row-gap: 25px;
width: 100%;
margin-bottom: 80px;
}
.work-item {
position: relative;
margin-top: 0px;
overflow: visible;
}
.work-wrap {
position: relative;
padding-bottom: 58.25%;
}
.work-item iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0.125rem solid transparent;
}
.work-item img {
display: block;
height: auto;
max-width: 100%;
height: 100%;
width: 100%;
}
html
<div class="work-grid">
<div class="work-item">
<div class="work-wrap">
<a href="#">
<div class="work-item-overlay">
</div>
<div>
<iframe id="player1" class="play-video" src="https://player.vimeo.com/video/#?api=1&player_id=player1&title=0&byline=0&portrait=0&autoplay=0&background=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="work-item-details">
<h3 class="work-item-title">Title</h3>
</div>
</a>
</div>
</div>
Actually, this was solved by simply moving the overlay div to a different position.
<div class="work-item">
<div class="work-wrap">
<a href="example.com">
<div>
<iframe id="player29" class="play-video" src="https://player.vimeo.com/video/#?api=1&player_id=player29&title=0&byline=0&portrait=0&autoplay=0&muted=1&background=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="work-item-details">
<div class="work-item-overlay">
<h3 class="work-item-title">TITLE</h3></div>
</div>
</a>
</div>
</div>
I m trying to add interactive content in a video while it's playing.
However, I kind of got a bit far but stuck at running a skip function upon clicking, forwarding the video time to a minute later.
To get a clear understanding, please take a look at my code.
<!DOCTYPE html>
<html>
<body onload="onstart()">
<div id="stage" class="vid">
<video class="vid" id="video" src="video.mp4" controls></video>
</div>
<div id="one" style="background: black; height: 290px; width: 500px; position: absolute; top: 0px;display:none;">
<img class="oneimage" src="images/danger.png" style="width: 150px; margin-left: 31%;margin-top: 5%;" />
<h2 class="oneh" style="margin-left: 39%; margin-top: 3%;">WAIT..!</h2>
</div>
<div id="two" style="background: white; height: 290px; width: 500px; position: absolute; top: 0px; display: none;">
<img class="oneimage" src="images/imwaiting.gif" style="width: 150px; margin-left: 31%; margin-top: 5%;" />
<h2 class="twoh" style="margin-left: 32%; margin-top: 3%; color: black;">Are you 18+ ..?</h2>
<button class="btn" onClick="skip()" style="background: red;margin-left: 20%;">No</button>
<button class="btn" onclick="proceed()" style="background: #119a54; margin-left: 30%;">Yes</button>
</div>
<div id="three" style="background: black; height: 290px; width: 500px; position: absolute; top: 0px;display:none;">
<img class="oneimage" src="images/anyway.png" style="width: 150px; margin-left: 31%;margin-top: 5%;" />
<h2 class="threeh" style="margin-left: 11%; margin-top: 3%;font-size:18px;color:white;">Then i m gonna have to skip the video to 1 min. LOL</h2>
</div>
<script>
function onstart(){
var v = document.getElementsByTagName('video')[0];
var t = document.getElementById('time');
var skip = document.getElementById('skip');
v.addEventListener('timeupdate',function(event){
// t.innerHTML = v.currentTime;
if(v.currentTime > 5) {
v.pause();
document.getElementById("one").style.display = "block";
setTimeout(function(){
document.getElementById("one").style.display = "none";
document.getElementById("two").style.display = "block";
}, 3000);
} else { }
},false);
}
function skip() {
var v = document.getElementsByTagName('video')[0];
document.getElementById("two").style.display = "none";
document.getElementById("three").style.display = "block";
setTimeout(function(){
document.getElementById("three").style.display = "none";
v.play();
v.pause();
v.currentTime = 59;
v.play();
}, 3000);
}
</script>
</body>
</html>
It works fine till the display: none of class three div upon skip button. but doesn't skips the video to 59 secs as mentioned in the currenttime set.
Any help is greatly appreciated.
After thorough research (banging head on the table) on this, I finally got the solution I need.
Turns out all I need is to remove the event listener timeupdate
so the final code goes as:
<!DOCTYPE html>
<html>
<body >
<style>
.vid {
width:502px;
}
.btn {
width: 50px; font-size: 15px; border: none; font-weight: 600; color: white;border-radius: 5px;
}
.oneimage {
animation-duration: 20s;
animation-timing-function: ease-in;
animation-iteration-count: once;
}
.oneimage{
animation-name: anim-oneimage;
}
#keyframes anim-oneimage {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 25%; opacity: 1; }
}
.oneh {
color: white;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
}
.oneh:hover { font-size: 2em; color: red; }
</style>
<div id="stage" class="vid">
<video class="vid" id="video" src="video.mp4" controls></video>
</div>
<div id="one" style="background: black; height: 289px; width: 502px; position: absolute; top: 0px;display:none;">
<img class="oneimage" src="images/danger.png" style="width: 150px; margin-left: 31%;margin-top: 5%;" />
<h2 class="oneh" style="margin-left: 39%; margin-top: 3%;">WAIT..!</h2>
</div>
<div id="two" style="background: white; height: 291px; width: 502px; position: absolute; top: 0px; display: none;">
<img class="oneimage" src="images/imwaiting.gif" style="width: 150px; margin-left: 31%; margin-top: 5%;" />
<h2 class="twoh" style="margin-left: 32%; margin-top: 3%; color: black;">Are you 18+ ..?</h2>
<button class="btn" onClick="skip()" style="background: red;margin-left: 20%;">No</button>
<button class="btn" onclick="proceed()" style="background: #119a54; margin-left: 30%;">Yes</button>
</div>
<div id="three" style="background: black; height: 271px; width: 501px; position: absolute; top: 0px;display:none;">
<img class="oneimage" src="images/anyway.png" style="width: 150px; margin-left: 31%;margin-top: 5%;" />
<h2 class="threeh" style="margin-left: 11%; margin-top: 3%;font-size:18px;color:white;">Then i m gonna have to skip the video to 1 min. LOL</h2>
</div>
<div id="four" style="background: black; height: 289px; width: 502px; position: absolute; top: 0px;display:none;">
<img class="oneimage" src="images/doubt.png" style="width: 150px; margin-left: 31%;margin-top: 5%;" />
<h2 class="fourh" style="margin-left: 20%; margin-top: 3%;font-size:18px;color:white;">I Doubt it though. Any way Carry On</h2>
</div>
<script>
function skip() {
var vid = document.getElementsByTagName('video')[0];
document.getElementById("two").style.display = "none";
document.getElementById("three").style.display = "block";
setTimeout(function(){
document.getElementById("three").style.display = "none";
vid.currentTime = 59;
vid.play();
}, 3000);
}
function proceed() {
var vid = document.getElementsByTagName('video')[0];
document.getElementById("two").style.display = "none";
document.getElementById("four").style.display = "block";
setTimeout(function(){
document.getElementById("four").style.display = "none";
vid.play();
}, 4000);
}
var pausing_function = function(){
if(this.currentTime >= 5) {
this.pause();
document.getElementById("one").style.display = "block";
setTimeout(function(){
document.getElementById("one").style.display = "none";
document.getElementById("two").style.display = "block";
}, 3000);
// remove the event listener after you paused the playback
this.removeEventListener("timeupdate",pausing_function);
}
};
video.addEventListener("timeupdate", pausing_function);
</script>
</body>
</html>
Hope it helps some one and save A LOT OF TIME..
I can get the video to show up on the page, but it will not play. What is going wrong? (Btw...I am a newbie and am using google chrome and Visual Studio Code.)
Here is the code. I would appreciate ANY help I could get. Thanks!
var vid = document.getElementById("croninvideo");
function play() {
vid.play();
}
function pause() {
vid.pause();
}
.vplayer {
margin-top: 0;
width: 500px;
height: 380px;
}
button {
width: 80px;
height: 40px;
font-size: 16px;
font-weight: bold;
border-radius: 3px;
background-color: lightgray;
}
#video {
max-width: 700px;
height: 370px;
}
<div class="vplayer">
<video id="croninvideo" controls>
<source id="video" src="vid-Cronin.mp4" type="video/mp4">
</video>
</div>
<div class="buttonGroup">
<button onclick="play">Play</button>
<button onclick="pause">Pause</button>
</div>
To run functions you need parentheses, for example myFunction(). You're trying to call a function inside the onclick attributes without parentheses.
var vid = document.getElementById("croninvideo");
function play() {
vid.play();
}
function pause() {
vid.pause();
}
.vplayer {
margin-top: 0;
width: 500px;
height: 380px;
}
button {
width: 80px;
height: 40px;
font-size: 16px;
font-weight: bold;
border-radius: 3px;
background-color: lightgray;
}
#video {
max-width: 700px;
height: 370px;
}
<div class="vplayer">
<video id="croninvideo" controls>
<source id="video" src="vid-Cronin.mp4" type="video/mp4">
</video>
</div>
<div class="buttonGroup">
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
</div>
I´m trying to play my local video on the image click, but somehow, the video does not play. It shows the video "box", but the video wont play. Any ideas how to make the video play after clicking the image?
Thanks a lot!
HTML part: Suppose there is video in each img div - for this example, I included only 1 video
<div class="container-gallery" id="portfolio">
<h1>Portfolio gallery</h1>
<div class="wrapper-gallery" id="index-gallery">
<div class="gallery-img img1">
<div>First image</div>
<video class="hidden" width="1000" controls>
<source src="../video/#6.mp4" type="video/mp4">
</video>
</div>
<div class="gallery-img img2">
<div>Second image</div>
</div>
<div class="gallery-img img3">
<div>Third image</div>
</div>
<div class="gallery-img img4">
<div>Fourth image</div>
</div>
<div class="gallery-img img5">
<div>Fifth image</div>
</div>
<div class="gallery-img img6">
<div>Sixth image</div>
</div>
<div class="gallery-img img7">
<div>Seventh image</div>
</div>
</div>
</div>
CSS Part:
.img-window {
width: 90vw;
height: 92vh;
background-color: rgba(0,0,0,.8);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.img-window img {
max-height: 80vh;
max-width: 80vw;
z-index: 1000;
}
.hidden {
display: none;
}
.show {
display: block;
}
Javascript Part
let galleryImages = document.querySelectorAll('.gallery-img');
let video = document.querySelector('video');
let getLatestOpenedImg;
if(galleryImages) {
galleryImages.forEach(function(image, index) {
image.onclick = function(e) {
e.preventDefault();
getLatestOpenedImg = index + 1;
let container = document.body;
let newVidWindow = document.createElement("div");
container.appendChild(newVidWindow);
newVidWindow.setAttribute("class", "img-window");
newVidWindow.setAttribute("onclick", "closeImg()");
newVidWindow.appendChild(video);
video.classList.remove('hidden');
video.classList.add('show');
video.play();
}
});
}
function closeImg() {
document.querySelector(".img-window").remove();
}
Here's your code unchanged, it seems to be working fine.
Could it be a browser issue that's preventing embedded videos from playing?
let galleryImages = document.querySelectorAll('.gallery-img');
let video = document.querySelector('video');
let getLatestOpenedImg;
if(galleryImages) {
galleryImages.forEach(function(image, index) {
image.onclick = function(e) {
e.preventDefault();
getLatestOpenedImg = index + 1;
let container = document.body;
let newVidWindow = document.createElement("div");
container.appendChild(newVidWindow);
newVidWindow.setAttribute("class", "img-window");
newVidWindow.setAttribute("onclick", "closeImg()");
newVidWindow.appendChild(video);
video.classList.remove('hidden');
// not needed
//video.classList.add('show');
video.play();
}
});
}
function closeImg() {
document.querySelector(".img-window").remove();
}
.img-window {
width: 90vw;
height: 92vh;
background-color: rgba(0,0,0,.8);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.img-window img {
max-height: 80vh;
max-width: 80vw;
z-index: 1000;
}
.hidden {
display: none;
}
/* not needed
.show {
display: block;
}
*/
<div class="container-gallery" id="portfolio">
<h1>Portfolio gallery</h1>
<div class="wrapper-gallery" id="index-gallery">
<div class="gallery-img img1">
<div>First image</div>
<video class="hidden" width="1000" controls>
<source
src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4"
type="video/mp4">
</video>
</div>
<div class="gallery-img img2">
<div>Second image</div>
</div>
<div class="gallery-img img3">
<div>Third image</div>
</div>
<div class="gallery-img img4">
<div>Fourth image</div>
</div>
<div class="gallery-img img5">
<div>Fifth image</div>
</div>
<div class="gallery-img img6">
<div>Sixth image</div>
</div>
<div class="gallery-img img7">
<div>Seventh image</div>
</div>
</div>
</div>
Using the below code, I am getting the result when I debug but I am unable to display the Text without debug.
Style sheet display:'block';
Which is unable to be removed due to this not displaying.
<div class="video-overlay" id="overlayclass"></div>
<video id="preview" muted style="background-color: #2a2a2a;border: 1px solid black; height: 300px; width: 100%;"></video>
(I am using Getusermedia() API)
function toggleFullScreen() {
//var pre1 = preview.webkitDisplayingFullscreen;
if (preview.webkitRequestFullScreen)
{
$(".video-overlay").remove("style");
preview.webkitRequestFullScreen();
var pre = preview.webkitDisplayingFullscreen
if (pre == true) {
$('.video-overlay').text('Recording');
$(".video-overlay").css("display", "flex");
}
}
else if (preview.mozRequestFullScreen)
{
preview.mozRequestFullScreen();
}
}
<div class="video-overlay" id="overlayclass"></div>
<video id="preview" muted style="background-color: #2a2a2a;border: 1px solid black; height: 300px; width: 100%;"></video>
<style>
.video-overlay {
/*display:flex!important;*/
position: absolute;
left: 0px;
top: 0px;
margin: 10px;
padding: 10px 10px;
font-size: 40px;
font-family: Helvetica;
color: #FFF;
float: left;
}
.video-overlay div {
display: flex !important;
}
</style>
Hello Use this code
var overlay= document.getElementById('overlay');
var video= document.getElementById('v');
video.addEventListener('progress', function() {
var show= video.currentTime>=5 && video.currentTime<10;
overlay.style.visibility= show? 'visible' : 'visible';
}, false);
#overlay {
position: absolute;
top: 100px;
color: #FFF;
text-align: center;
font-size: 20px;
background-color: rgba(221, 221, 221, 0.3);
width: 640px;
padding: 10px 0;
z-index: 2147483647;
}
#v {
z-index: 1;
}
<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>
Follow this link here is a demo as per your requirement. Good Luck
http://jsfiddle.net/carmijoon/pzbkx/