how can using php play a sound each 1 or 2 min
when a user enter in the page the first sound play
after 1 min another sound will be played and the first will be stopped of
course all that will be auto play
html5 code:
<audio controls autoplay>
<source src="horse.mp3" type="audio/mpeg">
</audio>
Simply you can merge both sound with your timing and implemented just like this:
<audio controls="controls" onloadeddata="audioSoundFunction()">
<source src="horse.mp3" type="audio/mp3" />
</audio>
Javascript:
function audioSoundFunction() {
var audioSound = this;
setTimeout(function() {
audioSound.play();
}, 10000)
}
<audio id="selecterForAudio" controls autoplay>
<source src="horse.mp3" type="audio/mpeg">
</audio>
javascript/jquery
var myVar = setInterval(myTimer, 60000);
var audio = $("#selecterForAudio")[0];
var counter = 0;
var musicfiles = ["horse.mp3", "lard.mp3"];
function myTimer(){
//stopping the audio
audio.stop();
//setting new source of array of sources
$('#selecterForAudio').find('source').attr('src',musicfiles[counter]);
counter+1;
if(counter>COUNT(musicfiles)){
counter=0;
}
//play sound
audio.play();
}
something like this should fit your needs - it might need a little tweeking though
Related
I use video tag of html5 by separate audio from video like this code.
<video id="myvideo" controls >
<source src="output.webm" type="video/webm">
<audio id="myaudio" controls="">
<source src="audio1.ogg" type="audio/ogg"/>
</audio>
</video>
<script>
var myvideo = document.getElementById("myvideo");
var myaudio = document.getElementById("myaudio");
var change_time_state = true;
myvideo.onplay = function(){
myaudio.play();
if(change_time_state){
myaudio.currentTime = myvideo.currentTime;
change_time_state = false;
}
}
myvideo.onpause = function(){
myaudio.pause();
change_time_state = true;
}
</script>
It can play video and audio but it cannot change audio volume. Can I fix it to change volume ?
Use the MP4 video and check your source URL.
You might be searching the DOM volume Property, check it in w3school
In your case the solution is:
myaudio.volume = anynumber;
Must be a number between 0.0 and 1.0.
Example values:
1.0 is highest volume (100%. This is default)
0.5 is half volume (50%)
0.0 is silent (same as mute)
I have a folder with 5 videos. I want to write a program in HTML/AngularJS to dynamically call the videos from the folder without having to mention the videos in a list.
<video id="myvideo" width="320" height="240" controls style="background:black">
<source class="active" src="http://www.w3schools.com/html/mov_bbb.mp4"
type="video/mp4" />
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>
var myvid = document.getElementById('myvideo');
myvid.addEventListener('ended', function(e) {
// get the active source and the next video source.
// I set it so if there's no next, it loops to the first one
var activesource = document.querySelector("#myvideo source.active");
var nextsource = document.querySelector("#myvideo source.active +
source") || document.querySelector("#myvideo source:first-child");
// deactivate current source, and activate next one
activesource.className = "";
nextsource.className = "active";
// update the video source and play
myvid.src = nextsource.src;
myvid.play();
});
This code works if I explicitly mention the videos in the list in the program itself. But I don't want to do that.
Any way around this? Thanks in advance.
I feel, you want to achieve this by following way:
const videoSrcList = [
"http://www.w3schools.com/html/mov_bbb.mp4",
"http://www.w3schools.com/html/movie.mp4",
...
];
var nextIndex = 1;
var myvid = document.getElementById('myvideo');
myvid.addEventListener('ended', function(e) {
var activesource = myvid.querySelector("source");
activesource.src = videoSrcList[nextIndex];
myvid.play();
});
<video id="myvideo" width="320" height="240" controls style="background:black">
<source class="active" src="http://www.w3schools.com/html/mov_bbb.mp4"
type="video/mp4" />
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>
I have a video in my html. I would like the video to pause at 5 seconds after playing so I used addEventListener. I also have 2 buttons that call either restart() or jump().
When I play my video, an EventListener is called on my video. It pauses at 5 seconds, but I can't get it to play after 5 seconds (I've tried removing the listener but then the video no longer pauses). When I call jump(), it'll take me to 10 seconds but continue to pause when I try to play it. When I call reset(), the video will play up to 5 seconds again, which makes sense since I have a Listener on it. How do I get it to play after 10 seconds for when I call jump()? At first I thought I would have to remove my Listener but I believe I'll need that still because I would like the video to pause at 15 seconds. Or maybe I need to call removeEventListener somewhere else?
js
var video = document.getElementById("myvid");
video.addEventListener("timeupdate", function(){
if(this.currentTime >= 5) {
this.pause();
}
});
function restart(){
video.currentTime = 0;
}
function jump(){
video.currentTime = 10;
if (video.currentTime >=15){
video.pause
}
}
html
<video id="myvid" width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
<button onclick="restart()">restart</button>
<button onclick="jump()">jump</button>
You must keep the pause time in a variable. Then you can use it in the jump function:
var video = document.getElementById( 'myvid' ),
pausedtime = 0;
video.addEventListener( 'timeupdate', function() {
if ( this.currentTime >= pausedtime + 5 ) {
this.pause();
pausedtime = this.currentTime
}
});
function restart(){
video.currentTime = 0;
pausedtime = 0;
video.play()
}
function jump(){
pausedtime += 5;
video.currentTime = pausedtime;
video.play()
}
<video id="myvid" width="320" height="240" controls>
<source src="http://iandevlin.com/html5/media-player/parrots.mp4.mp4" type="video/mp4">
<source src="http://iandevlin.com/html5/media-player/parrots.webm" type="video/webm">
</video>
<br>
<button type="button" onclick="restart()">Restart</button>
<button type="button" onclick="jump()">Jump</button>
I saw some examples of defaultPlaybackRate and they say it work on Chrome. So I use their example codes and run on Chrome, it doesn't change the speed to 3.0x when I click the button. Anyone can tell me why?
Here my javascript code,
$(document).ready(function(){
var video = document.getElementById('video');
$("#speed").click(function() { // button function for 3x fast speed
video.defaultPlaybackRate=3.0;
});
});
The HTML codes,
<button id="speed" type="button">3.0x</button>
and
<video id="video" width="930" height="500" controls>
<source src="caption.mp4" type="video/mp4">
<source src="caption.ogg" type="video/ogg" >
<source src="caption.webm" type="video/webm" >
</video>
Because once you change the defaultPlaybackRate you have to load the video again using video.load(); (or set it before the video has loaded). If you want to change the rate while the video plays, use playbackRate instead.
var video = document.getElementById('video');
$("#speed").click(function () { // button function for 3x fast speed
video.defaultPlaybackRate = 3.0;
video.load();
});
or
var video = document.getElementById('video');
$("#speed").click(function () { // button function for 3x fast speed
video.playbackRate = 3.0;
});
jsFiddle example
Can I make a countdown to the end of the HTML5 video?
<video id="video" width="400" height="225" preload="auto">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
<div id="countdown">Video ends after <span>XX</span> seconds.</div>
I understand that a have to wait for the video load, and then if the video is loaded, need to know the length and run video and coundown.
Listen to the timeupdate event fired by the video object and update the time remaining.
Something like this should work:
var video = document.getElementById('video');
video.addEventListener('timeupdate', updateCountdown);
function updateCountdown() {
var timeSpan = document.querySelector('#countdown span');
timeSpan.innerText = video.duration - video.currentTime;
}
This should do the trick for you
countdown = video.duration - video.currentTime
See here for more details