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
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'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 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 }
I'm working on a page that has multiple HTML5 video elements that popup in CSS modal boxes when a link is clicked. The page originally would begin download of every video on the page, but, after finding similar topics here, I was able to set the source to be src="", allowing the page to load quickly.
I'm having difficulty now trying to restore the download when a user selects a video and it pops up in the modal box.
I'm not new to Javascript, but I'm also not proficient. Ideally, each video source should be set to "", then when the video is opened, the video should reload. I also added a function to pause the video when the modal is closed as it used to continue playing. Any help or criticism is appreciated, I'm here to learn. Thanks!
HTML:
<div class="image" style="float:left;margin:0;"><img src="video-image.png" alt="Play visualization" width="150"/><br />Layers
<div id="layers" class="modalDialog">
<div>
Close
<h3>Layers</h3>
<video id="videoContainer" class="videoContainer" loop="loop" style="width:698px;">
<source src="video-file.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video-file.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video-file.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
</div>
</div>
Javascript:
$(document).ready(function(){
for(var i=0; i< 20; i++)
{
document.getElementsByTagName("video")[i].src="";
}
$("#showModal").click(function() {
var videoID = document.getElementsById("showModal").getAttribute('href');
var videoElement = document.getElementsById(videoID).getElementsByTagName("video");
videoElement.load();
});
$("#closeModal").click(function() {
$("#videoContainer")[0].pause();
});
});
This answer is maybe related.
Dont have your files but got it working using the following code:
<video id="videoContainer" class="videoContainer" style="width:698px;">
<source id="mp4Source" src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
$("#showModal").click(function () {
var videoID = document.getElementById("showModal").getAttribute('href');
var videoElement = document.getElementById("layers").getElementsByTagName("video")[0];
var srcID = document.getElementById("mp4Source");
videoElement.src = srcID.getAttribute("src");
videoElement.load();
videoElement.play();
});
I have a page of several videos. One can click a thumbnail to play each video. The problem is for that for greater than 2 videos, the clicking on the 3rd thumbnail doesn't pause the 2nd video so I get 2 videos playing at the same time. I'm also using a fadeOut() to toggle the visibility of each video and this works fine regardless of the number of videos. Therefore, I think the issue is with the get(0) part of the code.
here's a jsfiddle that displays the problem:
http://jsfiddle.net/trpeters1/EyZdy/28/
Additionally, here's a more verbose block of code that should make the problem clear:
$(function(){
$('#video_1,#video_2,#video_3,#video_4,#video_5,#video_6').hide();
$('.icon_1').click(function(){
$('#video_2,#video_3,#video_4,#video_5,#video_6').fadeOut(function(){
$('#video_1').fadeIn();
$('.video_2,.video_3,.video_4,.video_5,.video_6').get(0).pause();
$('.video_2,.video_3,.video_4,.video_5,.video_6').get(0).currentTime = 0;
$('.video_1').get(0).play();
});
});
$('.icon_2').click(function(){
$('#video_1,#video_3,#video_4,#video_5,#video_6').fadeOut(function(){
$('#video_2').fadeIn();
$('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).pause();
$('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).currentTime = 0;
$('.video_2').get(0).play();
});
});
$('.icon_3').click(function(){
$('#video_1,#video_2,#video_4,#video_5,#video_6').fadeOut(function(){
$('#video_3').fadeIn();
$('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).pause();
$('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).currentTime = 0;
$('.video_3').get(0).play();
});
});
});
and the html:
<div id="video_1">
<div id="mediaplayer">cadillac</div>
<video class="video_1" width="100%" height="100%" controls="controls">
<source src="videos/cadillac_x264.mp4" type="video/mp4" />
<object data="videos/cadillac_x264.mp4" width="100%" height="100%">
</object>
</video>
</div>
<div id="video_2">
<div id="mediaplayer2">nike</div>
<video class="video_2" width="100%" height="100%" controls="controls">
<source src="videos/Nike_Pretty - Computer_x264.mp4" type="video/mp4" />
<object data="videos/Nike_Pretty - Computer_x264.mp4" width="100%" height="100%">
</object>
</video>
</div>
<div id="video_3">
<div id="mediaplayer3">russian standard</div>
<video class="video_3" width="100%" height="100%" controls="controls">
<source src="videos/Russian_Standard.mp4" type="video/mp4" />
<object data="videos/Russian_Standard.mp4" width="100%" height="100%">
</object>
</video>
</div>
When you do the following:
$('.video_2,.video_3,.video_4,.video_5,.video_6').get(0)
the "get(0)" returns the first element that matches the selector - in this case, just the first element that matches ".video_2". The rest of the videos are ignored. To do an action on all of the selected elements, check out jQuery's "each()" method. Also, you can simplify your code down to a more generic approach by doing something like this:
Video 1
Video 2
<video id="video-1"> ... </video>
<video id="video-2"> ... </video>
And then hooking up JS by doing something like this:
$('.video-thumbnail').on('click', function () {
// Just go ahead and pause/reset all the video elements
$('video').each(function () {
this.pause();
this.currentTime = 0;
});
$('#' + $(this).data('video-id')).get(0).play();
});
I've just typed this from my head, but hopefully it will put you in the right direction.
thanks P1aincloth3sM4n, i followed what you said about reseting all videos and making a more generalizable solution, for those interested please see the following working jsfiddle: http://jsfiddle.net/trpeters1/EyZdy/52
Easy solution to play only one HTML5 video element on page using JQUERY:
$(function() {
$("video").each(function() {
this.pauseOthers = function(event) {
$('video').addClass('stopvideo');
$(this).removeClass('stopvideo');
$('.stopvideo').each(function() {
this.pause();
});
};
this.addEventListener("play", this.pauseOthers.bind(this), false);
});
});