Video js play on mouse hover - javascript

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).

Related

Clicking the fade doesn't around lightbox doesn't close it

I want to create a button action where upon click, a video light box opens and when the visitor clicks anywhere else outside of the video (the fade), the video closes. So far, other features work except when I click on fade near the edge of the video, it doesn't close. So here's my html, css & js.
<div id="motionVideo">
<div class='motionButton' onclick="motionLightbox_open();"></div>
<div id="motionLight">
<video id="motionShowreel" width='1280' height='720' controls>
<source src="./motionGraphic.mp4" type="video/mp4">
<!--Browser does not support <video> tag -->
</video>
</div>
<div id="motionFade" onClick="motionLightbox_close();">
</div>
<div class="motionShowreel">
<video src="./motionGraphic.mp4" width="100%" height="50%"></video>
</div>
</div>
#motionVideo {
/*background: #ffc8b2;*/
grid-area: motionVideo;
}
.motionButton{
background-image:url(./mg.png);
background-position:center center;
background-repeat: no-repeat;
background-size: 70%;
width:100%;
height:100%;
/*position: relative;
top:20vh;
left:-20vw;*/
}
.motionShowreel{
width: 100%;
height: 100%;
position: relative;
top: -120vh;
left: 0vw;
z-index: -1;
}
#motionFade {
display: none;
position: fixed;
width: 100%;
height: 100%;
background-color: black;
top:0%;
left:0%;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
#motionLight {
display: none;
position: absolute;
padding: 10vw;
top:0;
align-items: center center;
justify-content: center center;
z-index: 1002;
cursor: pointer;
}
window.document.onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
motionLightbox_close();
}
}
function motionLightbox_open() {
var lightBoxVideo = document.getElementById("motionGraphic");
window.scrollTo(0,150);
document.getElementById('motionLight').style.display = 'block';
document.getElementById('motionFade').style.display = 'block';
lightBoxVideo.pause();
}
function motionLightbox_close() {
var lightBoxVideo = document.getElementById("motionGraphic");
document.getElementById('motionLight').style.display = 'none';
document.getElementById('motionFade').style.display = 'none';
lightBoxVideo.pause();
}
When I try clicking on the fade near the edge of the video, the video doesn't close. Only by scrolling down further and clicking does it close. How do I fix this issue?
Seems like div by ID motionLight is occupying the space around the player (it has a huge padding). Try adding the close handler also to that div:
<div id="motionLight" onclick="motionLightbox_close()">
</div>
Working example
window.document.onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
motionLightbox_close();
}
}
function motionLightbox_open() {
var lightBoxVideo = document.getElementById("motionGraphic");
window.scrollTo(0,150);
document.getElementById('motionLight').style.display = 'block';
document.getElementById('motionFade').style.display = 'block';
lightBoxVideo.pause();
}
function motionLightbox_close() {
var lightBoxVideo = document.getElementById("motionGraphic");
document.getElementById('motionLight').style.display = 'none';
document.getElementById('motionFade').style.display = 'none';
lightBoxVideo.pause();
}
#motionVideo {
/*background: #ffc8b2;*/
grid-area: motionVideo;
}
.motionButton{
background-color: #EEEEEE;
width:100%;
height:100%;
width: 100px;
height: 30px;
/*position: relative;
top:20vh;
left:-20vw;*/
}
.motionShowreel{
width: 100%;
height: 100%;
position: relative;
top: -120vh;
left: 0vw;
z-index: -1;
}
#motionFade {
display: none;
position: fixed;
width: 100%;
height: 100%;
background-color: black;
top:0%;
left:0%;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
#motionLight {
display: none;
position: absolute;
padding: 10vw;
top:0;
align-items: center center;
justify-content: center center;
z-index: 1002;
cursor: pointer;
}
<div id="motionVideo">
<div class="motionButton" onclick="motionLightbox_open();">Open</div>
<div id="motionLight" onclick="motionLightbox_close()">
<video id="motionShowreel" width='1280' height='720' controls>
<source src="./motionGraphic.mp4" type="video/mp4">
<!--Browser does not support <video> tag -->
</video>
</div>
<div id="motionFade" onClick="motionLightbox_close();">
</div>
<div class="motionShowreel">
<video id="motionGraphic" src="./motionGraphic.mp4" width="100%" height="50%"></video>
</div>
</div>

Using youtube link as src in video components the video is not getting load in reactjs

I have created a video component in reactjs. When give the link of video in src then it's working fine but when I try to put the youtube video url then the video is not getting load.
Below is my code for video link
Appone.js
import React, { useState, useRef } from "react";
import { Col, Container, Row } from "reactstrap";
import "./MobVideo.css";
function MobVideo() {
const slider = useRef();
const videoslider = (links) => {
slider.current.src = links;
};
return (
<div id="showreal" className="video-title">
<h1>With video Url</h1>
<div
className="video-slider-container mt-4 mb-4"
style={{ maxWidth: "100%" }}
>
<video
src="https://ak.picdn.net/shutterstock/videos/1054733276/preview/stock-footage-the-girl-walks-through-the-meadow-in-thick-high-grass-and-her-hand-touches-the-tops-of-the-ears-in.webm"
ref={slider}
className="slider"
autoplay
loop
controls
></video>
<ul>
<li
onClick={() =>
videoslider(
"https://ak.picdn.net/shutterstock/videos/1054733276/preview/stock-footage-the-girl-walks-through-the-meadow-in-thick-high-grass-and-her-hand-touches-the-tops-of-the-ears-in.webm"
)
}
>
<video src="https://ak.picdn.net/shutterstock/videos/1054733276/preview/stock-footage-the-girl-walks-through-the-meadow-in-thick-high-grass-and-her-hand-touches-the-tops-of-the-ears-in.webm"></video>
</li>
<li
onClick={() =>
videoslider(
"https://ak.picdn.net/shutterstock/videos/1033184651/preview/stock-footage-camera-follows-hipster-millennial-young-woman-in-orange-jacket-running-up-on-top-of-mountain-summit.webm"
)
}
>
<video src="https://ak.picdn.net/shutterstock/videos/1033184651/preview/stock-footage-camera-follows-hipster-millennial-young-woman-in-orange-jacket-running-up-on-top-of-mountain-summit.webm"></video>
</li>
<li
onClick={() =>
videoslider(
"https://ak.picdn.net/shutterstock/videos/1054740791/preview/stock-footage-happy-girl-teen-child-closed-her-eyes-dream-teenage-kid-wants-a-dream-come-true-portrait-at-sunset.webm"
)
}
>
<video src="https://ak.picdn.net/shutterstock/videos/1054740791/preview/stock-footage-happy-girl-teen-child-closed-her-eyes-dream-teenage-kid-wants-a-dream-come-true-portrait-at-sunset.webm"></video>
</li>
</ul>
</div>
</div>
);
}
export default MobVideo;
Mobvideo.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.video-title {
background-color: #0b060269;
padding-top: 0.1rem;
/* padding-bottom: 0.5rem; */
}
.video-slider-container {
max-width: 100%;
height: 70vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.video-slider-container .slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.video-slider-container ul {
position: absolute;
bottom: -60px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
z-index: 20;
}
.video-slider-container ul li {
list-style: none;
cursor: pointer;
margin: 10px;
}
.video-slider-container ul li video {
width: 50px;
transition: all 0.3s;
}
.video-slider-container ul li video:hover {
transform: scale(1.1);
}
video {
width: 100%;
height: 100%;
}
#media screen and(max-width: 599px) {
.video-slider-container {
max-width: 100%;
height: 40vh;
}
.video-slider-container ul li {
margin: 5px;
}
.video-slider-container ul li video {
width: 30px;
}
}
#media (min-width: 768px) and (max-width: 1024px) {
.video-slider-container {
max-width: 100%;
height: 80vh;
}
}
#media (max-width: 768px) {
.video-slider-container {
max-width: 100%;
height: 40vh;
}
}
Whenever I tried to put the youtube link then the video and bottom thumbnails not getting load.
I don't know what is the issue in this. How can I solve this?
Below I have provided the Code link
codesandbox
Don't use video tag if you want to use YouTube links
Also, if your YouTube link looks like https://www.youtube.com/watch?v=TlN5frP4VuI&t=253s
then maybe your video will not work.
so, use https://www.youtube.com/embed/eSIJddEieLI?autoplay=1&mute=1
example:-
<iframe
width="420"
height="315"
src="https://www.youtube.com/embed/eSIJddEieLI?
autoplay=1&mute=1"
title="YouTube video player"
frameborder="0"
></iframe>
According to Google embedded guide, you would need to use an iframe instead:
So change your <video> from:
<video
src="https://www.youtube.com/watch?v=FUiu-cdu6mA&ab_channel=AjukZz"
ref={slider}
className="slider"
autoplay
loop
controls
></video>;
TO:
<iframe
width="560"
height="315"
auto
src="https://www.youtube.com/embed/z2OXnXu3_nc?controls=0&autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>;
Working Example:

Video.js controls showing wierdly, why?

My video.js controls are not showing in the video but outside the video with lot's of unnecessary options as shown in the screenshot below.
My code is like this:
{% block content%}
<style>
#video-js {
max-width:auto;
width:auto;
max-height:auto;
height:auto;
margin:auto;
padding:auto;
background-color: #343A40;
}
</style>
<video
id="video-js"
class="video-js vjs-custom-skin"
controls
preload="auto"
width=""
height=""
data-setup=""
autoplay
>
<source src="http://url.m3u8" type="application/x-mpegURL" />
<source src="http://url.flv" type="video/x-flv" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<br>
<br>
<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
<script src="https://unpkg.com/browse/#videojs/http-streaming#2.6.0/dist/videojs-http-streaming.js"></script>
{% endblock %}
How can I have these weird controls be gone and just have normal in video controls like play, pause, mute, volume up/down.
You need to add the Video.js styles, https://vjs.zencdn.net/7.10.2/video-js.css
Also, while it's not the cause of the problem, including http-streamimg is redundant. It's included in Video.js 7+.
After adding the Video.js styles mentioned above, you
should then be able to eliminate, re-arrange controls and tweak coloring,
by adding lines like these:
<!-- Change ordering "current-time / duration" to appear on control-bar: -->
<!-- See: https://github.com/videojs/video.js/issues/2507 -->
<style>
.video-js .vjs-current-time { display: block; }
.video-js .vjs-time-divider { display: block; }
.video-js .vjs-duration { display: block; }
.video-js .vjs-remaining-time { display: none; }
.video-js .vjs-load-progress{display: inline-block; background: PaleGreen; height: 8px; width:100%; }
.video-js .vjs-play-progress{display: inline-block; background: LightCoral; height: 8px; width:100%;}
.video-js .vjs-picture-in-picture-control { display: none; }
# (These with leading "#" sign are 'commented-out'...are present here just so the NAMES of various entities are avail for experimenting.)
#.video-js .vjs-progress-holder { margin-left: 0px; margin-right: 0px; background: Blue; }
#.video-js .vjs-loading-spinner{display: block;}
#.video-js .vjs-progress-holder .vjs-play-progress { display: none; }
</style>
Hope these help...

HMTL5 video popup

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/

Play video from list of video playlist, responsive video gallery

I have created a video playing content with jPlayer and additionally, I have added a video img thumbnail gallery to allow users to click and view additional video resources.
Furthermore, I have set the following features for the implementation of the video:
1.) The main video frame will automatically play the default video, this video will always be playing until a user chooses the next/new video
2.) User get to scroll through the scrollable video thumbnail gallery, each video Thumbnail will have a video title and brief description.
3.) When user selects any new video, the new video will replace the current playing video
4.) Users gets to exit the video at any point of the video and it will bring them back to the video page where they can select a new video.
Therefore, these are the following features that defines the behaviour of the video playing content.
Issue:
I have managed to set the video for the following features till feature3. Issue arises at feature 4, whereby when user selects the new video, the new video will be displayed, replacing the current video that is playing however, at this point, there is no way that the user can exit from the video.
I could only exit the video by either refreshing the page or clicking on the back button from the toolbar, this is a behaviour that I do not want. The user should be able to exit the video from the video that is playing.
Hence, how am I able to rectify the issue?? Thanks.
I have attached the code for perusal.
$("#Reading_Video").jPlayer({
ready: function() {},
swfPath: "javascript",
supplied: "webmv, ogv, m4v",
loop: true,
fullScreen: true,
size: {
width: 500,
height: 500
}
}).bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
$(this).jPlayer("pauseOthers");
}).bind($.jPlayer.event.click, function() {
// allow for full screen
console.log("fullscreen")
var video_elem = document.getElementById("Reading_Video");
if (video_elem.requestFullscreen) {
video_elem.requestFullscreen();
} else if (video_elem.msRequestFullscreen) {
video_elem.msRequestFullscreen();
} else if (video_elem.mozRequestFullScreen) {
video_elem.mozRequestFullScreen();
} else if (video_elem.webkitRequestFullscreen) {
video_elem.webkitRequestFullscreen();
}
});
$("#Reading_Video").jPlayer("setMedia", {
//set m4v tag to array Footprints VideoList
m4v: "lib/video/Video_1.mp4"
}).jPlayer("play");
$("#Reading_Video").show();
}
function loadVideo(event, videoID) {
$("#EnjoyReading_Video").loadVideoByID(videoId);
event.preventDefault();
}
.playListContainer {
position: absolute;
top: 180px;
left: 1350px;
height: 750px;
width: 550px;
overflow: scroll;
}
.innerScroll {
position: absolute;
overflow-y: scroll;
}
.playListThumb {
position: relative;
width: 300px;
height: 200px;
float: left;
top: 25px;
left: 0;
overflow: hidden;
}
.playListInfo {
position: relative;
right: 0px;
left: 10px;
top: 20px;
float: right;
width: 250px;
height: 230px;
overflow: hidden;
}
.playListTitle {
position: relative;
font-size: 30px;
color: #c66 !important;
font-weight: 700;
}
.playListContent {
position: relative;
font-size: 20px;
color: #000 !important;
font-weight: 300;
}
<div id="ReadingPage" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=2; top:0px; left:1921px; ">
<!--Video Div-->
<div id="Reading_Video" style="position:absolute; left: 120px; top: 180px;"></div>
<!--Video Thumbnail-->
<div class="playListContainer">
<div class="innerScroll">
<div id="Thumbnail_1" style="position:relative; width:550px; height: 250px;" data-id="1" data-type="local">
<a href="lib/video/ReadingVideo_1.mp4" onclick="loadVsideo(event, 1)">
<div class="playListThumb">
<img alt src="lib/img/Thumbnail_1.png" style="opacity:1;">
</div>
<div class="playListInfo" align="left">
<p>
<span class="playListTitle"><strong>Video Title</strong></span>
<br>
<span class="playListContent">Video Description</span>
</p>
</div>
</div>
<div id="Thumbnail_2" style="position:relative; width:550px; height: 250px" data-id="2" data-type="local">
<a href="lib/video/ReadingVideo_2.mp4" onclick="loadVideo(event, 2)">
<div class="playListThumb">
<img alt src="lib/img/Thumbnail_2.png">
</div>
<div class="playListInfo" align="left">
<p>
<span class="playListTitle"><strong>Video Title</strong></span>
<br>
<span class="playListContent">Video Description</span>
</p>
</div>
</div>
</div>
</div>

Categories