I am building a slider of videos using flexslider and html5 video tag. How can I make the video autoplay when the slider item has a class of .flex-active-slide?
Any help is appreciated
Here is HTML:
<div class="flexslider_fade">
<ul class="slides">
<li><video onload=playVideo() onplay=pauseslider() onpause=playslider() onended=resumeslider() controls preload="none" width="100%" height="100%">
<source src="videos/myvideo.mp4" type='video/mp4' />
</video></li>
<li><video onplay=pauseslider() onpause=playslider() onended=resumeslider() controls preload="none" width="100%" height="100%">
<source src="videos/myvideo2.mp4" type='video/mp4' />
</video></li>
<li><video onplay=pauseslider() onpause=playslider() onended=resumeslider() controls preload="none" width="100%" height="100%">
<source src="videos/myvideo3.mp4" type='video/mp4' />
</video></li>
</ul>
and the JS:
$(window).load(function() {
$('.flexslider_fade').flexslider({
slideshow: true,
animation: "fade",
animationLoop: true,
video: true,
/* reload video on navigation */
before: function(){
$('video').each(function() {
$(this).get(0).load();
});
},
after: function(){
$('video').each(function() {
if($('.flexslider_fade li').hasClass('flex-active-slide')){
$(this).find('video').attr('autoplay', true);
}
});
}
});
});
function pauseslider() {
$('.flexslider_fade').flexslider("pause");
}
function playslider() {
$('.flexslider_fade').flexslider("play");
}
function resumeslider() {
$('.flexslider_fade').flexslider("next"); $('.flexslider_fade').flexslider("play");
}
Here is one way to accomplish what you need, basically when you are on the active slide, play the video. On before callback just reload video as you have right now. Below is a sample and link to a working example:
HTML:
<div class="flexslider" id="slider">
<ul class="slides">
<li id="slide1"><video controls id="myVideo1" src="test1.mp4" width="360"></video>
</li>
<li id="slide2"><video controls id="myVideo2" src="test2.mp4" width="360"></video></li>
</ul>
</div>
JS:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade",
animationLoop: true,
video: true,
slideshow: true,
before: function(){
//reload video
$('video').each(function() {
$(this).get(0).load();
});
},
after: function(){
//get active id and set it
var active_id = $('.flex-active-slide').attr('id');
//check for which slide is active
if( active_id == "slide1"){
//play video and pause the slider
myVideo1.play();
$('.flexslider').flexslider("pause");
//on video ended go to next slide and play slider
myVideo1.onended = function(){
$('.flexslider').flexslider("next");
$('.flexslider').flexslider("play");
}
}
if( active_id == "slide2"){
//play video and pause the slider
myVideo2.play();
$('.flexslider').flexslider("pause");
//on video ended go to next slide and play slider
myVideo2.onended = function(){
$('.flexslider').flexslider("next");
$('.flexslider').flexslider("play");
}
}
},
});
});
Working sample here: https://jsfiddle.net/l33tstealth/L3m67fqe/51/
Sample derived from this answer on a another question: https://stackoverflow.com/a/28419557/7564143
Hope this information helps.
Related
I would like to show thumbnails for videos on load and on hover or touch I want to play the video inside the parent div of the image. On mouseout and video ends, the div should show the image automatically. How can I do it?
In simple, I need a homepage just like youtube page. I will show the images first and on hover it should play or pause respective videos.
Can you try this :
var vid = document.getElementById("myVideo");
var text = document.getElementById("text");
function playVid() {
vid.play();
text.innerHTML = "Start Video";
}
function pauseVid() {
vid.pause();
text.innerHTML = "Stop Video";
}
<!DOCTYPE html>
<html>
<body>
<video muted="muted" id="myVideo" onmouseenter="playVid()" onmouseleave="pauseVid()">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
<p id="text"></p>
</body>
</html>
Check out If That's What You Want Here It Is
(Play video on hover over image)
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
Html
<div id="content" style="width: fit-content;">
<img id="image" src="resources/thumb.png" />
<video id="video" style="display:none;">
<source src="resources/video_test.mp4" autoplay="true" muted="muted" type="video/mp4" />
</video>
</div>
jquery script
<script>
//onHover function
$(document).on('mouseover', '#content', function() {
$(this).find("#image").css("display", "none");
$(this).find("#video").css("display", "block");
});
//play video on hover
$(document).on('mouseover', 'video', function() {
$(this).get(0).muted = true;
$(this).get(0).load();
$(this).get(0).play();
});
//pause video on mouse leave
$(document).on('mouseleave', 'video', function() {
$(this).get(0).currentTime = 0;
$(this).get(0).pause();
//hideVideo
$(this).css("display","none");
$(this).find("#image").css("display","block");
});
//show video controls on Click
$(document).on('click', 'video', function() {
if($(this).attr('controls')) {
$(this).removeAttr('controls');
}else {
$(this).attr('controls', '');
}
});
</script>
I have a list of multiplem items (.brand-item), each li has a different video inside.
I'm trying to play a video for each li but with the code I have, when I click inside each li it opens the sound of all videos, so it is playing all of them.
How can I rewrite my code to play only the video for each li?
My code, I'm using video.js:
$(".brand-item-info").click(function() {
$(function() {
$('.fullscreen-video video').each(function() {
var player = videojs($(this)[0]);
player.currentTime(0);
player.play();
player.muted(0);
});
});
$(this).next(".fullscreen-video").fadeIn();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
<li class="brand-item">
<div class="fullscreen-video">
<video id="my-player<?php echo $counter; ?>" class="video-js vjs-default-skin" preload="none" playsinline loop muted data-setup='{ "controls": true, "autoplay": false, "fill": true, "preload": "auto" }'>
<source type="video/mp4" src="<?php the_field("brand_-_project_vimeo_distribution_link") ?>">
</video>
</div>
</li>
Use contextual information, aka $(this), so that you only target the .fullscreen-video element that comes right after the clicked button:
$('.brand-item-info').click(function(){
var $fullscreenVideo = $(this).next('.fullscreen-video');
var video = $fullscreenVideo.find('video')[0];
var player = videojs(video);
player.currentTime(0);
player.play();
player.muted(0);
$fullscreenVideo.fadeIn();
});
The following code should help you :
$(".brand-item-info").click(function (e) {
var fullScreenVideoElement = e.target.nextElementSibling;
var videoElement = fullScreenVideoElement.querySelector("video");
var player = videojs(videoElement);
player.currentTime(0);
player.play();
player.muted(0);
$(fullScreenVideoElement).fadeIn();
});
I try to find the right elements from clicked target.
I'm struggling trying to set a mouseenter and mouseleave event in several videos. Everything seems that work perfectly, the video plays when I mouseenter and stop when mouseleave.
However, when I add more than one video, just play the first video. I am trying to figure out what it's missing what I don't find the way to do it.
Here is the link to codepen: https://codepen.io/felixgonzalo/pen/poJoXRW
My code is:
<div class="main-wrapper">
<div class="video-container">
<video id="video" class="video" controls class="border" controls="false" muted loop>
<source src="https://www.errorerror.studio/wp-content/uploads/2020/01/ee.st-honesty-clip-00.mp4" preload="auto" type="video/mp4" autoplay />
</video>
<div class="overlay"></div>
</div>
<div class="video-container">
<video id="video-2" class="video" controls class="border" controls="false" muted loop>
<source src="https://www.errorerror.studio/wp-content/uploads/2020/01/ee.st-honesty-clip-00.mp4" preload="auto" type="video/mp4" autoplay />
</video>
<div class="overlay"></div>
</div>
</div>
jQuery
$('.video').prop('currentTime', 0)
function Play() {
$('.video').get(0).play();
}
function Stop() {
$('.video').prop('currentTime', 0).get(0).pause();
}
$(document).ready(function(){
$('.video-container').mouseenter(function(){
$('.overlay', this).addClass("hide")
Play();
}).mouseleave(function(){
$('.overlay', this).removeClass("hide")
Stop();
});
});
I also tried to make it in JS but didn't work out:
var container = document.querySelector('.video-container');
container.addEventListener('mouseleave', function() {
this.querySelector('.overlay').classList.remove('hide');
Stop();
});
container.addEventListener('mouseenter', function() {
this.querySelector('.overlay').classList.add('hide');
Play()
});
Really appreciate any help
Your function play gets only the first video because you specified the 0 index. You need to pass the current video index you're hovering to trigger the playback.
EDIT: Working code.
I made your functions taking an argument, which I'm setting to the first video element children of the element triggering the mouse events.
$('.video').prop('currentTime', 0)
$(document).ready(function() {
$('.video-container').mouseenter(function() {
$('.overlay', this).addClass("hide")
$(this).children('.video')[0].play();
}).mouseleave(function() {
$('.overlay', this).removeClass("hide")
$($(this).children('.video')[0]).prop('currentTime', 0)
$(this).children('.video')[0].pause();
});
});
I am using idangero.us Swiper slider for my project. I have 3 html5 videos in slider but they are all playing at the same time. I need to pause the video when I click next and play again when it's visible.
HTML:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<video preload="auto" loop="" autoplay="">
<source src=".../>
</video>
</div>
<div class="swiper-slide">
<video preload="auto" loop="" autoplay="">
<source src=".../>
</video>
</div>
</div>
</div>
JS:
var swiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
autoplay: 5000,
});
You can tried this
var sliderVideos = $(".swiper-slide video");
swiper.on('slideChange', function () {
sliderVideos.each(function( index ) {
this.currentTime = 0;
this.pause();
});
});
Just make sure your videos have a class of d3-vid (you can change just change in script too). This works on HTML5 videos and embedded videos. Kinda a hack because it's just resetting the src but hey it works great. Do like this:
var radSwiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
autoplay: 5000,
});
radSwiper.on('slideChange', function () {
document.querySelectorAll('.d3-vid').forEach(iframe => {
iframe.setAttribute('src', iframe.getAttribute('src'));
});
document.querySelectorAll('.d3-vid').forEach(video => {
video.setAttribute('src', video.getAttribute('src'));
});
});
I don't know why people have to be so diff haha.
I have a div like so for containing flowplayer:
<div id="vidPlayer">
<div class="flowplayer" id="flowplayer">
<video autoplay>
<source type="video/mp4" src="media/video/Lesson1.mp4">
</video>
</div>
</div>
That is just a place holder. Later, I load a video into the player with JS like:
var api = flowplayer();
api.load([
{ mp4: "media/video/Lesson2.mp4" },
{ webm: "media/video/Lesson2.webm" }
]);
The video loads fine, but I have to click it to begin play.
Try this code
clip: { autoPlay: true }