I'm trying to start and stop two videos with two separate buttons. I've simply copied the code and renamed the variables, yet one piece of code works and one doesn't. I get the error 'TypeError: video2.pause is not a function at HTMLButtonElement.c'. Both videos and buttons are placed in modals respectively. Why am I getting this weird error, especially when exactly the same code works?
Javascript:
var video = document.getElementById("video.mp4");
var playButton = document.getElementById("play-pause");
var video2 = document.getElementById("video2.mp4");
var play = document.getElementById("play-pause2");
playButton.addEventListener("click", function a () {
if (video.paused == true) {
video.play();
playButton.innerHTML = "Pause";
} else {
video.pause();
playButton.innerHTML = "Play";
}
});
play.addEventListener("click", function c () {
if (video2.paused == true) {
video2.play();
play.innerHTML = "Pause";
} else {
video2.pause();
play.innerHTML = "Play";
}
});
HTML:
<video width="900px" height="600px" id="Digital_Poster.mp4" />
<source src="assets/video.mp4" type="video/mp4" id="video.mp4"/>
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
</div>
<video width="900px" height="600px">
<source src="assets/video2.mp4" type="video/mp4" id="video2.mp4"/>
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause2">Play</button>
</div>
You should call .pause on the <video> elements, but the id is set on the <source> ones. Moving it to the <video> tags should make it work:
<video width="900px" height="600px" id="video.mp4">
<source src="assets/video.mp4" type="video/mp4" />
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
</div>
<video width="900px" height="600px" id="video2.mp4">
<source src="assets/video2.mp4" type="video/mp4" />
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause2">Play</button>
</div>
By the way, I've corrected the /> to > in the first line. Also, declaring two elements with ID set to video-controls is illegal, consider using HTML classes (thanks #zer00ne for pointing out).
Related
I'm facing some issues with my play/pause buttons. In ym HTMl I have multiple buttons with different sources:
<div>
<button class="button-53" id="button">Play</button>
</div>
<audio id="player">
<source src='audio/mixdown.mp3' type='audio/mpeg'/>
</audio>
<div>
<button class="button-53" id="button">Play</button>
</div>
<audio id="player">
<source src='audio/mixdown2.mp3' type='audio/mpeg'/>
</audio>
This is my Javascript:
var buttons = document.getElementById("button");
var music = document.getElementById("player");
for (const buttons of button) {
buttons.addEventListener("click", function(){
if(music.paused){
music.play();
buttons.innerHTML = "Pause";
} else {
music.pause();
buttons.innerHTML = "Play";
}
});
}
But when I play music from the first button and then pause it, go over to the next button and toggle the button, the sound keeps playing from that point where I stopped it instead of playing the sound from the written source.
Anyone here that could help me?
Id attributes in HTML should be unique. The document.getElementById returns a single element (if found).
One solution to fixing your problem is to give each pair of button/audio elements different ids, for example:
<div>
<button class="button-53" id="button1">Play</button>
</div>
<audio id="player1">
<source src='audio/mixdown.mp3' type='audio/mpeg'/>
</audio>
<div>
<button class="button-53" id="button2">Play</button>
</div>
<audio id="player2">
<source src='audio/mixdown2.mp3' type='audio/mpeg'/>
</audio>
and then add event listeners for each pair:
function addListeners(buttonElement, audioElement) {
// ...add implementation
}
addListeners(
document.getElementById("button1"),
document.getElementById("player1")
);
addListeners(
document.getElementById("button2"),
document.getElementById("player2")
);
I have tried two version
The first one autoplay is working on Google Chrome but how can I control with button that I can play or pause the audio?
<embed name="pop" src="pop.mp3" loop="true" hidden="true" autostart="true">
The second one autoplay is not working on Google Chrome but I can control it with button in IE or FireFox
<audio id="myAudio">
<source src="pop.mp3" type="audio/mp3">
</audio>
The buttons
<button onclick="playAud()" type="button">Play</button>
<button onclick="pauseAud()" type="button">Pause</button>
And the Javascript
var aud = document.getElementById("myAudio");
function playAud() {
aud.play(); }
function pauseAud() {
aud.pause(); }
So how can I deal with this problem?
I want the Audio autoplay in background
And then I can use button to play or pause it
You only have to trigger the play function on init:
var aud = document.getElementById("myAudio");
function play() {
aud.play();
}
function pause() {
aud.pause();
}
aud.play(); // this will do the trick :)
<audio id="myAudio">
<source src="https://wiki.selfhtml.org/local/Europahymne.mp3" type="audio/mp3">
</audio>
<button onclick="play()" type="button">Play</button>
<button onclick="pause()" type="button">Pause</button>
Old solution:
You could remove/add your embed-element like i did here. This might be hacky, but it could be a solution for you.
var audiowrapper = document.getElementById('audio-wrapper');
var audio = document.getElementById('audio');
function play() {
if (!audiowrapper.hasChildNodes()) audiowrapper.appendChild(audio);
}
function pause() {
if (audiowrapper.hasChildNodes()) {
while (audiowrapper.firstChild) {
audiowrapper.removeChild(audiowrapper.firstChild);
}
}
}
#audio-wrapper {
position: absolute;
top: -300px !important;
}
<div id="audio-wrapper">
<embed id="audio" name="pop" src="https://wiki.selfhtml.org/local/Europahymne.mp3" loop="true" hidden="true" autostart="true">
</div>
<button onclick="play();" type="button">Play</button>
<button onclick="pause();" type="button">Pause</button>
Try this:
<audio id="sound" src="sound.mp3" autoplay="0" autostart="0"></audio>
<button onclick="playAud()" type="button">Play</button>
<button onclick="pauseAud()" type="button">Pause</button>
<script>
let aud = document.getElementById("sound");
function playAud() {
aud.play();
}
function pauseAud() {
aud.pause();
}
I'm having trouble adding in jQuery's toggleClass function into the rest of my code. The page has several HTML5 audio tags on it which are controlled via jQuery. I attempted to add the toggle function to my jQuery audio control function, but it's not adding the class and subsequently the audio control doesn't work.. so I suppose it's some weird syntax error.
What do you guys recommend? Below is a jsFiddle and a my (unfortunately) weak attempt :)
http://jsfiddle.net/danielredwood/FTfSq/10/
HTML:
<div id="music_right">
<div class="thumbnail" id="paparazzi">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="danceinthedark">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="bornthisway">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
</div>
JavaScript:
var curPlaying;
$(function() {
$(".playback").click(function(e){
e.preventDefault();
var song = $(this).next('audio')[0];
song.toggleClass("playing");
if(song.paused){
song.play();
if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
} else {
song.pause();
}
curPlaying = $(this).parent()[0].id;
});
});
//the function below works, but doesn't have the add/remove class functions
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if (song.paused) {
song.play();
if (curPlaying) $("audio", "#" + curPlaying)[0].pause();
} else {
song.pause();
}
curPlaying = $(this).parent()[0].id;
});
});
$('thumbnail').toggleClass('pausing playing');
ToggleClass: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
I would use .addClass() and .removeClass(), as it'll clean up your code quite a bit and allow you to use CSS to perform all that layout work:
$('thumbnail').toggle(function(){
$('.play', this).removeClass('pausing');
$('.play', this).addClass('playing');
}, function(){
$('.play', this).addClass('pausing');
$('.play', this).removeClass('playing');
});
I am working on a project using <video>, trying to make external HTML buttons play/pause, rewind slow, rewind fast, and fast forward control a video using JavaScript. I have the buttons appearing where I want them, but when I try to use them in the browser, they don't do anything to control the video, and the play button doesn't switch to pause and vice versa. I've tried for hours, looking all over the Web to find anything that I can use to help. Most solutions I find are using jQuery which I understand is easier, but it's not what I need. I just want to do it using pure JavaScript so I can better understand it. Included is my existing code. Any help on how I can get them to work would be appreciated!
HTML:
<script src="sample.js"></script>
<div class="jumbotron">
<div class="container">
<video id="video" poster="images/art/preview.png" width="100%" controls>
<source src="images/art/sample.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"">
<source src="images/art/sample.webm" type="video/webm; codecs="vp8, vorbis"">
<source src="images/art/sample.ogv" type="video/ogg; codecs="theora, vorbis"">
Your browser does not support HTML5 video
</video>
<div id="buttonbar">
<button type="button" id="fastBck">
<span class="glyphicon glyphicon-fast-backward"></span>
</button>
<button type="button" id="rew">
<span class="glyphicon glyphicon-backward"></span>
</button>
<button type="button" id="play-pause">
<span class="glyphicon glyphicon-play"></span>
</button>
<button type="button" id="fastFwd">
<span class="glyphicon glyphicon-fast-forward"></span>
</button>
</div>
</div>
</div>
JavaScript:
window.onload = function() {
var video = document.getElementById("video");
var playButton = document.getElementById("play-pause");
var rewButton = document.getElementById("rew");
var fastBckButton = document.getElementById("fastBck");
var fastFwdButton = document.getElementById("fastFwd");
}
playButton.addEventListener("click", function(){
if (video.paused==true) {
video.play();
playButton.className="glyphicon glyphicon-pause";
} else{
video.pause();
playButton.className="glyphicon glyphicon-play";
}
})
rewButton.addEventListener("click", function(){
//not sure exactly how to use currentTime to rewind, or fast forward
})
let the browser pick the right codecs for your video
you defined your variables out of scope (you've encapsulated them inside the onload function)
window.onload = function() {
var video = document.getElementById("video");
var playButton = document.getElementById("play-pause");
var rewButton = document.getElementById("rew");
var fastBckButton = document.getElementById("fastBck");
var fastFwdButton = document.getElementById("fastFwd");
playButton.addEventListener("click", function(){
if (video.paused===true) {
video.play();
playButton.className="glyphicon glyphicon-pause";
} else{
video.pause();
playButton.className="glyphicon glyphicon-play";
}
});
rewButton.addEventListener("click", function(){
//not sure exactly how to use currentTime to rewind, or fast forward
});
};
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
<div class="jumbotron">
<div class="container">
<video id="video" width="100%" controls>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
Your browser does not support HTML5 video
</video>
<div id="buttonbar">
<button type="button" id="fastBck"><span class="glyphicon glyphicon-fast-backward"></span></button>
<button type="button" id="rew"><span class="glyphicon glyphicon-backward"></span></button>
<button type="button" id="play-pause"><span class="glyphicon glyphicon-play"></span></button>
<button type="button" id="fastFwd"><span class="glyphicon glyphicon-fast-forward"></span></button>
</div>
</div>
</div>
Good luck with the fast forward and your other methods
window.onload = function() {
var video = document.getElementById("video");
var playButton = document.getElementById("play-pause");
var rewButton = document.getElementById("rew");
var fastBckButton = document.getElementById("fastBck");
var fastFwdButton = document.getElementById("fastFwd");
playButton.addEventListener("click", function(){
if (video.paused==true) {
video.play();
playButton.className="glyphicon glyphicon-pause";
} else{
video.pause();
playButton.className="glyphicon glyphicon-play";
}
})
rewButton.addEventListener("click", function(){
//not sure exactly how to use
currentTime to rewind, or fast forward
})
}
Move listeners inside onload function. Listeners won't be attached until the page is loaded. Respect for wanting to use vanilla JS, however unnecessary.
I ran into a little problem right now and i can't find a solution.
HTML:
<video id="vid" controls >
<source src=".mp4" type="video/mp4">
<source src="HEYE.mp4" type="video/mp4">
</video>
JavaScript:
function ChangeVideo(){
if(click%2 == 0){
document.getElementById('vid').src="Troll.mp4";
click++;
}else{
document.getElementById('vid').src="HEYE.mp4";
click++;
}
}
Button:
<button onclick="ChangeVideo()">Change video</button>
the problem is that i dont get it to change video when i click the button.
My to videos in my map is named "HEYE.mp4" and "Troll.mp4"
function ChangeVideo(){
var vid = document.getElementById('vid');
vid.src = click%2 ? "HEYE.mp4" : "Troll.mp4";
vid.load();
vid.play();
click++;
}