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>
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 want to play video when item gets active class in bootstrap slider below is my code
<div class="item" id='mobileapp'>
<video loop controls width="100%" id='video'>
<source src="../../vid.mp4" width="100%" height="100%" type="video/mp4"> Your browser does not support the video tag.
</video>
<div class="overlay"></div>
<div class="carousel-caption">
<h1 class="super-heading text-white">Heading</h1>
<div class='row'>
<div class='col-sm-2 col-sm-offset-1'>
<img src='../img/googleplay.png' class='img-responsive hidden-xs' />
</div>
<div class='col-sm-2'>
<img src='../img/applestore.png' class='img-responsive hidden-xs' />
</div>
</div>
</div>
</div>
Js
<script>
$(document).ready(function () {
if ($('#mobileapp').hasClass('active')) {
$('#video')[0].play();
}
else {
$('#video')[0].pause();
}
})
</script>
active class gets added but it does not pay video
the functions 'play' and 'pause' are not jquery functions, they belong to the DOM element. Now to make it work try to execute your code every 10 miliseconds or something like that.
Try:
var videoElt = document.getElementById('video');
$(document).ready(function () {
setInterval(function () {
if ($('#mobileapp').hasClass('active')) {
videoElt.play(); // to play the video
}
else {
videoElt.pause(); // to pause the video
}
}, 10);
});
So I am helping my gf with her Uni project. She is a graphic designer and she needed some help with creating a webpage with a video comics.
I made it so that the videos would play on hover with Javascript (this is the first time ever I had to use JS) and now I need a way to bind some of them together - e.g. you hover on one or the other and both play, you remove the mouse and both stop. And I need to do it several times. The website will contain a total of 24 Videos.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.video').each(function() {
$(this).on("mouseover", function(e) { hoverVideo(e); });
$(this).on("mouseout", function(e) { hideVideo(e); });
});
});
function hoverVideo(i) {
i.target.play();
}
function hideVideo(i) {
i.target.pause();
}
</script>
</head>
<body>
<div class="main">
<h3>Title</h3>
<p>
*Hover over each frame to see the story.
</p>
</div>
<div class="main">
<div class="firstrow">
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="Resources/1.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="Resources/2.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<img src="Resources/text/tap.svg" />
</div>
</div>
</div>
</body>
I would go with mouse enter and leave events to avoid redudancy of triggering the execution everytime your mouse is inside the video with movements
$(".thevideo").mouseenter(function(){
console.log("mouse is entered");
$(".thevideo").each(function(){
this.play();
})
})
$(".thevideo").mouseleave(function(){
$(".thevideo").each(function(){
this.pause()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.video').each(function() {
$(this).on("mouseover", function(e) { hoverVideo(e); });
$(this).on("mouseout", function(e) { hideVideo(e); });
});
});
function hoverVideo(i) {
i.target.play();
}
function hideVideo(i) {
i.target.pause();
}
</script>
</head>
<body>
<div class="main">
<h3>Title</h3>
<p>
*Hover over each frame to see the story.
</p>
</div>
<div class="main">
<div class="firstrow">
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="https://www.w3schools.com/tags/movie.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="https://www.w3schools.com/tags/movie.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<img src="Resources/text/tap.svg" />
</div>
</div>
</div>
</body>
At the moment you are only calling the function on 1 video - the video that triggered the event i.target.play();
So you just need to toggle pause and play on all videos inside .firstrow instead:
$(".firstrow .video").on("mouseenter", ()=>{
$(".firstrow video").each((index, video)=>{
video.play();
});
});
$(".firstrow .video").on("mouseleave", ()=>{
$(".firstrow video").each((index, video)=>{
video.pause();
});
});
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.