When I run the code bellow, I expect the button to change from pause to play, and vise versa.
What can I do to get the button from pause to play?
I used this tutorial, https://www.youtube.com/watch?v=V8_wEZD160g.
Thanks!!
<style type="text/css">
div#video_controls_bar {
padding:10px;
}
</style>
<script>
function playPause(btn, vid){
var vid = document.getElementById(vid);
vid.load();
}
if(vid.paused){
vid.play();
btn.innerHTML = "Pause";
}
else{
vid.pause();
btn.innerHTML = "Play";
}
</script>
<video id="ruqia_video1" width="320" height="180" >
<source src="videos/Rooqia01.mp4" />
</video>
<div id="video_controls_bar">
<button id="playpausebtn" onclick="PlayPause(this, 'ruqia_video1' )">Pause</button>
</div>
There were a few errors, but I made it working: https://jsfiddle.net/fu8eoofe/2/
Your function looked actually like this:
function playPause(btn, vid){
var vid = document.getElementById(vid);
vid.load();
}
It was closed before the if statements. Second thing is that you were calling a function named PlayPause when your function's name is playPause.
I replaced vid.paused with new variable for demonstration purposes (it wouldn't work without a video).
you have some errors in your code.
corrected :
<style type="text/css">
div#video_controls_bar {
padding:10px;
}
</style>
<script>
function playPause(btn, vid){
var vid = document.getElementById(vid);
vid.load();
if(vid.paused){
vid.play();
btn.innerHTML = "Pause";
}
else{
vid.pause();
btn.innerHTML = "Play";
}
}
</script>
<video id="ruqia_video1" width="320" height="180" >
<source src="videos/Rooqia01.mp4" />
</video>
<div id="video_controls_bar">
<button id="playpausebtn" onclick="playPause(this, 'ruqia_video1' )">Pause</button>
</div>
Related
I had this working before and for some reason the script no longer works. I've been spending ages trying to solve it but can't seem to find the reason. I just want my video to pause upon clicking.
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
And here is the HTML code:
<video autoplay muted loop id="myVideo">
<source src="video.mp4" type="video/mp4">
</video>
<button id="myBtn" onclick="myFunction()">Pause</button>
I want to make an icon that lets you mute or unmute. The icon itself works, but the audio doesn't play. Here's the code:
<audio id="myaudio" controls loop>
<source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1200px-Mute_Icon.svg.png"
style="height: 80px; width: 80px" id="imgClickAndChange" onclick="changeImage()" />
</p>
<script language="javascript">
function changeImage() {
var x = document.getElementById("myAudio");
if (document.getElementById("imgClickAndChange").src == "https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png")
{
document.getElementById("imgClickAndChange").src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1200px-Mute_Icon.svg.png";
x.play();
}
else
{
document.getElementById("imgClickAndChange").src = "https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png";
x.pause();
}
}
</script>
Can anyone help me?
(also yes I am using w3schools's sounds)
x.muted is solution:
function changeImage() {
var x = document.getElementById("myaudio");
if (
document.getElementById("imgClickAndChange").src ==
"https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png"
) {
document.getElementById("imgClickAndChange").src =
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1200px-Mute_Icon.svg.png";
x.muted = true;
} else {
document.getElementById("imgClickAndChange").src =
"https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png";
x.muted = false;
}
}
<audio id="myaudio" controls loop>
<source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<img src="https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png"
style="height: 80px; width: 80px" id="imgClickAndChange" onclick="changeImage()" />
</p>
This works in Venobox modal box but in PrettyPhoto I am getting errors.
<script type="text/javascript">
var buVideo = document.getElementById("bVideo");
function playPause() {
var el = document.getElementById("playButton");
if (buVideo.paused) {
buVideo.play();
el.className ="";
} else {
buVideo.pause();
el.className = "playButton";
}
}
buVideo.addEventListener("click", playPause, false);
</script>
<div class="video-wrapper">
<video id="bVideo" controls controlsList="nodownload">
<source src="/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="playButton" class="playButton" onclick="playPause()"></div>
</div>
Uncaught ReferenceError: playPause is not defined
at HTMLDivElement.onclick
Tried:
window.onload = function(){
var buVideo = document.getElementById("bVideo");
}
but still the same error. Tried to put script before and after <div class="video-wrapper"></div> but it doesn't help.
I have code for one button, how to do for multiple?
image example
I tried to get around all the elements, but the tracks played simultaneously.
http://codepen.io/anon/pen/mmyaQx
On jquery I did it, but I can not on native JavaScript.
window.onload = function(){
var myAudio = document.getElementById('my-audio');
var play = document.getElementById('play');
var pause = document.getElementById('pause');
var loading = document.getElementById('loading');
var bar = document.getElementById('bar');
function displayControls() {
loading.style.display = "none";
play.style.display = "block";
}
// check that the media is ready before displaying the controls
if (myAudio.paused) {
displayControls();
} else {
// not ready yet - wait for canplay event
myAudio.addEventListener('canplay', function() {
displayControls();
});
}
play.addEventListener('click', function() {
myAudio.play();
play.style.display = "none";
pause.style.display = "block";
});
pause.addEventListener('click', function() {
myAudio.pause();
pause.style.display = "none";
play.style.display = "block";
});
// display progress
myAudio.addEventListener('timeupdate', function() {
//sets the percentage
bar.style.width = parseInt(((myAudio.currentTime / myAudio.duration) * 100), 10) + "%";
});
}
#controls {
width: 80px;
float: left;
}
#progress {
margin-left: 80px;
border: 1px solid black;
}
#bar {
height: 20px;
background-color: green;
width: 0;
}
<audio id="my-audio">
<source src="http://jPlayer.org/audio/mp3/Miaow-07-Bubble.mp3" type="audio/mpeg">
<source src="http://jPlayer.org/audio/ogg/Miaow-07-Bubble.ogg" type="audio/ogg">
</audio>
<div id="controls">
<span id="loading">loading</span>
<button id="play" style="display:none">play</button>
<button id="pause" style="display:none" >pause</button>
</div>
<div id="progress">
<div id="bar"></div>
</div>
I do not know what you want to achieve, but it seems that you are trying to reinvent the wheel...
Do you know that you can enable controls on the HTML5 audio player? :)
<audio controls>
<source src="http://jPlayer.org/audio/mp3/Miaow-07-Bubble.mp3" type="audio/mpeg">
<source src="http://jPlayer.org/audio/ogg/Miaow-07-Bubble.ogg" type="audio/ogg">
</audio>
something like this will help you..
make function instead of window.onload and paremetrize it.. then call each in start function..
function start(){
buildOne( 'my-audio', 'play', 'pause', 'loading', 'bar' );
buildOne( 'my-audio2', 'play2', 'pause2', 'loading2', 'bar2' );
}
window.onload = start;
full example is here: http://codepen.io/mkdizajn/pen/ZKYwEQ?editors=1011
Hi I used HTML5 audio player and linked a mp3 file and autoplay functionality did . But it's time duration 37 minutes but it stop after 1 minute.
Here is my code jsfiddle
var audio1 = document.getElementById("player1");
var btn1 = document.getElementById("pButton1");
var pause_hover1 = document.getElementById("pause-hover");
var vid = document.getElementById("player1");
btn1.addEventListener("click", function(){
if (audio1.paused) {
audio1.play();
btn1.classList.remove("pause1");
btn1.classList.add("play1");
pause_hover1.style.display = "none";
} else {
audio1.pause();
btn1.classList.remove("play1");
btn1.classList.add("pause1");
pause_hover1.style.display = "block";
}
});
<audio loop id="player1" autoplay="true" src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/mpeg">
</audio>
<div id="audioplayer1">
<button id="pButton1" style="background: transparent;" class="play1"> audio</button>
</div>
I have changed your code to the following and it's working now at least at my end.
if you don't want control please remove controls from audio tag
var audio1 = document.getElementById("player1");
var btn1 = document.getElementById("pButton1");
var pause_hover1 = document.getElementById("pause-hover");
var vid = document.getElementById("player1");
btn1.addEventListener("click", function(){
if (audio1.paused) {
audio1.play();
btn1.classList.remove("pause1");
btn1.classList.add("play1");
pause_hover1.style.display = "none";
} else {
audio1.pause();
btn1.classList.remove("play1");
btn1.classList.add("pause1");
pause_hover1.style.display = "block";
}
});
<audio autoplay="true" controls id="player1">
<source src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/ogg">
<source src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="audioplayer1">
<button id="pButton1" style="background: transparent;" class="play1"> audio</button>
</div>