I am using fullscreen.js to display multiple slides containing video on each slide. I would like to use the afterSlideLoad event to do the following:
Mute the previous slide video
Unmute the video in the 'active' slide
The furthest I have gotten is unmuting the video on slide2 load, however it stays unmuted after leaving the slide to the next video.
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: true,
fitToSection: true,
controlArrows: false,
afterRender: function(){
//playing the video
$('video').get(0).play();
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
$('#myVideo').prop('muted', false)
},
});
});
</script>
<div id="fullpage">
<div class="section" id="section1">
<div class="slide" id="slide1">
<video autoplay loop muted id="myVideo">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
</div>
<div class="slide" id="slide2">
<video autoplay loop muted id="myVideo2">
<source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm">
<source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
From the docs, i think you can use the onLeave() callback:
$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction){
// mute video from last slide
$('video').eq(index-1)[0].muted = true;
// unmute video from current slide
$('video').eq(nextIndex-1)[0].muted = false;
},
});
Interestingly the index starts at 1, so you'd have to use index-1.
Related
Currently I am looking for some help with my mouse over event.
<div class="video-container">
<video id="my_video" loop muted poster="IMAGE_URL"> <!-- put your image here -->
<source src="VIDEO_URL" type="video/mp4"> <!-- path to your video here -->
</video>
</div>
Above is my video-container, on my index page I am displaying 10 videos. Each of them should show a preview of the video when being hovered, however with my current javascript only the first video with my_video id is displaying the video preview when hovering.
let myVideo = document.getElementById("my_video");
myVideo.addEventListener("mouseover", () => {
myVideo.play()
image.style.display = 'none'
});
myVideo.addEventListener("mouseleave", () => {
myVideo.pause();
});
How can I make it so that all videos on my homepage, behave in the same manner?
Since you do the getElementById, it only covers one element. And ID must be unique to elements in HTML, you cannot have multiple elements with same ID. You can give all of the video elements the same class and apply all of them at once, or just apply to all video elements directly
let myVideos = document.querySelectorAll("video");
myVideos.forEach(vid => {
vid.addEventListener("mouseover", () => {
vid.play();
});
vid.addEventListener("mouseleave", () => {
vid.pause();
});
})
<div id="container">
<video id="my_video_1" loop muted poster="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.tiverton.ri.gov%2Fimg%2Fcontent%2Ftrees%2Fhome_tree.png&f=1&nofb=1&ipt=c0fbdc7aa01163cdffb57908bb424286af2ebd3b6352a581d61660f31a299a51&ipo=images"> <!-- put your image here -->
<source src="VIDEO_URL" type="video/mp4"> <!-- path to your video here -->
</video>
<video id="my_video_2" loop muted poster="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.tiverton.ri.gov%2Fimg%2Fcontent%2Ftrees%2Fhome_tree.png&f=1&nofb=1&ipt=c0fbdc7aa01163cdffb57908bb424286af2ebd3b6352a581d61660f31a299a51&ipo=images"> <!-- put your image here -->
<source src="VIDEO_URL" type="video/mp4"> <!-- path to your video here -->
</video>
</div>
You have multiple elements with the same ID. This is your problem, ID's must be unique.
You want something like this
Note you also should not use fat arrow functions for event listeners
//Get the video elements we want
let videos = document.querySelectorAll(".video-container video");
//Loop the elements
videos.forEach((el) => {
//Add the event listeners
el.addEventListener("mouseover", function() {
console.log("Play " + this.querySelector("source").src);
this.play();
});
el.addEventListener("mouseleave", function() {
console.log("Pause " + this.querySelector("source").src);
this.pause();
});
});
<div class="video-container">
<video loop muted poster="IMAGE_URL"> <!-- put your image here -->
<source src="VIDEO_URL" type="video/mp4"> <!-- path to your video here -->
</video>
</div>
<div class="video-container">
<video loop muted poster="IMAGE_URL"> <!-- put your image here -->
<source src="VIDEO_URL2" type="video/mp4"> <!-- path to your video here -->
</video>
</div>
I am trying to use Bootstrap carousel with videos. I have a list of videos and images. I need to auto-play them using this carousel.
Currently, Bootstrap plays the every first video but I also wish to automatically play all other videos when the slide into the screen. But, every first video play, the other video also playing too although the screen inactive.
Or, when the carousel returns to the first screen, the video has ended. that's my problem
Any thoughts?
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner" >
<div class="carousel-item active" >
<video id="myVideo" height="400" autoplay muted>
<source src="../../lib-indah/asset/content/6.mp4" type="video/mp4">
</video>
</div>
<div class="carousel-item">
<video id="myVideo" height="400" autoplay muted>
<source src="../../lib-indah/asset/content/6.mp4" type="video/mp4">
</video>
</div>
<div class="carousel-item">
<img src="../../lib-indah/asset/content/1.jpg" height="300" class="d-block w-100" alt="...">
</div>
</div>
</div>
Javascript
$('.carousel').carousel('cycle');
$('video').on('play', function (e) {
$(".carousel").carousel('pause');
});
$('video').on('ended', function (e) {
$(".carousel").carousel('cycle');
});
$('#myCarousel').bind('slid.bs.carousel', function () {
var currentIndex = $('div.active').index() + 1;
if (currentIndex == 1) {
$('#myVideo').play()
}
});
i want to make carousel bootstrap with video lists and some images. but when video playing, the other video on inactive screen stop to play. and, when the screen active again the video also playing
I am using tns-slider pluging and have 3 slides (2 photos and 1 video)
<div class='tiny-slider'>
<div class='slide slide1'>
<div class='video-slide'>
<video id="desk" loop autoplay muted>
<source src="/videos/small.mp4" type="video/mp4">
</video>
</div>
</div>
<div class='slide slide2'>
<div class='slide-overlay'>
<div class='slide-title'>Slide two</div>
</div>
</div>
<div class='slide slide3'>
<img src="https://placeimg.com/700/500/tech" alt="">
</div>
</div>
and the settings:
const slider = tns({
'items' => 1,
'controls' => false,
'loop' => true,
'autoplay' => true,
'lazyload' => true,
'autoplayTimeout' => 4000
});
});
The slider will autoplay .... but I want to autoplay only when the video is finished.
How can I do that ?
First you have to use autoplay: true in your slider (which you already have) and stop it right away with slider.pause();. This is necessary to be able to start autoplay later.
Then you listen to the ended Event and execute the play() function on the slider.
<script type='text/javascript'>
const slider = ...
document.getElementById('desk').addEventListener('ended', myHandler, false);
function myHandler(e) {
slider.play();
}
</script>
I'm making a video showcase that is wider than the actual screen, and right now you can scroll through them by holding the scroll bar at the bottom and moving it left-right. I want to make it so that you can use buttons to do that.
How it looks now:
How I want it to work:
Currently the buttons don't work
This is the code that I have so far, I modified a code that has buttons to move up and down, but I want mine to move the content left and right.
Original code: https://codepen.io/taneltm/pen/QjBbMW
HTML:
<button class="left"><</button>
<div class="scrollmenu">
<video class="featured" controls> <source src="vid.mp4"
type="video/mp4"> </video>
<video class="featured" controls> <source src="vid.mp4"
type="video/mp4"> </video>
<video class="featured" controls> <source src="vid.mp4"
type="video/mp4"> </video>
<video class="featured" controls> <source src="vid.mp4"
type="video/mp4"> </video>
<video class="featured" controls> <source src="vid.mp4"
type="video/mp4"> </video>
</div>
<button class="right">></button>
JS:
<script type="text/javascript">
var $content = $('div.scrollmenu');
function changeContentScroll(pos) {
var currentPos = $content.scrollLeft();
$content.scrollLeft(currentPos + pos);
}
function onright() {
changeContentScroll(-10);
}
function onleft() {
changeContentScroll(+10);
}
$('button.right').on('click', onleft);
$('button.left').on('click', onright);
</script>
For me your code works just fine, I just had to add jQuery.
Could it be that you did not load it in your html?
Have a look at this codepen, (it doesn't have nice css but the buttons work).
Try to add
<script
src="https://code.jquery.com/jquery-3.4.0.min.js"
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
crossorigin="anonymous"></script>
before your own JavaScript
I have a tabs menu (three tabs) with a html-video into each tab (three videos).
My problem is when one video is playing, changing tab I can play another video but the first continues playing.
When I click on a tab I need to stop or pause the videos from the other tabs (if are playing)
This is the tabbed menu code:
<ul class="tabs-menu">
<li class="current">Video1</li>
<li>Video2</li>
<li>Video3</li>
</ul>
And the tabs:
<div class="tab">
<div id="tab-1" class="tab-content">
<div class="video">
<video id="video01" width="640" height="480" controls>
<source src="video1.mp4" type="video/mp4">
</video>
</div>
<div id="tab-2" class="tab-content">
<div class="video">
<video id="video02" width="640" height="480" controls>
<source src="video2.mp4" type="video/mp4">
</video>
</div>
</div>
<div id="tab-3" class="tab-content">
<div class="video">
<video id="video03" width="640" height="480" controls>
<source src="video2.mp4" type="video/mp4">
</video>
</div>
</div>
Any suggestions? Thanks in advance ;-)
When a tab is clicked, you pause all 3 videos for all tabs
, and then start the video belonging to the actual tab.
Something similar to this:
//set click event handler to whenever a tab is clicked
$('.tab-content').on('click' , function(){
//stop all video on page
$.each( $('.video'), function( key, value ) {
$(this)[0].pause();
});
//start the video belonging to the tab that was clicked.
$(this).find('video')[0].play();
});
This is the code for "a links" in tabs (javascript):
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
document.querySelector('#myvideo').pause();
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
Here I introduced a line to pause the first video (#myvideo) when I click to another tab. Can I use several IDs?
I was facing the same problem within pageable container section's. I was using the Flowplayer video plugin within each section. I could solve the issue with following code:
/* video player in carousel to pause on click on next carousel item */
jQuery("ul.vc_pagination li.vc_pagination-item").not('.vc_active').find('a').click(function() {
var vid_id = jQuery('.vc_tta-panels .vc_tta-panel.vc_active .flowplayer-video').attr('id');
flowplayer('#' + vid_id + '').pause();
});