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>
Related
When I click on the play/pause button nothing seems to happen, after clicking on the video I want to play, the vs code is not finding me any error nor the dev console.
I don't know what the issue is with the play/pause button.
Also, there is some issue with the third video, when I click on the third video it gives the following error:
Failed to load resource: the server responded :5500/favicon.ico:1 with a status of 404 (Not Found)
window.onload = init;
function init() {
var frame1 = document.querySelector('#video1');
frame1.innerHTML += ' <br> <button id="play">play </button> <button id="pause">pause</button> <button id="volume-up">volume up</button> <button id="volume down">volume-down</button> <button id="mute">mute</button> ';
}
//to play another video
var click = document.querySelectorAll('#videos > div');
click.forEach(function(elem) {
elem.addEventListener('click', nextPlaylist);
function nextPlaylist(evt) {
var save = elem.querySelector('.video').currentSrc;
var save1 = elem.querySelector('.video');
elem.innerHTML = `<video class="video" > <source src="${save}"> </video> <br> <button id="play">play </button> <button id="pause">pause</button> <button id="volume-up">volume up</button> <button id="volume down">volume-down</button> <button id="mute">mute</button> `;
var play = document.querySelector('#play');
play.addEventListener('click', playVid);
var pause = document.querySelector('#pause');
pause.addEventListener('click', pauseVid);
function playVid() {
save1.play();
}
function pauseVid() {
save1.pause();
}
}
}
);
<body>
<header class="head">
VIDEO PLAYER
</header>
<div id="videos">
<div id="video1">
<video class="video" controls>
<source src="https://www.videvo.net/videvo_files/converted/2018_04/preview/180301_06_A_CityRoam_03.mp420186.webm">
</video>
</div>
<div id="video2">
<video class="video" controls>
<source src= "https://www.videvo.net/videvo_files/converted/2016_01/preview/Forest_15_2_Videvo.mov92730.webm">
</video>
</div>
<div id="video3">
<video class="video" controls>
<source src="https://www.videvo.net/videvo_files/converted/2016_09/preview/160820_125_NYC_OutOfFocusCarLights5_1080p.mp444096.webm">
</video>
</div>
</div>
<script src="video.js"></script>
</body>
There are several issues with the code.
You declare the video element but then override it.
var save1= elem.querySelector('.video');
but then, you remove that element and render a different one
elem.innerHTML = `<video class="video" >...
So you need to retrieve it again (or just move var save1= elem.querySelector('.video'); after the line above.
When the user clicks on the buttons the parent's listener (elem.addEventListener('click', nextPlaylist); also get fired, so it re-render the videos.
To avoid that, use stopPropagation to prevent from the event from propagate to the parent
You have multiple id attribute with the same value (when the user clicks on more than one video) so document.querySelector catch the first one (which wasn't work too because the reasons above).
Replace the ids to classes and use elem.querySelector instead of document.querySelector to make sure it will find the buttons in a specific div.
//to play another video
var click = document.querySelectorAll('#videos > div');
click.forEach(function(elem) {
elem.addEventListener('click', nextPlaylist);
});
function nextPlaylist(evt) {
const elem = evt.currentTarget;
var save = elem.querySelector('.video').currentSrc;
elem.innerHTML = `<video class="video" > <source src="${save}"> </video> <br> <button class="play">play </button> <button class="pause">pause</button> <button id="volume-up">volume up</button> <button id="volume down">volume-down</button> <button id="mute">mute</button> `;
var save1 = elem.querySelector('.video');
var play = elem.querySelector('.play');
play.addEventListener('click', playVid);
var pause = elem.querySelector('.pause');
pause.addEventListener('click', pauseVid);
function playVid(e) {
e.stopPropagation();
save1.play();
}
function pauseVid(e) {
e.stopPropagation();
save1.pause();
}
}
<header class="head">
VIDEO PLAYER
</header>
<div id="videos">
<div id="video1">
<video class="video" controls>
<source src="https://www.videvo.net/videvo_files/converted/2018_04/preview/180301_06_A_CityRoam_03.mp420186.webm">
</video>
</div>
<div id="video2">
<video class="video" controls>
<source src= "https://www.videvo.net/videvo_files/converted/2016_01/preview/Forest_15_2_Videvo.mov92730.webm">
</video>
</div>
<div id="video3">
<video class="video" controls>
<source src="https://www.videvo.net/videvo_files/converted/2016_09/preview/160820_125_NYC_OutOfFocusCarLights5_1080p.mp444096.webm">
</video>
</div>
</div>
By the way, you can move the function out. It's a shame to create new function for each element instead of only one.
https://jsbin.com/koritub/edit?html,js,output
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();
});
I can currently play and pause a video by clicking anywhere in the <video> tag.But unfortunately, when i have added a second video the function works only for the first video only.
var video = document.getElementById('vid');
video.addEventListener('click', function() {
this.paused?this.play():this.pause();
},
false);
video.addEventListener("pause", function() {
document.getElementById("paused").style.display = "";
});
video.addEventListener("play", function() {
document.getElementById("paused").style.display = "none";
});
<div id="main">
<div id="computer" class="content">
<div style="margin-left:8%">
<div id="paused" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div id="ip" class="content">
<div style="margin-left:8%">
<div id="paused" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid">
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
Any issue with the js code. Kindly advice.
it will not work lake that because ,the interpreter will consider just the last id with the same element ,if you use just two videos then you can just add other video id and paused id
<div id="ip" class="content">
<div style="margin-left:8%">
<div id="paused2" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid2">
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
try to use classes instud of ids
for more detaill take a lok to this page
http://flash.flowplayer.org/demos/installation/multiple-players.html
In my video template site, I want to change the source tag of the video when I'm clicking on HQ, only the video should start playing, without a click on the play button, and the text of the link should change to nq in the same function.
Following the html code
{{if hqnq == true }} //jquery template variable no importance
<div class="toolbar" id="controls">
<div style="float:right">
HQ
// the text of the link should change when you are clicking
</div>
<div style="clear:both"></div>
</div>
{{/if}}
<div id="video_player">
<video autobuffer controls autoplay>
<source src="http://www.tools4movies.com/Droid/Default/Inception.mp4" type="video/mp4" width="auto" height="auto" id="video" />
</video>
</div>
And at least there should be a function that will be performing the task. But how to do that?
<script type="text/javascript">
var button = document.getElementById('player_hq_nq');
function showVideo() {
if (button.title == "nq") {
document.getElementById("video").setAttribute("src", "http://www.tools4movies.com/Droid/Default/Inception.mp4");
document.getElementById("video").load();
document.getElementById("video").play();
} else {
document.getElementById("video").setAttribute("src", "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4");
document.getElementById("video").load();
document.getElementById("video").play();
button.title = "nq";
}
}
</script>
Here is the fiddle: http://jsfiddle.net/k68Zp/389/
You need to call showVideo() onclick of HQ. so you need to add following code just above the showVideo() function.:
$(document).ready(function(){
$("#player_hq_nq").click(function(){
showVideo();
});
});