I have some code where the progress bar is linked to the audio paying; but i haven't worked out how to seek with the mouse cursor on the progress bar. Is there a way to do this in Legacy JavaScript?
JavaScript:
function play() {
document.getElementById('player').play();
}
function pause() {
document.getElementById('player').pause();
}
function updateProgress() {
var player = document.getElementById('player');
var progressbar = document.getElementById('seekbar');
progressbar.value = (player .currentTime / player .duration);
};
HTML:
<audio ontimeupdate="updateProgress()" src="music/fiji/lladep/apathy.mp3" id="player"></audio>
<button onClick="play()">Play</button>
<button onClick="pause()">Pause</button>
<progress id="seekbar" value="0" max="1"></progress>
Related
if(!!window.IntersectionObserver){
let target = document.querySelector('#testme');
let audio = document.querySelector('audio');
let isPaused = false; /* flag for auto-pausing of the audio */
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.intersectionRatio!=.5 && !audio.paused){
audio.pause(); isPaused = true;
}
else if(isPaused) {audio.play(); isPaused=false}
});
}, {threshold: .5});
observer.observe(target) ;
}
else document.querySelector('#warning').style.display = 'block';
<!-- some warnings, for demo purposes -->
<strong id="warning" hidden>IntersectionObserver is not supported by your browser, so you can't see the effect. Check its browser support here.</strong>
<noscript>⚠️ JAVASCRIPT IS DISABLED IN YOUR BROWSER!</noscript>
<div style="height:600px">
<h1>Click video just to trigger the ability to auto play audio on site, then as you scroll through the page, the respective audio should pause/play depending if it's in the view</h1>
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls="" height="200px"></video>
</div>
<br>
<br>
<br>
<hr>
<!-- audio files -->
<div id="testme" style="height:600px; background-color:#CCC">
<audio controls loop src="https://truefa-znfmrrlhm9.live-website.com/wp-content/uploads/2022/12/random_music.mp3" height="10"></audio>
</div>
<hr>
<audio id="testme" controls loop src="https://truefa-znfmrrlhm9.live-website.com/wp-content/uploads/2022/12/random_muisc2.mp3"></audio>
I'm trying to play different audio depending where the user is on the page by leveraging intersection observer
However, the respective audio is not pausing and playing when the various divs are in view. Not sure what I'm missing here for the code to function accordingly...
if(!!window.IntersectionObserver){
let target = document.querySelector('#testme');
let audio = document.querySelector('audio');
let isPaused = false; /* flag for auto-pausing of the audio */
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.intersectionRatio!=.5 && !audio.paused){
audio.pause(); isPaused = true;
}
else if(isPaused) {audio.play(); isPaused=false}
});
}, {threshold: .5});
observer.observe(target) ;
}
else document.querySelector('#warning').style.display = 'block';
https://codepen.io/truefa/pen/PoBWZLV
the button plays audio. I'd also like it to also simultaneously start the timer below. As of now the timer starts immediately when the page loads. I'd like for it to only start along with the audio when I press the button. I can't figure out the syntax.
<button class="button1"
onclick="document.getElementById('sound1').play()">
</button>
<p> Time ends in <span id="countdowntimer">10 </span> Seconds</p>
<script type="text/javascript">
var timeleft = 10;
var downloadTimer = setInterval(function(){
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if(timeleft <= 0)
clearInterval(downloadTimer);
},1000);
**strong text**</script>
Use currentTime and duration properties to calculate left time, here is an example:
var sound1 = document.getElementById('sound1');
var countDownTimer = document.getElementById('countdowntimer');
function play() {
sound1.play();
};
function updateTimer() {
countDownTimer.textContent = Math.floor(sound1.duration) - Math.floor(sound1.currentTime);
}
<audio id="sound1" src="https://ia902508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3" ontimeupdate="updateTimer()" >
Your browser does not support the <code>audio</code> element.
</audio>
<button class="button1" onclick="play()">Play</button>
<p> Time ends in <span id="countdowntimer"></span> Seconds</p>
I have custom controls for a video.
See codepen.
Great. It works relatively well. However, I miss a functionality. When the video is paused and I drag slider on the seekbar, the video frames are not updating real time, only after you "put" the slider down (mousedown).
As you can see here, with the native html5 video functionality it's done like that: while you drag the bar, the video updates to the current frame your cursor is on. For me this would be quite important.
So, how could I make this happen? The problem lies in the nature of .addEventListener("change"), doesn't it?
<div class="row">
<div class="col-sm-4" id="video-container">
<!-- Video -->
<video id="video" muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<p>
Your browser doesn't support HTML5 video.
</p>
</video>
<!-- Video Controls -->
<div id="video-controls">
<button type="button" id="play-pause" class="play"><img src="https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_play_arrow_white_24px.svg"></button>
<input type="range" id="seek-bar" value="0">
<button type="button" id="full-screen"><img src=https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_fullscreen_white_24px.svg></button>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
// Video
var video = document.getElementById("video");
// Buttons
var playButton = document.getElementById("play-pause");
var fullScreenButton = document.getElementById("full-screen");
// Sliders
var seekBar = document.getElementById("seek-bar");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
$('img', playButton).attr("src","https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_pause_white_24px.svg");
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
$('img', playButton).attr("src","https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_play_arrow_white_24px.svg");
}
});
// Event listener for the full-screen button
fullScreenButton.addEventListener("click", function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
// Event listener for the seek bar
seekBar.addEventListener("change", function() {
// Calculate the new time
var time = video.duration * (seekBar.value / 100);
// Update the video time
video.currentTime = time;
});
// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
// Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
// Update the slider value
seekBar.value = value;
});
// Pause the video when the seek handle is being dragged
seekBar.addEventListener("mousedown", function() {
video.pause();
});
$('#video-controls').width($('video').width());
$('#seek-bar').width($('video').width() -105);
}
</script>
I got it done by changing the .addEventListener("change") to .addEventListener("input"), but maybe this question could be helpful for someone so I didn't delete it.
We have some videos playing great in our HTML mobile app. However, our videos don't have sound, just subtitles, so we need to remove the volume slider and mute button but keep the timer bar.
Can this be done or toggled with HTML or CSS? Or is some javascript required to do this?
At the moment the setting within our html tag is just: controls="controls"
This has worked:
video::-webkit-media-controls-volume-slider {
display:none;
}
video::-webkit-media-controls-mute-button {
display:none;
}
Super easy:
Your html should be something like:
<video id="Video1">
<source src="..." type="video/mp4">
<source src="..." type="video/ogg">
Your browser does not support HTML5 video.
</video>
Add then a customized button to play the video:
<button id="play" onclick="vidplay()">></button>
Finally a progress bar:
<progress id="progressbar" value="0" max="100"></progress>
Then in javascript add a button to play
var video = document.getElementById("Video1");
function vidplay() {
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
And a listener to update the progress bar:
video.addEventListener('timeupdate', updateProgressBar, false);
function updateProgressBar() {
var progressBar = document.getElementById('progressbar');
var percentage = Math.floor((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
progressBar.value = percentage; progressBar.innerHTML = percentage + '% played';
}
So basically remove the "standard controls" and create your own ones.
If you wanted to achieve more complicated results, I would recommend you another option. This could be using a more configurable setting such as video.js.
Remove the controls attribute from the video element completely.
Try Here: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_controls. Remove the "controls" attribute and the bar will disappear.
I've my codes as below
<header>
<audio src="friends_and_family_03.mp3" id="audio" controls></audio>
<input type="range" step="any" id="seekbar"></input>
<script>
seekbar.value = 0;
var audio = document.getElementById("audio");
var seekbar = document.getElementById('seekbar');
function setupSeekbar() {
seekbar.min = audio.startTime;
seekbar.max = audio.startTime + audio.duration;
}
audio.ondurationchange = setupSeekbar;
function seekAudio() {
audio.currentTime = seekbar.value;
}
function updateUI() {
var lastBuffered = audio.buffered.end(audio.buffered.length-1);
seekbar.min = audio.startTime;
seekbar.max = lastBuffered;
seekbar.value = audio.currentTime;
}
seekbar.onchange = seekAudio;
audio.ontimeupdate = updateUI;
</script>
<p>
<button type="button" onclick="audio.play();">Play</button>
<button type="button" onclick="audio.pause();">Pause</button>
<button type="button" onclick="audio.currentTime = 0;"><< Rewind</button>
</p>
</header>
This is as explained in http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
My problems are
1) The seekbar max value is not set according to the audio duration. (The seekbar width is just around half the audio duration).
2) The seekbar doesnt show any progress as the audio plays on but if you drag the seekbar, the currenTime actually changes.
Can anyone help me modify my code so that it functions properly??
If you are caught up with the same problem, here's the solution. (I got it from another forum). Just add these two lines:
audio.addEventListener('durationchange', setupSeekbar);
audio.addEventListener('timeupdate', updateUI);
Or maybe I was just a little too stupid!! lol