As the title suggests, I have audio playing automatically in my site, and some visitors have recommended that I create a pause button for it. After trying numerous online javascript based solutions, I have come out with no success. I use the following code for the audio to play:
<audio id= "song" autoplay loop onloadeddata="setHalfVolume()">
<source src="song.mp3" type="audio/mpeg">
</audio>
Add controls to tag <audio>
example:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML:
<audio controls="controls">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the <code>audio</code> element.
</audio>
Source:/
https://www.w3schools.com/html/html5_audio.asp
https://developer.mozilla.org/en/docs/Web/HTML/Element/audio
Jquery;
$(function(){
$('audio').click(function() {
if (this.paused !== false) {
this.play();
} else {
this.pause();
}
});
});
Html
<!-- add a button to control the audio -->
<button id="btn">Pause</button>
Js
var btn = document.querySelector('#btn'),
songAudio = document.querySelector('#song');
btn.addEventListener('click', function () {
if (songAudio.paused) { // toggle the audio and button
songAudio.play();
btn.textContent = 'Pause';
} else {
songAudio.pause();
btn.textContent = 'Play';
}
}, false);
Related
I have a problem with my javascript code, I made a hover effect for a text to play a video. but now I want to hide the video when you not hover the text. when I'm adding a hidden element, the hover effect does not work anymore...
Do you guys know the solution?
<script type="text/javascript">
var Htext=document.getElementById("Htext");
var Hvideo=document.getElementById("Hvideo");
function PauseH(){
Hvideo.pause();
}
function PlayH(){
if(Hvideo.paused)
Hvideo.play();
}
if(Hvideo.pause){
Hvideo.hidden = true;
}else{
Hvideo.hidden = false;
}
</script>
<div>
<video id="Hvideo" width="320" height="240" preload="auto">
<source src="URL will be added" type="video/mp4">
</video>
<button id="Htext" onmouseover="PlayH()" onmouseout="PauseH()">HVAC</button>
</div>
your code appears to be essentially working:
https://www.w3schools.com/code/tryit.asp?filename=GMLBBYWJV4I2
<div>
<button id="Htext" onmouseover="PlayH()" onmouseout="PauseH()">HVAC</button>
</div>
<video id="Hvideo" width="320" height="240" controls>
<source src="https://www.w3schools.com/jsref/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/jsref/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<script>
var Htext=document.getElementById("Htext");
var Hvideo=document.getElementById("Hvideo");
function PauseH(){
Hvideo.pause();
Hvideo.hidden = true;
}
function PlayH(){
if(Hvideo.paused) {
Hvideo.play();
Hvideo.hidden = false;
}
}
</script>
I do wonder if the issue is down to the fact that you need the HTML elements to exist before you run your JavaScript, and it will fail if the JavaScript runs before the elements appear on the page.
Whever I set
s.loop = true
or with onended event :
s.onended = function()
{
this.currentTime = 0 ;
this.play();
};
it loops a few seconds before the end of the track....
Did anybody here experienced this problem before and found how to fix it ?
(Yes I know webaudio is way better, but it takes ages to decode files on mobiles, so I use it only for short sounds and have to use the nasty old audio element for music.)
If you want to always repeat the audio, and it does not work through Javascript, you can use loop tag in HTML
<audio controls loop>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
I test your code and play complete sound, then repeat the sound
<audio id="Audio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
<script>
var s = document.getElementById("Audio");
s.loop = true;
</script>
<script>
var s = document.getElementById("Audio");
s.onended = function(){
this.currentTime = 0 ;
this.play();
}
</script>
How do you detect when a HTML5 <video> element has finished playing?
You can add an event listener with 'ended' as first param
Like this :
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>
Have a look at this Everything You Need to Know About HTML5 Video and Audio post at the Opera Dev site under the "I want to roll my own controls" section.
This is the pertinent section:
<video src="video.ogv">
video not supported
</video>
then you can use:
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
/*Do things here!*/
};
</script>
onended is a HTML5 standard event on all media elements, see the HTML5 media element (video/audio) events documentation.
JQUERY
$("#video1").bind("ended", function() {
//TO DO: Your code goes here...
});
HTML
<video id="video1" width="420">
<source src="path/filename.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Event types HTML Audio and Video DOM Reference
You can simply add onended="myFunction()" to your video tag.
<video onended="myFunction()">
...
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
function myFunction(){
console.log("The End.")
}
</script>
Here is a simple approach which triggers when the video ends.
<html>
<body>
<video id="myVideo" controls="controls">
<source src="video.mp4" type="video/mp4">
etc ...
</video>
</body>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', function(e) {
alert('The End');
})
</script>
</html>
In the 'EventListener' line substitute the word 'ended' with 'pause' or 'play' to capture those events as well.
Here is a full example, I hope it helps =).
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
alert("Video Finished");
}
</script>
</body>
</html>
You can add listener all video events nicluding ended, loadedmetadata, timeupdate where ended function gets called when video ends
$("#myVideo").on("ended", function() {
//TO DO: Your code goes here...
alert("Video Finished");
});
$("#myVideo").on("loadedmetadata", function() {
alert("Video loaded");
this.currentTime = 50;//50 seconds
//TO DO: Your code goes here...
});
$("#myVideo").on("timeupdate", function() {
var cTime=this.currentTime;
if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once
alert("Video played "+cTime+" minutes");
//TO DO: Your code goes here...
var perc=cTime * 100 / this.duration;
if(perc % 10 == 0)//Alerts when every 10% watched
alert("Video played "+ perc +"%");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</body>
</html>
I have a 20 second long HTML5 video loop as the background on my webpage and it is set to autostart. Is it possible to delay the video autoplay for 5 seconds? I am trying to allow the video to load completely before trying to play to prevent it from stuttering as much. Here is my current code:
<video id="video_background" poster="images/dmm_background.jpg" controls="controls" preload="true" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="videos/backgroundvideo.mp4" type="video/mp4">
<source src="videos/backgroundvideo.webm" type="video/webm">
</video>
</video>
Any help is greatly appreciated!!
This is a working solution for me. You should use canplay as a best practice to be sure the browser can play the video. Also, here is a straight javascript solution.
Note: I removed autoplay, an extra closing video tag, and formatted your muted & loop flags.
var video = document.getElementById("video_background");
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
<video id="video_background" poster="images/dmm_background.jpg" controls="controls" preload="true" muted loop>
<source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/SsRadVyPGjdkeg9tt/videoblocks-computer-hacking-in-process-cyber-security-concept_h-l3zbu4xb__PM.mp4">
<source src="videos/backgroundvideo.webm" type="video/webm">
</video>
That would be better to remove autoplay attribute from video tag and add it when you actually need it (meaning in 5 seconds). And if you are willing to preload video, then you should use preload="auto" (not preload="true"), it will load completely while loading a page.
const startVideo = async () => {
const video = document.querySelector('#video_background');
try {
await video.play();
video.setAttribute('autoplay', true);
console.log('video started playing successfully');
} catch (err) {
console.log(err, 'video play error');
// do stuff in case your video is unavailable to play/autoplay
}
}
setTimeout(startVideo, 5000)
Is it possible to detect when the play button in the html5 audio player is clicked?
For example:
<audio controls>
<source src="music.mp3"/>
<source src="music.ogg" />
</audio>
....
....
$('playbutton').on('click', function(e){
//some functions
});
Sounds like (heh) you're looking for the play event.
<audio controls id="player">
<source src="music.mp3">
</audio>
<script>
var player = document.getElementById("player");
player.addEventListener("play", function () {
console.log("it's go time");
});
</script>
For a full list of the available events, at least according to the spec, check out the WHATWG doc