HMTL5 video popup - javascript

i working on website client demanding when someone comes on video it should autoplay (i did it), when someone click on the video it should open in popup (i did it and working fine). Now he asked me when some click on the video1 and the video in popup should start from the same time as the first video already run like 00:35 sec.
`
this is for video
jQuery(document).ready(function(){
jQuery("#video1").click(function(){
jQuery("#video1 source").clone().prependTo('#video2');
});
jQuery("#video1").click(function(){
jQuery("#video1 source:first-child").remove();
});
jQuery("#video2").on("play",function(){
jQuery("#video1").trigger("pause");
});
});
jQuery(document).ready(function(){
jQuery('#video1').click(function(){
jQuery('#vid_overlay').fadeIn('slow');
});
jQuery('#vid_overlay').hide();
jQuery('#video1').click(function(){
jQuery('#vid_overlay').fadeIn('slow');
});
jQuery('#exit_btn').click(function(){
jQuery('#vid_overlay').fadeOut('slow');
});
jQuery('#video1').click(function(){
this.paused?this.play():this.pause();
});
jQuery('#video1').click(function(){
jQuery("#video2").trigger("play");
});
jQuery('#exit_btn').click(function(){
jQuery("#video2").trigger("pause");
});
jQuery('#exit_btn').click(function(){
jQuery("#video1").trigger("play");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video1" width="300" controls autoplay loop>
<source id="video_src" src="videos/BIISummitDubai.mp4" type="video/mp4">
</video>
and this for is popup
<div id="vid_overlay">
<div id="video_wrap">
<span id="exit_btn">×</span>
<video id="video2" width="800" controls loop>
</video>
</div>
</div>

The currentTime property sets or returns the current position (in seconds) of the audio/video playback.
When setting this property, the playback will jump to the specified position.
So, you can get the currentTime of the video1 and then set it to video2
Something like this:
video2.currentTime = video1.currentTime;

you can try css only popup so it will play same video in popup with same duration.
<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<a href="#popup1"> <video id="video1" width="300" controls autoplay loop>
<source id="video_src" src="videos/BIISummitDubai.mp4" type="video/mp4">
</video></a>
</div>
</div>
and css
.overlay:target {
visibility: visible;
opacity: 1;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
}
.overlay:target .popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 300px;
position: relative;
}
.popup .close {
position: absolute;
top: 0px;
right: 0px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
display:none;
}
.overlay:target .popup .close{display:inline-block;}
.popup .close:hover {
color: #06D85F;
}
try this fiddle https://jsfiddle.net/5qce80fs/12/

Related

3 HTML5 Videos in Modals, but only 1 stops and restarts upon closing

Below is my HTML, CSS, and JavaScript code that I used to create the modal. The onclick event only works for one modal and not the other two. I need the video to stop and restart once the modal is closed. This should happen for each modal when they are closed. The stop and restart of the video either works for the first video or the last, but I need it to work for all 3 videos.
HTML
<!----Video Modals--->
<input class="modal-state" id="emailModal" type="checkbox" />
<div class="modal">
<label onclick="stop_and_restart()" class="modal__bg" for="emailModal" ></label>
<div class="modal__inner">
<label onclick="stop_and_restart()" class="modal__close" for="emailModal"></label>
<h2></h2>
<p style="text-align:center"><video id="video" width="624px" height="352px" controls >
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support HTML5 video.
</video></p>
</div>
</div>
<!--- Video - 2--->
<input class="modal-state" id="dashboardModal" type="checkbox" />
<div class="modal">
<label onclick="stop_and_restart()" class="modal__bg" for="dashboardModal" ></label>
<div class="modal__inner">
<label onclick="stop_and_restart()" class="modal__close" for="dashboardModal"></label>
<h2></h2>
<p style="text-align:center"><video id="video" width="624px" height="352px" controls >
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support HTML5 video.
</video></p>
</div>
</div>
<!--- Video - 3 --->
<input class="modal-state" id="calendarModal" type="checkbox" />
<div class="modal">
<label onclick="stop_video1()" class="modal__bg" for="calendarModal" ></label>
<div class="modal__inner">
<label onclick="stop_video1()" class="modal__close" for="calendarModal"></label>
<h2></h2>
<p style="text-align:center"><video id="video" width="624px" height="352px" controls >
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support HTML5 video.
</video></p>
</div>
</div>
<!---Video Modals - End --->
CSS -
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 640px;
margin: 0px auto;
padding: 15px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
}
#media screen and (max-width: 640px) {
.modal-container {
width: 100%;
}
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
background: transparent;
border: none;
font-size: 24px;
margin: 10px;
float:right;
color: #aaa;
}
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
JavaScript -
var vid = document.getElementById("video");
function stop_and_restart() {
vid.pause();
vid.currentTime=0;
}

Overlap two video to make one video with opacity [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
there are 2 videos and one picture. Videos have to be streamed as an overlay over the picture with opacity using HTML5, javascript, and css. I have studied library documents. But still didn't succeed. This Is my Css Javascript and Html File. You have to use the only javascript. I am trying to make a video banner for a website
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
callout {
position: relative;
overflow: hidden;
}
.video-bg,
.video-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
}
.video-overlay {
background: rgba(0,0,0,0.5);
pointer-events: none; /* Allows right clicking on the video to pause etc */
}
.video-bg video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.callout-content {
position: relative;
text-align: center;
margin: 50px 0; /* This adds some space around the video */
color: #FFF;
text-shadow: 0 0 5px rgba(0,0,0,0.4);
}
</style>
<title>videojs-overlay Demo</title>
<link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
<link href="dist/videojs-overlay.css" rel="stylesheet">
</head>
<body>
<section class="callout">
<div class="video-bg">
<video autoplay loop muted poster="path/to/poster.jpg">
<source src="dog.mp4" type="video/mp4">
<source src="tree.mp4" type="video/mp4">
</video>
</div>
<div class="video-overlay"></div>
<div class="callout-inner">
<!-- Our callout content goes here -->
</div>
</section>
</body>
</html>
I think you need to simplify.
opacity appears to work.
#video {
position: absolute;
top: 0;
left: 0;
}
#overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
}
<video id="video" width="320" autoplay loop>
<source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0063.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
<video id="overlay" width="320" autoplay loop>
<source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0074.mov" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>

Video js play on mouse hover

On my web page, I would like to put a video using .js. This video has a background image with a play button. When the user hovers it, automatically the video play. When the user removes the cursor from the video, the video load.
I would like to make the background image appears, right after the user removes the cursor from the video. (Video is still loading)
Do you have any idea?
Here's the code :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="videosList">
<div class="video">
<video class="thevideo" loop="" preload="none">
<source
src="https://www.foldfactory.com/resources/sites/223_site/assets/video-
thumb-star-iron-cross.mp4" type="video/mp4">Your browser does not
support the video tag.</video>
</div>
<p>Passez votre curseur ;)</p>
</div>
<style type="text/css">
#videosList {
width: 100%;
height: auto;
overflow: hidden;
margin: auto;
display: block;
}
.video {
background-image: url('https://image.noelshack.com/fichiers/2018/31/2/1533030900-star-
iron- cross.png');
width: 480px;
height: 270px;
margin-bottom: 50px;
}
video::-webkit-media-controls {
display: none !important;
}
</style>
<script type="text/javascript">
var figure = $(".video").hover(hoverVideo, hideVideo);
function hoverVideo(e) {
$('video', this).get(0).play();
}
function hideVideo(e) {
$('video', this).get(0).load();
}
</script>
Kind regards.
Are you looking for something like this:
var figure = $(".video").hover(playVideo, hideVideo);
function playVideo(e) {
$('video', this).get(0).play();
}
function hideVideo(e) {
$('video', this).get(0).load();
}
#videosList {
width: 100%;
height: auto;
overflow: hidden;
margin: auto;
display: block;
}
/*Add the background here*/
#videosList {
background-image: url('https://picsum.photos/480/270');
width: 480px;
height: 270px;
margin-bottom: 50px;
}
/*Hide the video container by default*/
#videosList .video {
display: none;
width: 480px;
height: 270px;
}
/*Show the video container on hover*/
#videosList:hover .video {
display: block;
}
video::-webkit-media-controls {
display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="videosList">
<div class="video">
<video class="thevideo" loop="" preload="none">
<source src="https://code-love.tk/video/protest.mp4" type="video/mp4">Your browser does not support the video tag.</video>
</div>
</div>
<p>Passez votre curseur ;)</p>
My point is: you can get what you want by using CSS (the display property).

Make video fit 100% with any choosen screen resolution

I have a problem with my application. Every time when I change my screen resolution, my video starts to move out of position (in the center of the screen). Any suggestions on how to make my video stay in the same location even though I change to any other resolution?
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;}
.fullscreen-bg_video {
position: absolute;
border: 6px solid;
padding: 8.5px;
background: #dddddd;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
border-style: solid;
top: 50%;
left: 50%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
html code:
<md-list flex class="side-actions">
<md-list-item ng-repeat="action in $ctrl.sideActions" ng-click="action.callback()">
<md-icon md-svg-src="{{ action.icon }}" aria-label="{{ action.display }}"></md-icon>
<span flex>{{ action.display }}</span>
</md-list-item>
<div class="fullscreen-bg" style="visibility:hidden" id="video_div">
<video class="fullscreen-bg_video" id="video" controls>
<source id="videoSrc" type="video/mp4"> {{$ctrl.videoSrc}}
</video>
<span>
<md-button flex-offset="45" flex="5" class="close" id="closeButton" ng-click="$ctrl.closeVideo()">
<md-icon class="control in-line s-24" md-svg-src="app/assets/icon_remove.svg"></md-icon>
<span>Close</span>
</md-button>
</span>
</div>
</md-list>
According to your CSS I assume your HTML looks something like this:
<div class="fullscreen-bg">
<div class="fullscreen-bg_video">
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>
If my assumption is correct, all you have to do is give the video a widthof 100%
.fullscreen-bg .fullscreen-bg-video video{
width:100%
height:auto;
}

Resize div based on the video size

I've created a button in a video and I've added a <div> on the top of that button. But when I try to resize that video I want that button to resize with that video i.e. I want that <div> to cover that button in the video nicely even when I try to resize the video.
UPDATE
The white box is the div--->
This is what happens when i try to resize the video--->
I tried using percentage values in the CSS but still it's not working maybe because of the outer black bars.
UPDATE 2
.start-button {
width: 42%;
height: 19%;
position: absolute;
top: 3%;
left: 5%;
margin: 20% 0 0 24%;
cursor: pointer;
}
HTML Structure
<div class="container">
<video id="sortedd" class="video-js vjs-default-skin" controls="false" preload="60" data-setup="{}">
<source src="sortedd.mp4" type='video/mp4'/>
</video>
<div class="option-panel">
<!-- Starting of the quiz -->
<div class="start-button"></div>
</div>
</div>
Okay this is how I did it:
The HTML Structure
<div class="container">
<video id="sortedd" class="video-js vjs-default-skin" controls="false" preload="60" data-setup="{}" width="100vw" height="56.25vh">
<source src="sortedd.mp4" type='video/mp4'/>
</video>
<div class="play-button"></div>
</div>
The CSS Styling
.play-button
{
background-color: red;
width: 44vw;
height: 9.687vw;
background: red;
max-height: 18vh;
max-width: 77.222vh;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2147483647;
}
After a lot of hit and trials I somehow managed to make it work. Can anyone please explain me the relation between Maximum values of height and width and the normal height and width.

Categories