I use tippy.js and when I add a <video loop muted playsinline autoplay> inside a tooltip using allowHTML: true, the video won't autoplay on chrome. It works on firefox and safari though.
How can I achieve this?
Here is my js:
const modal = card.querySelector('.modal'),
modalContent = modal.innerHTML`
tippy('.card', {
content: modalContent,
allowHTML: true,
interactive: true,
animation: 'shift-away',
followCursor: true,
arrow: false
});
And here is my html:
<div class="modal">
<div>
<video loop muted playsinline autoplay>
<source src="http://localhost:8888/artifacts/wp-content/uploads/2022/05/Artifacts-Landing.mp4" type="video/mp4">
</video>
</div>
</div>
I tried to add
card.querySelector('video').play()
but it doesn't work eather.
Thanks a lot in advance for your help,
It is indeed strange that a muted video would not autoplay. You can use setTimeout and then trigger play() using the onShow() event. For some reason onShown() doesn't ever fire for me.
Here's a working snippet:
const modal = document.querySelector('.modal'),
modalContent = modal.innerHTML;
tippy('.card', {
content: modalContent,
allowHTML: true,
interactive: true,
animation: 'shift-away',
followCursor: true,
arrow: false,
onShow(instance) {
setTimeout(() => {
let video = instance.popper.getElementsByTagName('video')[0];
video.currentTime = 0; //start from begining
video.play();
}, 1);
},
});
.modal {
display: none;
}
video {
width: 40vw;
}
.card {
padding-top: 10vh;
}
h1{
display:inline;
margin:1em;
}
<!-- Production -->
<h1 class="card">CARD 1</h1>
<h1 class="card">CARD 2</h1>
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script src="https://unpkg.com/tippy.js#6"></script>
<div class="modal">
<div>
<video loop muted playsinline autoplay>
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/6/6c/%22Movbild-fizika%22_falo_en_Big_Buck_Bunny.webm/%22Movbild-fizika%22_falo_en_Big_Buck_Bunny.webm.720p.vp9.webm" type="video/mp4">
</video>
</div>
</div>
Related
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<video-js
id="overlayVideo"
class="overlayVideo"
data-account="6269594386001"
data-player="oHG2GzKTGk"
data-embed="default"
controls=""
data-video-id="6304418462001"
data-playlist-id=""
data-application-id=""
data-object-fit="cover"
autoplay
muted loop
playsinline
>
</video-js>
<script src="https://players.brightcove.net/6269594386001/oHG2GzKTGk_default/index.min.js"></script>
</div>
<div class="swiper-slide">
<video-js
id="overlayVideo"
class="overlayVideo"
data-account="6269594386001"
data-player="oHG2GzKTGk"
data-embed="default"
controls=""
data-video-id="6304418462001"
data-playlist-id=""
data-application-id=""
data-object-fit="cover"
autoplay
muted loop
playsinline
>
</video-js>
<script src="https://players.brightcove.net/6269594386001/oHG2GzKTGk_default/index.min.js"></script>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
$(document).ready(function () {
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
$(".swiper-button-prev, .swiper-button-next").click(function () {
videojs.getPlayer("overlayVideo").ready(function () {
var myPlayers = this;
myPlayers.muted(true);
});
});
});
By default I am playing the video as muted and when I unmute the video manually and click on swiper next or prev button, the video should go on mute, but currently it is happening only on clicking previous button but not muting on clicking next button. Can someone help me in achieving this. Thanks in advance
<video-js
id="overlayVideo"
You can't have two HTML5 elements or two players with the same id. You need to give them unique ids, and mute (or probably better, pause) only the specific player.
I have a question about how to play / stop the video when I mouse over. The user placed the mouse over the image and the video started playing in the place of the image, and when it was moved, the image returned and the video disappeared. Is it possible and how? I tried something but I have not got what I want.
$(document).on('ready', function() {
$('.image').on('mouseover', function() {
$('.video-preview').toggleClass('video-preview-show');
})
})
.image img {
width: 272px;
height: 160px;
}
.video-preview {
width: 272px;
}
.video-preview {
display: none
}
.video-preview-show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">
<img src="https://content.active.com/Assets/Active.com+Content+Site+Digital+Assets/Cycling/Galleries/Cyclists+Should+Never+Do/cyclist-front.jpg">
</div>
<video class="video-preview lazy-hidden" playsinline="" autoplay="" muted="" loop="" width="100%" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
View on Codepen
Try with this
<div onclick ="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
<video width="400px" height="auto" muted id="video1" onmouseover="this.play()" onmouseout="this.pause()">
<source src="http://mazwai.com/system/posts/videos/000/000/140/preview_mp4_2/joel_gerlach--rain-shot_in_los_angeleswith_the_panasonic_gh4.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
Try the below code. This will help you
$('.image').hover(function() {
$('.video-preview').addClass('video-preview-show');
},
function() {
$('.video-preview').removeClass('video-preview-show');
});
I am trying to play video while hovering over images at the same div in my website's img-gallery but obviously i am doing something wrong.
The supposingly hidden image over which the video should play on mouseover starts trempling.
I think its something obvious but i don't have enough experience to solve it.
Is there any idea how to hide the image at hovering for good?
Here is the code:
HTML
<div id="container">
<div class="viewer">
<img class="thumb" target="#video_1" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_1" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" target="#video_2" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_2" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" target="#video_3" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_3" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
</div>
CSS
.viewer {
width: 530px;
height: 290px;
display:inline-block;
}
video {
width: 100%;
height: 100%;
position: relative;
display: none;
}
JS
$(document).ready(function() {
$('.thumb')
.mouseover(function() {
$(this).hide();
var myVid = $(this).attr('target');
$( myVid ).show().trigger('play');
})
.mouseout(function() {
$('video').trigger('pause').hide()
$(this).show();
});
});
Here is also a saved [PEN]:https://codepen.io/anon/pen/oEwRJQ
The issue with your code is because you're hiding the .thumb element in the mouseover event which immediately triggers the mouseout event which shows it again. This causes a loop of hiding/showing which results in the flickering you see.
To fix this, hook the event to a parent element of both the thumb and the video. That way you don't need to use the non-standard target attribute and can instead find the related video element using DOM traversal, making the code more extensible and robust. You can also use the mouseenter and mouseleave events to prevent any possible flickering when near the edges of the hit area.
$(function() {
$('.viewer').mouseenter(function() {
var $el = $(this);
$el.find('.thumb').hide();
$el.find('video').show()[0].play();
}).mouseleave(function() {
var $el = $(this);
$el.find('.thumb').show();
$el.find('video').hide()[0].pause();
});
});
.viewer {
width: 530px;
height: 290px;
display: inline-block;
}
video {
width: 100%;
height: 100%;
position: relative;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
<div class="viewer">
<img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_1" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_2" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_3" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
</div>
$(document).ready(function() {
$('.viewer').each(function(){
var $this = $(this);
$this.mouseover(function() {
$(this).find('.thumb').hide();
$('video', $this).show().trigger('play');
})
$this.mouseout(function() {
$('video', $this).trigger('pause').hide()
$(this).find('.thumb').show();
});
});
});
I have a question please I got an HTML playing video on hover but once I go away with the mouse I got a hide video function, what I try to do is once I leave the mouse from the playing video to show the placeholder image again something like an Overlay on top of the video. I hope someone can please help me with this.
Here is a live example of the code https://jsfiddle.net/the_nexi/514pwkeo/2/
Thanks in advance
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", function() { hoverVideo(i); });
$(this).on("mouseout", function() { hideVideo(i); });
});
});
function hoverVideo(i) {
$('.thevideo')[i].play();
}
function hideVideo(i) {
$('.thevideo')[i].currentTime = 0;
$('.thevideo')[i].pause();
}
*{font-family: sans-serif}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>If you hover over this Thumbnail the Video will start but once you move the mouse away from the image the Thumbnail (Poster) should appear again with an Overlay this is what I try to do.</p>
<div class="video">
<video class="thevideo" loop muted preload="auto" poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", hoverVideo);
$(this).on("mouseout", hideVideo);
});
});
function hoverVideo() {
$(this).find(".overlayImage").hide();
$(this).find(".thevideo")[0].play();
}
function hideVideo(video) {
$(this).find(".thevideo")[0].currentTime = 0;
$(this).find(".thevideo")[0].pause();
$(this).find(".overlayImage").show();
}
* {
font-family: sans-serif
}
.video {
position: relative;
width: 320px;
}
.overlayImage {
position: absolute;
}
<div class="video">
<img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="http://hdwarena.com/wp-content/uploads/2017/04/Beautiful-Wallpaper.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/rWaXO67Bipm9mgo7/videoblocks-4k-footage-disco-lights-as-an-abstract-colored-animated-background-or-wallpaper-light-leaks_sl5jole0z_thumbnail-small01.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/BxWKHw2nWj8nx9c2x/videoblocks-red-wallpaper-slider_rxlvi6ltb_thumbnail-small11.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
In this, every video is separate from each other, allow me to explain why:
I changed the way you set the functions for the events mouseover and mouseout and now they are event functions.
Inside the functions hoverVideo() and hideVideo(), we hide the image and play the video using $(this) which is passed through the $.on() as the correspondent video div and find the elements (video and image) with $.find().
Optional: I added the width:320px in the css because it was somewhat annoying that it continued playing the video outside of the video because of the bigger width.
If you want you can get rid of the class tags, and use the $.find() function like this, for example:
$(this).find("video")[0].currentTime = 0;
$(this).find("video")[0].pause();
$(this).find("img").show();
In this way it will find every video element inside the div with the .video class and do the rest from there, the same for img.
I hope this code helps you.
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", function() { hoverVideo(i); $(this).find(".overlayImage").hide(); });
$(this).on("mouseout", function() { hideVideo(i); $(this).find(".overlayImage").show(); });
});
});
function hoverVideo(i) {
$('.thevideo')[i].play();
}
function hideVideo(i) {
$('.thevideo')[i].currentTime = 0;
$('.thevideo')[i].pause();
}
*{font-family: sans-serif}
.video {
position:relative;
}
.overlayImage {
position:absolute;
}
<div class="video">
<img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
I hope this updated code help you
My jQuery overlay is this
$(function() {
$("#triggers a[rel]").overlay({
top: '24%',
effect: 'apple',
fixed: false,
mask: {
color: '#0f0f0f',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false
effect: 'apple',
onBeforeLoad: function() {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(div.contentWrap);
}
});
});
and my HTML code is this
<div class="apple_overlay" id="overlay1">
<div class="contentWrap">
<div class="video-js-box">
<video class="video-js" height="191px" width="246px" controls="controls"
preload="auto" poster="url">
<source src="url" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
</video>
</div>
</div>
</div>
My problem is, video player(videoJS) loaded behind overlay. How to Wrap this video player into the overlay. I think there is problem with onBeforeLoad: in jQuery please help me
Give video video-js-box class a high z-index, 99999999 for an example and see if that works.