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.
Related
JS newbie here. I'm in a situation where I need each video in a set to play on mouseover and pause on mouseout. I use a forEach loop to give this functionality to all of them, but now I need to "move" this functionality to div containers for each video, not the videos themselves.
Here's what I'm starting with:
HTML
<video src="/path-to-video" loop></video>
<video src="/path-to-video" loop></video>
<video src="/path-to-video" loop></video>
<video src="/path-to-video" loop></video>
JS
const videos = document.querySelectorAll('video');
videos.forEach(video => {
video.addEventListener('mouseover', function () {
this.play();
});
video.addEventListener('mouseout', function () {
this.pause();
});
});
I need to "transfer" the functionality of the above to a div container for each video. So, when I hover over the video, it is the div container that is actually playing the video, and when I hover away, it is the div container that is pausing the video. So NOT the video itself like it is above.
The HTML would now look like this (essentially):
<div class="item">
<video src="/path-to-video" loop></video>
</div>
<div class="item">
<video src="/path-to-video" loop></video>
</div>
<div class="item">
<video src="/path-to-video" loop></video>
</div>
<div class="item">
<video src="/path-to-video" loop></video>
</div>
I tried this JS:
const items = document.querySelectorAll('.item');
items.forEach(item => {
const video = document.querySelectorAll('video');
item.addEventListener('mouseover', function () {
video.play();
});
item.addEventListener('mouseout', function () {
video.pause();
});
});
This did nothing; none of the videos played on hover.
I also tried:
document.querySelector('.item').addEventListener('mouseover', function () {
const video = document.querySelector('video');
video.play();
});
document.querySelector('.item').addEventListener('mouseout', function () {
const video = document.querySelector('video');
video.pause();
});
This worked as intended on the first video, but not any of the others, and using querySelectorAll made none of them work. Using getElementsByClassName makes none of them work.
I'd prefer to keep the forEach approach but just have each div play and pause its video child using mouseover and mouseout. How could this be achieved? I'm probably not doing something obvious.
items is a NodeList, so you are looping over all of the elements with the "item" class. You can use the querySelector method on the elements you're iterating over to get that element's child video element. Then, you can call play() on that video element.
Basically, you had the right idea, you just need to use querySelector on the item instead of document.
Example:
const items = document.querySelectorAll('.item');
items.forEach(item => {
// see change below
const video = item.querySelector('video');
item.addEventListener('mouseover', function() {
video.play();
});
item.addEventListener('mouseout', function() {
video.pause();
});
});
.item {
width: 300px;
}
video {
width: 300px;
}
<div class="item">
<video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" loop></video>
</div>
<div class="item">
<video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" loop></video>
</div>
<div class="item">
<video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" loop></video>
</div>
<div class="item">
<video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" loop></video>
</div>
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 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.
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
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 }