Why do the javascript video buttons not work?

Why do the javascript video buttons not work? - javascript

I'm only trying to add a mute/unmute button, I followed a couple of tutorials, wrote the same code but it doesn't seem to be working.
Also, if any one of you feels particularly generous today, could you please show me how to make a single button that mutes, and when clicked again, unmutes the video sound?
<!DOCTYPE html>
<html>
<body>
<div>
<video id="vid"autoplay muted loop></video>
<div class="controller">
<button onclick="muteVideo()" type="button">Mute sound</button>
<button onclick="unmuteVideo()" type="button">Enable sound</button>
</div>
</div>
<script>
var my=document.getElementById("vid");
function playVideo(){
my.play();
}
function muteVideo(){
my.muted = true;
}
function unmuteVideo(){
my.muted = false;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<div>
<video id="vid"autoplay muted loop></video>
<div class="controller">
<button onclick="muteUnmuteVideo()" type="button">Mute/Unmute sound</button>
</div>
</div>
<script>
var my=document.getElementById("vid");
function playVideo(){
my.play();
}
function muteUnmuteVideo(){
my.muted = !my.muted;
}
</script>
</body>
</html>

This Code Works fine
<!DOCTYPE html>
<html>
<body>
<div>
<video id="vid" width="400" controls>
<source src="../../Downloads/Bohemian Rhapsody _ Muppet Music Video _ The Muppets_360p.mp4"
type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
<div class="controller">
<button onclick="muteVideo()" type="button">Mute sound</button>
<button onclick="unmuteVideo()" type="button">Enable sound</button>
</div>
</div>
<script>
let my = document.getElementById("vid");
const playVideo = () => {
my.play();
}
function muteVideo() {
console.log("hello");
my.muted = true;
}
function unmuteVideo() {
my.muted = false;
}
</script>
</body>
</html>

Related

Why isn't the <a tag not muting the video?

I need a Mute/Unmute button and an tag that can only mute the sound of a video when clicked.
The mute/unmute button works fine, but the <a tag doesn't do anything
<!DOCTYPE html>
<html>
<body>
<div>
<video src="video.mp4" id="vid"autoplay muted loop></video>
<div class="controller">
<button onclick="muteUnmuteVideo()" type="button">Mute/Unmute sound</button>
Stop Sound
</div>
</div>
<script>
var my = document.getElementById("vid");
const playVideo=() => {
my.play();
}
function muteUnmuteVideo(){
my.muted = !my.muted;
}
let exitvid = document.getElementById("vid");
function stopSound(){
exitvid.muted = false;
}
</script>
</body>
</html>

Why are you using the js code
try to use built in video tag you can get the controllers by default
<video controls muted width="80%" height="50%">
<source src="https://assets.mixkit.co/videos/preview/mixkit-stars-in-space-1610-large.mp4/" type="video/mp4">
</video>

Play sound on hover

I want to play a sound when the cursor hits an image. I tried to use javascript. the <audio>-tag is working, when I say <audio autoplay> the soundfile is played. See code below.
Plus, I want the sound to be repeated as long as one is hovering.
I used this tutorial: Play Sound on :hover
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="div4">
<img class="bottom" src="dcim/20190202_102432 copy.jpg" />
<img class="top" src="dcim/20190202_102432.jpg" />
<audio>
<source src="div4.mp3"></source>
</audio>
</div>
<script>
var audio = $("#div4.mp3")[0];
$("div4").mouseenter(function() {
audio.play();
});
</script>
</body>

Here is working code:
add id/class to <audio> and select the DOM in script as var audio = $("#audio")[0];
Use <source src="..."/> and NOT <source src="..."></source>
Check if your src works
var audio = $("#audio")[0];
$("#div4").mouseenter(function() {
audio.play();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div4">
<img class="bottom" src="dcim/20190202_102432 copy.jpg" />
<img class="top" src="dcim/20190202_102432.jpg" />
<audio id="audio">
<source src="https://css-tricks.com/examples/SoundOnHover/audio/beep.ogg"/>
</audio>
</div>
EDIT to your comment
1) I want the sound to be repeated as long as one is hovering;
2) I want the sound to stop, when the mouse leaves the image
var audio = $("#audio")[0];
$("#div4").mouseenter(function() {
audio.play();
audio.loop = true;
});
$("#div4").mouseleave(function() {
audio.pause();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div4">
<img class="bottom" src="dcim/20190202_102432 copy.jpg" />
<img class="top" src="dcim/20190202_102432.jpg" />
<audio id="audio">
<source src="https://css-tricks.com/examples/SoundOnHover/audio/beep.ogg"/>
</audio>
</div>

You need to target the div <div id="div4">:
$("#div4").mouseenter(function() {...});
And your audio should be the audio <audio>:
var audio = $("audio");

You need to attach an eventListener to the object that should trigger the playback of the audio like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div4">
<img class="bottom" src="dcim/20190202_1024322.jpg" />
<img class="top" src="dcim/20190202_102432.jpg" />
<audio id="audio4">
<source src="div4.mp3"></source>
</audio>
</div>
<script>
var div4 = document.querySelector('#div4')
var audio = document.querySelector('#audio4')
div4.addEventListener("mouseenter", function(){
audio.play()
});
div4.addEventListener("mouseout", function(){
audio.pause()
});
</script>
</body>
</html>

How do I enable a button after a video ends.?

I have a page that contains a video and a button, but i don't want the user to be able to click finish until the video ends.
Code for the video:
<video width="100%" height="480" controls>
<source src="video/lesson4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Code for the finish button:
<form method="POST" action="week.php">
<div class="input-group">
<button type="submit" class="btn" id="btn" name="register_btn" disabled="disabled"><h6>FINISH</h6></button>
</div>
</form>

you should listen to "ended" event, like so:
var video = document.getElementById("myVideo");
var button = document.getElementById("myButton")
video.addEventListener("ended", function() {
button.disabled = false;
}, true);
See media events here

You can do this:
JavaScript
var element = document.getElementById('video_id');
element.onended = function() {
document.getElementById('btn').disabled = false;
};
jQuery
$("video").on("ended", function (e) {
$('#btn').prop('disabled', false);
});
Same you can use for events play and pause.
For more events you can refer this: https://www.w3.org/2010/05/video/mediaevents.html

You can add an event listener
Like this:
<video width="100%" height="480" controls>
<source src="video/lesson4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<form method="POST" action="week.php">
<div class="input-group">
<button type="submit" class="btn" id="btn" name="register_btn" class=“enableIfFinish”
disabled="disabled"><h6>FINISH</h6></button>
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
$(‘.enableIfFinished’).prop(‘disabled’,false);
}
</script>
Do not forget to include jquery library

Following is working example
document.getElementById('someID').addEventListener('ended',videoEndHandler,false);
function videoEndHandler(e) {
document.getElementById("myBtn").disabled = false;
}
<video id="someID" width="100%" height="480" controls>
<source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<form method="POST" action="week.php">
<div class="input-group">
<button type="submit" class="btn" id="myBtn" name="register_btn" disabled="disabled"><h6>FINISH</h6></button>
</div>
</form>

How to play sound through HTML buttons

My current method of playing music through my website is by the HTML audio tags. However I want to be able to play it through HTML button instead. This button should be able to toggle the music between playing and stopping. I've created an example on JSFiddle but don't know how to implement it. Could someone please show me how to do it using my JSFiddle example?
JSFiddle: http://jsfiddle.net/jTh3v/332/
Original way I done it:
document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>";

you can play sound by onclick event...insert a button on html.write a function and call it at your button as onclick event.
function playMusic(){
var music = new Audio('musicfile.mp3');
music.play();
}
<input type="button" value="sound" onclick="playMusic()" />
Make sure to give a valid filename.

This will work:
document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>";
$('#button_play').on('click', function() {
//I added this
$("audio")[0].play();
$('#button_pause').show();
$('#button_play').hide();
});
$('#button_pause').on('click', function() {
//I added this
$("audio")[0].pause();
$('#button_play').show();
$('#button_pause').hide();
});
.second {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Instead of doing the audio tag method, I want to do it through the buttons. However I don't know how to do this.</p><br>
<p>HTML Audio tag method (the method I don't want):</p>
<div id="soundTag"></div><br>
<p>Button method (the method I want, but doesn't work):</p>
<div>
<button id="button_play" class="first" type="button">
<i class="glyphicon glyphicon-volume-up"></i></button>
<button id="button_pause" class="second" type="button">
<i class="glyphicon glyphicon-volume-off"></i></button>
</div>

This worked. Delete my mp3 file and upload your own mp3 file.
<button id="ASong" onClick="playPause()">
<audio
src="file_example_MP3_700KB.mp3"
autoplay
loop
></audio>
Song
</button>
<script>
var aud = document.getElementById("ASong").children[0];
var isPlaying = false;
aud.pause();
function playPause() {
if (isPlaying) {
aud.pause();
} else {
aud.play();
}
isPlaying = !isPlaying;
}
</script>

try it like this
$('#button_play').on('click', function() {
$('#button_pause').show();
$('#button_play').hide();
$('audio')[0].play();
});
$('#button_pause').on('click', function() {
$('#button_play').show();
$('#button_pause').hide();
$('audio')[0].pause();
});
The idea here is to take the audio element from the array that returns and use the methods for the HTML5 tag. All the methods you can find from here

Play and pause buttons.
Info and code comes from https://www.w3schools.com/jsref/met_audio_play.asp
I put it on this http://jsfiddle.net/654qasw0/ (changing sound sources)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio">
<source src="https://upload.wikimedia.org/wikipedia/commons/1/11/H_is_for_horse.ogg" type="audio/ogg">
<source src="http://www.u86news.com/Music/Sounds/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
</body>
</html>

Try this:
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio">
<source src="https://upload.wikimedia.org/wikipedia/commons/1/11/H_is_for_horse.ogg" type="audio/ogg">
<source src="http://www.u86news.com/Music/Sounds/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
</body>
</html>
or:
<button id="ASong" onClick="playPause()">
<audio
src="file_example_MP3_700KB.mp3"
autoplay
loop
></audio>
Song
</button>
<script>
var aud = document.getElementById("ASong").children[0];
var isPlaying = false;
aud.pause();
function playPause() {
if (isPlaying) {
aud.pause();
} else {
aud.play();
}
isPlaying = !isPlaying;
}
</script>
if they don't work just try this:
$('#button_play').on('click', function() {
$('#button_pause').show();
$('#button_play').hide();
$('audio')[0].play();
});
$('#button_pause').on('click', function() {
$('#button_play').show();
$('#button_pause').hide();
$('audio')[0].pause();
});

I can not used javascript to control audio in chrome

When I click the button "play" or "pause", it does not work in Chrome:
<script>
var audioPlayer = document.getElementsByName("player_audio");
function play(){
audioPlayer.play();
}
function pause(){
audioPlayer.pause();
}
</script>
HTML:
<audio id="player_audio" controls>
<source id="audio_sources" src="http://admin.test.cnrmobile.com/18/1463652002.aac">
<p>
<button onclick="play()"> play </button>
</p>
<p>
<button onclick="pause()"> pause </button>
</p>

<!DOCTYPE html>
<html>
<body>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button><br>
<audio id="myAudio" width="320" height="176">
<source src="http://admin.test.cnrmobile.com/18/1463652002.aac" type="audio/ogg">
Your browser does not support HTML5 audio.
</audio>
<script>
var aud = document.getElementById("myAudio");
function playAudio() {
aud.play();
}
function pauseAudio() {
aud.pause();
}
</script>
</body>
</html>
https://jsfiddle.net/0fjgxosu/
Your example with document.getElementById instead works just fine too:
<script>
var audioPlayer = document.getElementById("player_audio");
function play(){
audioPlayer.play();
}
function pause(){
audioPlayer.pause();
}
</script>
https://jsfiddle.net/0fjgxosu/1/

Develop Reference

JavaScript is the programming language of the Web.

Why do the javascript video buttons not work? - javascript

Related

Why isn't the <a tag not muting the video?

Play sound on hover

How do I enable a button after a video ends.?

How to play sound through HTML buttons

I can not used javascript to control audio in chrome

Categories

Resources