How to create a toggle sound button on video - javascript

I recently just asked a question on how to execute a working togglePlay button and I left out the sound part bc I thought it could be done the exact same way. I'm now realizing that it's a bit more complicated than I thought.
So far I've been able to get the sound icon to change, but I can't figure out how to get the actual audio to mute and unmute. Here's my code:
const video = document.querySelector('.dvid');
const togglePause = document.querySelector('.toggle-pause');
const toggleSound = document.querySelector('.toggle-sound');
function togglePlay() {
const isPlaying = video.paused ? 'play' : 'pause';
video[isPlaying]();
}
function togglePlyBtn() {
if (this.paused) {
togglePause.innerHTML = '<img src="play.png">';
} else {
togglePause.innerHTML = '<img src="pause.png">';
}
}
function toggleSnd () {
}
function toggleSndBtn() {
if (this.muted === true) {
toggleSound.innerHTML = '<img src="mute.png">' ;
} else {
toggleSound.innerHTML = '<img src="sound.png">';
}
}
video.addEventListener('click', toggleSnd);
video.addEventListener('click', togglePlay);
video.addEventListener('pause', togglePlyBtn);
video.addEventListener('play', togglePlyBtn);
video.addEventListener('muted', toggleSndBtn);
toggleSound.addEventListener('click', toggleSndBtn);
togglePause.addEventListener('click', togglePlay);
<video class="dvid" autoplay loop muted>
<source src="2amfreestyle.mp4" type="video/mp4"/>
<p>This browser does not support this video</p>
</video>
<footer class="indexfooter">
<div class="video-controls">
<button class="toggle-pause"> <img src="pause.png"> </button>
<button class="toggle-sound">
<img src="mute.png">
</button>

You can use volume property to set or return current volume of the video.
So the toggleSnd would look something like this:
function toggleSnd () {
video.volume = video.volume > 0 ? 0 : 1;
}

Related

How to make a video minimized automatically when it ends

I use a button that calls the function "play()" that make the video play on fullscreen
<div style="text-align:center">
<form>
<input type="button" name="something" value="start_experiment" onclick="play(this,vid)">
</form>
</div>
<video id="vid" width="320" height="240" class="rounded-circle" >
<source src="assets/vid/video.mp4" type="video/mp4" >
</video>
<script>
function play(button,vidid) {
button.style.visibility = "hidden";
var myVideo = vidid;
if (myVideo.requestFullscreen) {
myVideo.requestFullscreen();
}
else if (myVideo.msRequestFullscreen) {
myVideo.msRequestFullscreen();
}
else if (myVideo.mozRequestFullScreen) {
myVideo.mozRequestFullScreen();
}
else if (myVideo.webkitRequestFullScreen) {
myVideo.webkitRequestFullScreen();
}
myVideo.play();
}
</script>
How could I make the video auto-minimized when it stops playing?
.onended() this function use in end video.
The ended event occurs when the audio/video has reached the end.
This event is useful for messages like "thanks for listening", "thanks for watching", etc.
example:-
var vid = document.getElementById("vid");
vid.onended = function() {
alert("The video has ended");
this.exitFullscreen();
/*any this you add this function*/
};
You can add an event listener to your video which fires when it ends.
myvideo.addEventListener('ended', () => {
document.exitFullscreen();
});

How do I make the video controls show up in firefox?

When I hover my video control bar in Chrome, Safari it shows up. But when I hover that in firefox, it's not showing. I don't know if my js code doesn't support firefox. But when I inspect it in firefox, the controls keep appearing and disappearing. Below is my code. Can anyone help me with this? Thank you.
HTML
<video poster="http://dummyimage.com/320x205/852285/fff" preload="auto">
<source type="video/mp4" src="http://www.w3schools.com/html/movie.mp4" />
</video>
JS
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.1/js/mediaelement.js'></script>
// Video Player
function videoPlayer() {
// Exit full screen when video is done playing
var video = document.getElementsByTagName("video")[0];
video.addEventListener("ended", function(e) {
video.webkitExitFullScreen()
});
var player = $('.video-player'),
controls = player.find('.vid-play-btn-wrap'),
wrapper = player.find('video'),
video = player.find('video').get(0),
isPlaying = false,
settings = {},
media = new MediaElement(video, settings),
$media = $(media);
$media.on('play', _playHandler);
$media.on('pause', _pauseHandler);
$media.on('ended', _endedHandler);
player.click(_togglePlayPause);
player.hover(_mouseOverHandler, _mouseOutHandler);
function _togglePlayPause() {
isPlaying ? media.pause() : media.play();
}
function _mouseOverHandler() {
if(!isPlaying) { return; }
// controls.fadeIn('fast');
}
function _mouseOutHandler() {
if(!isPlaying) { return; }
// controls.fadeOut('fast');
}
function _endedHandler() {
isPlaying = false;
video.load();
controls.show();
}
function _playHandler() {
isPlaying = true;
controls.hide();
}
function _pauseHandler() {
isPlaying = false;
}
$('video').hover(function toggleControls() {
if (this.hasAttribute("controls")) {
this.removeAttribute("controls")
} else {
this.setAttribute("controls", "controls")
}
});
}
you have this in your script:
player.hover(_mouseOverHandler, _mouseOutHandler);
So BOTH functions are executed on hover (which explains the appearing and disappearing). It might be better to create ONE function that contains both things you want in an if/else statement

Change onclick() function multiple times (play/pause image change)

<audio>
<source src="data/music/track1.mp3" type="audio/mpeg">
Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" class="button_media button-mini" onclick="aud_play_pause()">
<img id="play_pause" src="data/play_button.png" onclick "changePlayPauseButton()">
</button>
<audio>
<source src="data/music/track2.mp3" type="audio/mpeg">
Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" class="button_media button-mini" onclick="aud_play_pause()">
<img id="play_pause_two" src="data/play_button.png" onclick "changePlayPauseButtonTwo()">
</button>
<audio>
<source src="data/music/track3.mp3" type="audio/mpeg">
Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" class="button_media button-mini" onclick="aud_play_pause()">
<img id="play_pause_three" src="data/play_button.png" onclick "changePlayPauseButtonThree()">
</button>
<script>
var play_pause = "pause_button.png";
function changePlayPauseButton() {
if (play_pause == "pause_button.png") {
document.images["play_pause"].src = "data/pause_button.png";
document.images["play_pause"].alt = "pause";
play_pause = "play_button.png";
} else {
document.images["play_pause"].src = "data/play_button.png";
document.images["play_pause"].alt = "play";
play_pause = "pause_button.png";
}
}
var play_pause_two = "pause_button.png";
function changePlayPauseButtonTwo() {
if (play_pause_two == "pause_button.png") {
document.images["play_pause_two"].src = "data/pause_button.png";
document.images["play_pause_two"].alt = "pause";
play_pause_two = "play_button.png";
} else {
document.images["play_pause_two"].src = "data/play_button.png";
document.images["play_pause_two"].alt = "play";
play_pause_two = "pause_button.png";
}
}
var play_pause_three = "pause_button.png";
function changePlayPauseButtonThree() {
if (play_pause_three == "pause_button.png") {
document.images["play_pause_three"].src = "data/pause_button.png";
document.images["play_pause_three"].alt = "pause";
play_pause_three = "play_button.png";
} else {
document.images["play_pause_three"].src = "data/play_button.png";
document.images["play_pause_three"].alt = "play";
play_pause_three = "pause_button.png";
}
}
</script>
I created a kind of playlist which appears only the button
play / pause . I also customized the button , so that the image automatically change when clicked . The problem is that I have several buttons !
What I like to do, is to change not only the image of the button itself when clicked but also the other button when it is in play mode ( pause image ) to be returned to the play mode (play image )
Go easy on me guys
I just started to code one month ago!
thanks
Well, I'm not sure if is that what you need but take a look the example:
http://jsfiddle.net/j6nbcpL9/
js:
$(document).ready(function(){
$('button').on('click', function(){
var option = $(this).attr('data-btn');
console.log(option);
if(option === 'changePlayPauseButtonThree'){
changePlayPauseButtonThree();
...
}
if(option === 'changePlayPauseButtonTwo'){
changePlayPauseButtonTwo();
...
}
if(option === 'changePlayPauseButton'){
changePlayPauseButton();
...
}
});
});
Also, let me know if is not what you need to implement it properly. The code is not the best but I hope it's help.

Audio Player mute button (HTML5 and Javascript)

I am trying to create a mute button to my website's custom audio player. Apparently, this simple thing gives me a real headache.
As you see below, I have tried to ad an IF statement to the button. If the volume is on and I press the button, mute the volume. else, if the volume si muted, unmute it.
<audio id="audio" >
<source src="material/audio/sound.mp3"
type='audio/mpeg;
codecs="mp3"'/>
</audio>
<button ID="mute"
onclick="muteAudio()">
<img src="material/images/mute.png"
ID="mute_img"/>
<script type="text/javascript">
function muteAudio() {
var audio = document.getElementById('audioPlayer');
if (audio.mute = false) {
document.getElementById('audioPlayer').muted = true;
}
else {
audio.mute = true
document.getElementById('audioPlayer').muted = false;
}
}
</script>
You need to use == (comparison) rather than = (assignment):
if (audio.mute == false)
{
document.getElementById('audioPlayer').muted = true;
}
else
{
audio.mute = true
document.getElementById('audioPlayer').muted = false;
}
or probably better would be to use the ! (not) operator:
if (!audio.mute)

How use 2 audio players and stop one when other is playing

So i have one audio player in my page with two play buttons, and i need to stop and play the player works with this two buttons.
I'm using html5 and js/jquery for do this, but i can't finding a way to stop audio-player 1 when i start audio-player 2, someone can help?
My jsfiddle: http://jsfiddle.net/j08691/LqM9D/9/
My 2cents, it will detect with button is clicked, and change the other one's text back to "play"
window.player = $('#player')[0];
$('#playpause, #playpause2').click(function () {
if (player.paused) {
var second_playbutton = ($(this).attr("id") == "playpause")
? "playpause2"
: "playpause"
$("#" + second_playbutton).html("play");
player.play();
this.innerHTML = 'pause';
} else {
player.pause();
this.innerHTML = 'play';
}
})
you can just use one class name for each button and control them at one time
<button class="player-control" id="playpause">play</button>
<audio id="player">
<source src="http://96.47.236.72:8364/;" />
</audio>
<!-- here the other button that needs to start sound too -->
<button class="player-control" id="playpause2">play</button>
<script type="text/javascript">
window.player = $('#player')[0];
$('.player-control').click(function () {
if (player.paused) {
player.play();
$('.player-control').html('pause');
} else {
player.pause();
$('.player-control').html('play');
}
});
</script>

Categories