I am playing video with using seekStart and seekEnd values and I want to repeat video When Video is ended,I am running below code When video is starting in 10 seconds and pause at 20 seconds video is not running again. How can I do this?
var video = document.getElementById('video');
var source = document.createElement('source');
//set Volume
document.getElementsByTagName('video')[0].volume = volume / 10;
//set src
source.setAttribute('src', fileName);
video.appendChild(source);
//set seekStart
video.addEventListener('loadedmetadata',function(){
this.currentTime = seekStart;
},false);
//set SeekEnd
video.addEventListener('timeupdate',function(){
if(this.currentTime > seekEnd){
this.pause();
}
});
//looping
video.addEventListener('ended', function () {
this.play();
}, false);
video.play();
I'm not sure how you want the seeking functionality to work, but to loop back to the start when a video ends you need to also set the time back to the start:
video.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);
Related
How do I set the current time for an audio object when a html page loads? This is what I am currently doing:
var a = document.getElementById("myAudio");
a.addEventListener("timeupdate", function() {
console.log(this.currentTime);
// do other stuff like display the current time
}
var isCurrentTimeSetOnStartup = false;
a.addEventListener("canplay", function() {
if (isCurrentTimeSetOnStartup == false){
this.currentTime = startTime;
isCurrentTimeSetOnStartup = true;
}
});
which I think is ugly. If I don't have the isCurrentTimeSetOnStartup guard then the two events trigger each other.
You can place your script at the bottom of the <body> tag and then use the following code to set the currentTime of your Audio Source.
let a = document.querySelector('#myAudio');
let startTime = 2;
a.addEventListener('canplay', function handler() {
// Time in seconds
this.currentTime = startTime;
// Remove the event listener
this.removeEventListener('canplay', handler);
});
a.addEventListener('timeupdate', function() {
//Time in seconds
console.log(this.currentTime);
});
// Play on DOM-Load
a.play();
<!--http://picosong.com/wwPMj/-->
<audio id="myAudio" controls>
<source src="https://www.computerhope.com/jargon/m/example.mp3" type="audio/mpeg">
Your browser does not support HTML5 video.
</audio>
Can I stop an html audio manually in a way that it raises the "ended" event?
<script>
var audio = new Audio();
audio.src = "https://translate.google.com/translate_tts?&q=text&tl=en&client=a"
audio.play();
audio.addEventListener("ended", function() {
console.log("audio ended");
});
audio.addEventListener("play", function() {
window.setTimeout(function() {
audio.pause(); //stop audio half sec after it starts - this doesn't raise the "ended" event!
}, 500);
});
</script>
You can do that but its on timeupdate event folowing code with jQuery and JS respectively
<audio ontimeupdate="watchTime4Audio(this.currentTime,this.duration)" ... ></audio>
IN HTML
//jQuery
$('audio').on('timeupdate',function(){
if($(this).prop('currentTime')>=$(this).prop('duration')){
//the song has ended you can put your trigger here
}
});
//JS
audio.addEventListener('timeupdate', function() {
if(this.currentTime >= this.duration){
//the song has ended you can put your trigger here
}
});
Using Javascript/JQuery
Hi I'm coding a local site for an iPad and have a video without controls that plays and pauses when clicked on. Is it possible to show the poster image when the video is paused? Or show a pause button in the center? Here's the code I have for playing and pausing:
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var overlay = document.getElementById('video-overlay');
var video = document.getElementById('video');
var videoPlaying = false;
overlay.onclick = function() {
if (videoPlaying) {
video.pause();
videoPlaying = false;
}
else {
video.play();
videoPlaying = true;
}
}
}//]]>
</script>
and the HTML for the video
<div id='video-overlay'></div>
<video width="768" height="432" poster="thumbnail2.jpg" id='video'>
<source src="PhantomFuse3_TechVideo_h264.mp4" type="video/mp4">
</video>
Another solution is to call:
video.load()
It will redisplay the poster image. it will restart the video on next interaction, but you can save the time stamp and start playing from there if you wish.
You will have to register pause event on the video.
Something like this:
JSFiddle code
Of course you should modify this for your needs and add some structure. Haven't tried it on iPad though. Also to note: registering click will introduce 300ms lag on tap event. You should look at touchstart event for touch devices and register both click and touchstart.
var overlay = document.getElementById('video-overlay'),
video = document.getElementById('video'),
videoPlaying = false;
function hideOverlay() {
overlay.style.display = "none";
videoPlaying = true;
video.play();
}
function showOverlay() {
// this check is to differentiate seek and actual pause
if (video.readyState === 4) {
overlay.style.display = "block";
videoPlaying = true;
}
}
video.addEventListener('pause', showOverlay);
overlay.addEventListener('click', hideOverlay);
am trying to assign time duration to the playlist.... but as am using onend that function is calling after completing that video, but what i want is the video should play only on its assigned time duration after that it should stops and next video should play..am using following code...
<video id="myVideo" height="100%" width="100%" autoplay onended="run();">
<source id="ss" src="video/video1.ogg" type='video/ogg'>
</video>
<script type="text/javascript">
// num_files++;
//alert(num_files);
video_count =1;
videoPlayer = document.getElementById("ss");
video=document.getElementById("myVideo");
time2= Math.round(+new Date()/1000);
function run(){
for(i=1;i<=3;i++)
{
//alert(duration[i]);
time1= Math.round(+new Date()/1000);
// alert('ctime'+time1);
dur_time=parseInt(time2,10)+parseInt(duration[i],10);
// alert('dtime'+dur_time);
video_count++;
if(time1<dur_time)
{
video_count--;
//alert(video_count);
if (video_count > num_files) video_count = 1;
videoPlayer.setAttribute("src","video/video"+video_count+".ogg");
//alert(video_count);
video.pause();
video.load();
video.play();
time1= Math.round(+new Date()/1000);
}
}
}
</script>
You need to tap into the timeupdate event which is updated when playing the video:
video.addEventListener('timeupdate', function() {
if (this.currentTime >= dur_time) {
this.pause();
/// next action
}
}, false);
You could probably achieve the same using polling (ie. setTimeout/setInterval/requestAnimationFrame) but using the event is a more clean approach and will only update on an actual time change.
Update
You can also stop a video after a certain duration this way, however, this is not "frame accurate" but can perhaps help in some extreme cases:
var seconds = 3;
setTimeout(stopVideo, seconds * 1000); /// ms
video.play();
function stopVideo() {
if (video.isPlaying) {
video.pause();
/// next action
}
}
instead of setTimeout we can use the following code and its working fine for me
video.addEventListener("timeupdate", function() {
// alert(video_count);
dur_time=parseInt(time2,10)+7;
if (this.currentTime >= 7 || time1 >= dur_time) {
this.pause();
advanceVideo();
time2= Math.round(+new Date()/1000);
}
time1= Math.round(+new Date()/1000);
}, false);
I'm looking to restart an audio file in a HTML5 audio player. I have defined a audio file and a play button.
<audio id="audio1" src="01.wav"></audio>
<button onClick="play()">Play</button>
When I click the play button the audio file starts playing, but when I click the button again the audio file doesn't stop and will not play again until it reaches the end of the file.
function play() {
document.getElementById('audio1').play();
}
Is there a method that would allow me to restart the audio file when I click the button using onclick rather than waiting for the song to stop?
To just restart the song, you'd do:
function play() {
var audio = document.getElementById('audio1');
if (audio.paused) {
audio.play();
}else{
audio.currentTime = 0
}
}
FIDDLE
To toggle it, as in the audio stops when clicking again, and when click another time it restarts from the beginning, you'd do something more like :
function play() {
var audio = document.getElementById('audio1');
if (audio.paused) {
audio.play();
}else{
audio.pause();
audio.currentTime = 0
}
}
FIDDLE
soundManager.setup({
preferFlash: false,
//, url: "swf/"
onready: function () {
soundManager.createSound({
url: [
"http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3", "http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg"
],
id: "music"
});
soundManager.createSound({
url: [
"http://www.w3schools.com/html/horse.mp3",
],
id: "horse"
});
soundManager.play("music");
}
}).beginDelayedInit();
And to start horse and pause all other sounds currently playing in a click event:
$("#horse").click(function () {
soundManager.stopAll();
soundManager.play("horse");
});
function sound(src) {
this.sound = document.createElement("audio");
this.sound.src = src;
this.sound.setAttribute("preload", "auto");
this.sound.setAttribute("controls", "none");
//this.sound.style.display = "none";
document.body.appendChild(this.sound);
this.play = function () {
this.sound.play();
}
this.stop = function () {
this.sound.pause();
this.sound.currentTime = 0
}
}
you can use the /above function to play sound
let mysound1 = new sound('xyz.mp3')
mysound1.play()