Tell me please when stop all element audio with class 'media_audio_player'
example:
<audio src="./ConcertMedia/'.$i2['file'].'" class="media_audio_player"> </audio>
<audio src="./ConcertMedia/'.$i2['file'].'" class="media_audio_player"> </audio>
<audio src="./ConcertMedia/'.$i2['file'].'" class="media_audio_player"> </audio>
i want use code $('.media_audio_player').get(0).pause(); but he doesnt work...
Why not work code and what me need doing?
Please check the code which plays the sound based on class applied to audio Tags.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function playerClicked() {
audio=$(".audioplayer").get(1);
debugger;
audio.load()
if(audio.paused){
audio.play();
} else {
audio.pause();
}
}
</script>
</head>
<body>
<a id ="storyplayer" href="javascript:playerClicked();">
Click here to play.
</a>
<audio class ="audioplayer">
<source src="sound/siol.mp3" type="audio/mpeg" >
</audio>
<audio class ="audioplayer">
<source src="sound/siol.mp3" type="audio/mpeg" >
</audio>
</body>
</html>
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.
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);
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>
Hello I want to stop audio at determined time for example I click play and I want to stop it at 5 seconds, when it stops I want to show a button and if you click it the audio will continue again and I need to do it 5 times, any help is welcome
Here is what I have:
<audio controls id="audio2" src="song.ogg" type="audio/ogg">
<p>Your browser does not support the audio element</p>
</audio>
<script>
myAudio=document.getElementById('audio2');
myAudio.addEventListener('play', function() {
this.play();
if(this.currentTime = 5){
this.stop();
}
});
</script>
</audio>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#audio").on(
"timeupdate",
function(event){
if (this.currentTime >= 5) {
$("#audio")[0].pause();
}
});
});
</script>
</head>
<body>
<audio controls preload id="audio">
<source src="cancion.mp3" type="audio/mpeg" />
Tu navegador no soporta esta caracteristica
</audio>
<div id="current">0:00</div>
<div id="duration">0:00</div>
</body>
</html>
I did it, finally
This is a super simple question but I am stumped how to get the HTML to work out.
I have all the javascript set up, everything in place, but I don't know how to make the HTML work.
This is what I have
<div id="door">
<a href="inspect/squishdoor.html" onmouseover="document.door.src='storyimages/buttons/doorlarge.png'", "mouseoversound.playclip()" onmouseout="document.door.src='storyimages/buttons/doorlargeinv.png'">
<img src="storyimages/buttons/doorlargeinv.png" name="door"></a>
</div>`
I'd like it to display an image and play a sound, which it does if I choose one or the other but if they are next to each other it doesn't work.
You can use this code :
var $audio = $("audio_element"); //caching
$("object_element_id") .on ('mouseover', function(e){
$audio.play();
});
$("object_element_id") .on ('mouseout', function(e){
$audio.stop();
});
Or simply this
var audio = $("#audio");
$("play a").mouseenter( function() {
audio.play();
}
Where audio is that audio element and play a is element which is hovered.
And how to add these function. There is one example
CODE:
<!DOCTYPE html>
<html>
<body>
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button>
<br>
<video id="video1">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
var myVideo=document.getElementById("video1");
function playVid()
{
myVideo.play();
}
function pauseVid()
{
myVideo.pause();
}
</script>
<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck
Bunny</a>.
</p>
</body>
</html>