toggle videos in hero - javascript

I am trying to have 2 different toggle videos as the hero. I will call them Video A and Video B. I want video A to autoplay on the homepage. I have a play button on video A. I want two things to happen when the play button is clicked:
hide Video A.
show video B.
I have successfully hidden Video A when the play button is clicked, but Video B is not visible (I can hear it playing, but cannot see it). I think it is a CSS problem, but am not sure.
Video B is too large to upload (I am using WordPress), so I have it as an iframe. Video A is within a video tag.
HTML:
<video playsinline autoplay muted loop id="poster-video" onclick="hideVid()">
<source src="video.mp4" type="video/mp4">
</video>
<div id="full-video" style="visibility:hidden" onclick="showVid()">
<iframe src="https://player.vimeo.com/video/?autoplay=1&loop=1&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
</iframe>
</div>
<div id="xbut">
<span style="cursor:pointer" onclick="hideVid();showVid()">
<div class="ctrbutton"><img src="play-button-dark.png">
</div>
</span>
</div>
CSS:
video {
object-fit: cover;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
js:
function showVid() {
document.getElementById("full-video").style.display = "block";
}
function hideVid() {
document.getElementById("poster-video").style.display = "none";
}

when you hide video A also set video B visibility on true with

Related

How to have different video popup-s in the same webpage?

I am working on a HTML page, and I want to have different images, and for each of them a popup video. Using a code (html, css, javascript) I can make this for one video: when I click on my image, a video opens in the same page.
But I need different videos for different pictures, and they all open the same first video. How can I direct each picture to a different video?
I have tried using variables in javascript, to connect the image to a video id, each with their own source (link to the video)
Now I tried to make different javascript functions for each video (numbered 1 and 2)
But they still open the same video
this is the java script code (where I added '1', I added '2' for the other one) (I also tried using the video id)
<script>
window.document.onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
*lightbox_close1*();
}
}
function *lightbox_open1*() {
var lightBoxVideo = document.getElementById(**"V1"**);
window.scrollTo(0, 0);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
lightBoxVideo.play();
}
function *lightbox_close1*() {
var lightBoxVideo = document.getElementById(**"V1"**);
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none';
lightBoxVideo.pause();
}
</script>
and this is what I have in html
<div id="light">
<a class="boxclose" id="boxclose" onclick="*lightbox_close1*();"></a>
<video id=**"V1"** width="600" controls>
<source src="10 Creamy Satisfying Pasta Dishes.mp4" type="video/mp4">
<!--Browser does not support <video> tag -->
</video>
</div>
<div id="fade" onClick="*lightbox_close1*();"></div>
<div>
<a href="#" onclick="*lightbox_open1*();">
<div class="container">
<img src="Aperitive.jpg" alt="A" class="image" >
<div class="overlay">
<div class="text">Aperitive</div>
</div>
</div>
</a>
</div>
the other one is just the same but 2 instead of 1, the '**' are just for bolding
(I added image overlay in css)
I changed the code around a bit but the concept is the same I think. You want to change the source of the video when you click on another element. In this case an image.
You can put the video in a modal or pop-up window and set it to close on click. (this function is not included in the example)
All you need to do is to add another element to the unordered list and set the on click function to change to the video with the video element id in the arguments.
Full example below just plug your videos into the video1.mp4 and watch the magic happen.
<=========================================
Edited for clarification
=========================================>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Vid Stuff</title>
<style>
ul{
list-style: none;
text-align: center;
width: 50%;
border: 1px solid black;
}
li{
display: inline-block;
border: 1px solid #ccc;
border-radius: 5px;
width: 100px;
height: 100px;
cursor: pointer;
margin-right: 16px
}
</style>
<script>
//this function takes 2 arguments the video element id
//and the video source.
function changeVid(id, video){
//set the element for the change
var vid = document.querySelector('#' + id + ' source');
//change the source of the element
vid.src = video;
//load the video to play
document.querySelector('#' + id).load();
//logging purposes to see the change in action (optional)
console.log(document.querySelector('#' + id +' source').src);
}
</script>
</head>
<body>
<div class="container">
<div class="video-wrapper">
<video id="myvideo" controls>
<source src="video1.m4v" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<ul>
<!-- onclick of user set myvideo <video> to the video source specified -->
<li onclick="changeVid('myvideo', 'video1.m4v')" > Cat Video 1</li>
<li onclick="changeVid('myvideo', 'video2.m4v')" > Cat Video 2</li>
</ul>
</div>
</body>
</html>

click jquery on a video doesn't work

When I try to click on video using js in Friefox click and display in console the id of the video it doesn't work. Why?
$('.videoclass').click(function() {
console.log(this);
var id = $(this).attr("id");
console.log(id);
})
<video controls="" id="ui-id-1" class="videoclass" style="position: absolute; top: 118px; left: 61px;" width="320" height="240"> <source id="videoavantuuid" src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> </video>
Firefox controls is the Whole Video Tag
Problem
"When I try to click on video using js in Friefox Firefox click and display in console the id of the video it doesn't work. Why? "
Explanation
Firefox has a play button center poster and Chrome does not. This is an obvious indicator that FF has controls attribute that covers the entire tag and Chrome does not, it's controls are accessible only at the bottom where the bar is.
Firefox video tag is interpreting the click on it's controls property first so the click event registered on .vid is never fired or more likely event was fired then e.stopPropagation() was called so nothing else would be triggered by a click.
Recap
To summarize so far:
Firefox video tag behavior: responds to click events with play/pause but no other callbacks are triggered.
Firefox controls interacts with all click events directed to the video tag.
Solution ⭐
If you need controls on the video tag, then do not register the click event on the video tag. Register an alternate yet similar event instead:
mousedown,focus, contextmenu, etc.
Demo
Review the Demo with Firefox:
There's 3 video tags:
   #ID      [controls]      Event             Result on Firefox v.60.0.2
#vid0 ---- true ------ click --------- Plays video / Does not run callback
#vid1 --- false ------ click --------- Does not play video / Runs callback
#vid2 ---- true ------ focus --------- Plays video / Runs callback ⭐
$('.vid').on("click", identify);
$('.ff').on('focus', identify); //⭐
function identify(e) {
var eventcurrentTarget = e.currentTarget.id;
var eventTarget = e.target.id;
var thisId = this.id;
console.log({
eventcurrentTarget,
eventTarget,
thisId
});
}
figure {
width: 320px;
margin: 0 auto 20px 0
}
figcaption {
font-size: 32px
}
.as-console-wrapper {
margin-left: 325px;
width: 40%;
min-height: 96%
}
.as-console-row:after {
display: none !important
}
<figure>
<figcaption>#vid0</figcaption>
<video id="vid0" class="vid" width="320" height="240" controls>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
</figure>
<figure>
<figcaption>#vid1</figcaption>
<video id="vid1" class="vid" width="320" height="240">
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
</figure>
<figure>
<figcaption>#vid2 ⭐</figcaption>
<video id="vid2" class="ff" width="320" height="240" controls>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
</figure>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Change the below piece of the code
$('.videoclass').click(function() {
to
$(document).on('click', '.videoclass', function(){
and it should work.

Transistioning between html videos

I have a html5 webapp that is going to be displayed on tablet devices. In this webapp there is a video that is playing. The users are able to select different areas in the video to play a different video. This is done by overlaying an invisible image with area tags that call up js to switch the video. What I am wondering is if there is a way to load these videos quicker and possibly add some sort of video transition overtop to make it look more professional. Here is my current app:
<!doctype html />
<html>
<body>
<div id="wrapper">
<video id="video" width="320" height="240" autoplay>
<source src="video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div style="position: absolute; left: 8px; top: 8px; z-index: 1;">
<img src="" width="320" height="240" usemap="#grid">
<map name="grid">
<area shape="rect" coords="0,0,160,240" href="javascript:loadLeftVideo()" alt="Left">
<area shape="rect" coords="161,0,320,240" href="javascript:loadRightVideo()" alt="Right">
</map>
</div>
</div>
<script>
function loadLeftVideo() {
document.querySelector("#video > source").src = "left.mp4"
var video = document.getElementById('video');
video.load();
video.play();
}
function loadRightVideo() {
document.querySelector("#video > source").src = "right.mp4"
var video = document.getElementById('video');
video.load();
video.play();
}
</script>
</body>
</html>
Alternatively you could try this solution. Based on Googles Media Source API.

Limit spacebar trigger to button

I don't know how to approach this. If I have two divs div id 1 and div id 2. Div id 2 contains a video but is hidden. Div id1 has a button.
If I use the enter key to activate the button div id 1 is hidden and div id 2 is shown with the video paused. However, if I use the spacebar to activate the button, div id 1 is hidden and div id 2 is shown — except the video is playing because the play button is activated when I used the spacebar on the button.
How do I have it so the div id 1 button only is triggered by pressing the spacebar?
HTML
`<div id="container" role="region" aria-label="Introduction to ...">
<div id="box_01">
<h2> Intro</h2>
<p>Intro content</p>
<button id="button_01" aria-label="Show video">OK</button>
</div>
<div id="box_02" aria-hidden="true">
<video id="video1" preload="auto" width="480" height="360" poster="" data-able-player>
<source type="video/webm" src=""/>
<source type="video/mp4" src=""/>
<track kind="captions" src=""/>
</video>
</div>
</div>`
Basic CSS
.box_02 {
display:none;
}
JQuery
<script>
$('#button_01').on('click', function(e) {
$('#box_01').hide().attr('aria-hidden','true');
$('#box_02').fadeIn(300).attr('aria-hidden','false');
});
</script>
I don't know if this will help - don't do much with videos, sorry. This event handler simply just prevents Enter and Spacebar being handled by the video player element. You could of course do more than this - but hopefully this is enough to get you some progress
$(document).on('keydown', '#video1', function(e) {
if (e.keyCode == 32 || e.keyCode == 13) {
e.preventDefault();
}
});

Stop/Play on DIV show/hide HTML5 Video

You've all been so great in helping me in the past and I'm hoping we can solve this next problem as well.
I am building a slideshow of sorts using videos as backgrounds instead of images. Everything is working perfectly except that the timing of the videos is off because even though my divs are hidden the videos are all playing at the same time.
So, what I need is a JS/jQuery solution to stop (not pause) and play the videos as the divs are hidden/shown. Here's my code so far:
jsfiddle: http://jsfiddle.net/Z2Nq8/1/
JS:
$(function () {
var counter = 0,
divs = $('#video1, #video2, #video3');
function showDiv () {
divs.hide()
.filter(function (index) { return index == counter % 3; }) // figure out correct div to show
.show();
counter++;
};
showDiv();
setInterval(function () {
showDiv();
}, 7 * 1000);
});
HTML:
`<div id="videocont">
<div id="video1" class="display">
<video autoplay loop poster="PHI.png" id="bgvid">
<source src="URL/video.mp4" type="video/mp4">
</video>
<div id="title">Headline text.
</div>
</div>
<div id="video2" class="display">
<video autoplay loop poster="PHI.png" id="bgvid">
<source src="URL/video.mp4" type="video/mp4">
</video>
<div id="title">Headline text.
</div>
</div>
<div id="video3" class="display">
<video autoplay loop poster="PHI.png" id="bgvid">
<source src="URL/video.mp4" type="video/mp4">
</video>
<div id="title">Headline text.
</div>
</div>
</div>`
Thanks!
You have auto play on all of the videos.
Set auto play on the first element, then when you're going through the videos use:
VideoElement.play()
And
VideoElement.pause()
If you want to then reset the video you can do:
VideoElement.currentTime = 0;
To manage the videos playing.
Working Fiddle

Categories