im trying to implement a show and hide video element button
Here are my two buttons alongside Play/pause/Restart
<div class="rightContent">
<p class="center">Video Control Options</p>
<p class="videoControls"> <input type="button" value=" Play " onclick="video.play()"/> </p>
<p class="videoControls"> <input type="button" value=" Pause " onclick="video.pause();" /> </p>
<p class="videoControls"> <input type="button" value=" Restart " onclick="video.currentTime =0;"/> </p>
<p class="videoControls"> <input type="button" value=" Show Controls " onclick="Show()"/> </p>
<p class="videoControls"> <input type="button" value=" Hide Controls " /> </p>
</div>
My Javascript function to attempt to Hide the controls currently:
function hide(){
videoControls.setAttribute = ('style', 'display:none;')
}
however, this does not work.
Put the video element in a variable such as myVideo.
ex: var myVideo = document.getElementById( 'myVideo' )
Then:
function hide(){
video.removeAttribute( 'controls' );
}
Here is a snippet showing it in action:
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="250" controls>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<br>
<button onclick="hide()">Hide Controls</button>
<button onclick="show()">Show Controls</button>
<script>
var myVideo = document.getElementById( 'myVideo' );
function hide(){
myVideo.removeAttribute( 'controls' );
}
function show(){
myVideo.setAttribute( 'controls', '' );
}
</script>
</body>
</html>
Your code sample is incomplete, but this is what I think is happening: you are trying to call setAttribute on a NodeList, which is not a method of NodeList.
// this is a node list, not a single node!
var videoControls = document.querySelectorAll(".videoControls");
// convert nodelist to array
var vcArray = Array.prototype.slice.call(videoControls);
// iterate over controls and hide each one.
vcArray.forEach(function(control){
control.style.display = "none";
});
Related
This question already has answers here:
How to addEventListener to multiple elements in a single line
(15 answers)
Closed 2 years ago.
The click event is only working on the first div i.e div with id video1, due to some reason it is not working when I click div with id video2 and video3. I am not able to understand the problem in the code.
<header class="head">
VIDEO PLAYER
</header>
<div id="videos">
<div id="video1">
<video class="video1" >
<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="video2">
<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="video3">
<source src="https://www.videvo.net/videvo_files/converted/2016_09/preview/160820_125_NYC_OutOfFocusCarLights5_1080p.mp444096.webm">
</video>
</div>
</div>
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.querySelector('#videos > div');
click.addEventListener('click', nextPlaylist);
function nextPlaylist(evt){
console.log('it worked');
}
Thats because you are only selecting the first element and setting that
const clicks = document.querySelectorAll("#videos > div");
//nodelists are not arrays so you can't do a standard for index loop
//I believe for const works fine but just to make sure i added deconstructing to an array
//forEach also works but how you loop through nodelists are another topic you can research
for(const click of [...clicks]) {
click.addEventListener("click", nextPlaylist);
}
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 am building a custom controls HTML5 video player. You can see it HERE.
The problem I ran into is being unable to display the video's duration before playing it.
The HTML:
<div class="video-container">
<video poster="img/flamenco.jpg">
<source src="flamenco.mp4" type="video/mp4" />
<source src="flamenco.ogg" type="video/ogg" />
</video>
<div class="controls-wrapper">
<div class="progress-bar">
<div class="progress"></div>
</div>
<ul class="video-controls">
<li><input type="button" name="play-pause" value="Play" class="play"></li>
<li><input type="button" name="prev" value="Previous video" class="previous"></li>
<li><input type="button" name="next" value="Next video" class="next"></li>
<li class="mute-toggle unmuted"><input type="checkbox" name="mute" value="Mute"></li>
<li class="volume-container"><input class="volume-slider" type="range" value="1" max="1" step="0.01"></li>
<li class="show-time disable-select"><span class="current-time">00:00</span><span>/</span><span class="duration"></span></li>
<li class="fullscreen-container"><input type="button" name="toggle-fullscreen" value="Fullscreen" class="fullscreen"></li>
</ul>
</div>
</div>
The JavaScript:
var currentTimeDuration = function(){
var currTimeStr = Math.round(video.currentTime).toString();
var durationStr = Math.round(video.duration).toString();
$('.current-time').text(currTimeStr.timeFormat());
$('.duration').text(durationStr.timeFormat());
}
$(video).on('timeupdate', function(){
currentTimeDuration();
});
The problem with the function above is that it only displays the current time and duration of the video after it has started. I wish it would show something like 00:00 / 02:22 on page load.
Any hints? Thank you!
video.duration is correct after 'loadedmetadata' event. Try to add metadata loaded handler:
$(video).on('loadedmetadata', function(){
currentTimeDuration();
});
Hi all first of all thanks for the time to read my question and your help
I'm having the next issue with a customizing video controls in html5
In the next link i insert the video tag directly on the body and custom the video controls with the main.js
http://pechacabeza.com/labs/Webo/video/
<body onload="init()">
<div id="container" onclick="screenad.click();"></div>
<video id='media-video' controls poster="video_poster.jpg" autoplay muted class="adrime_video">
<source src='video.mp4' type='video/mp4'>
<source src='video.webm' type='video/webm'>
</video>
<div id='media-controls'>
<progress id='progress-bar' min='0' max='100' value='0'></progress>
<button id='replay-button' class='replay' title='replay' onclick='replayMedia();'></button>
<button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'></button>
<button id='mute-button' class='mute' title='mute' onclick='toggleMute("false");'></button>
</div>
</body>
The point is that i want to insert the video within a function initialiseMediaPlayer which is inside the main.js but then the custom video controls doesn't work :S as you can see in the next link:
http://pechacabeza.com/labs/Webo/video_Dynamic/
<body onload="init()">
<div id="container" onclick="screenad.click();"></div>
<div id='media-controls'>
<progress id='progress-bar' min='0' max='100' value='0'></progress>
<button id='replay-button' class='replay' title='replay' onclick='replayMedia();'></button>
<button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'></button>
<button id='mute-button' class='mute' title='mute' onclick='toggleMute("false");'></button>
</div>
<div id="media-video"></div>
</body>
Any idea what it could be wrong?
Thanks in advance
I have managed to play and pause an mp3 file as soon as i click an image, the problem is that every time I select another image(which is meant to play a different mp3 song) it automatically resumes the same song.
My JavaScript:
function StartOrStop(audioFile)
{
var audie = document.getElementById("myAudio");
if(!audie.src)
audie.src = audioFile;
if(audie.paused == false)
{
audie.pause();
}
else
{
audie.play();
}
}
And HTML:
<img src="images/play.png" alt="Play Button" width="57" height="50" onclick="StartOrStop('RWY.mp3')">
<img src="images/play.png" alt="Play Button width="57" height="50" onclick="StartOrStop('EL.mp3')">
<audio controls id="myAudio" ></audio>
Any suggestion how can I solve this problem?
You're not assigning a new src on click, you're checking to see if it exists first. The second file will never be assigned to src since src already exists.
EDIT
You should instead check to see if audie.src === audioFile.
How about this kind of method
<audio id="demo1" src="RWY.mp3"></audio>
<div>
<button onclick="document.getElementById('demo1').play()">Play the Audio</button>
<button onclick="document.getElementById('demo1').pause()">Pause the Audio</button>
<button onclick="document.getElementById('demo1').volume+=0.1">Increase Volume</button>
<button onclick="document.getElementById('demo1').volume-=0.1">Decrease Volume</button>
</div>
<audio id="demo2" src="EL.mp3"></audio>
<div>
<button onclick="document.getElementById('demo2').play()">Play the Audio</button>
<button onclick="document.getElementById('demo2').pause()">Pause the Audio</button>
<button onclick="document.getElementById('demo2').volume+=0.1">Increase Volume</button>
<button onclick="document.getElementById('demo2').volume-=0.1">Decrease Volume</button>
</div>
Instead of button you can use image just the tag change.