We Keep Coding

html5 Video should start from a certain time and loop

I need to Loop the video from 50 to 60 seconds, then on click should loop normally from 0 to the end.
I have a functionality fully working from 0 to 10 seconds but I need it to work from 50 to 60.
Any API help please, I tried loadedmetadata but didn't work.
Would be nice to understand what I'm missing in here
Like this works, but Not if I put 50 to 60
if (this.currentTime >= 10) {
this.currentTime = 0; // change time index here
}
var video = document.getElementById('videoElm');
const playShort = function() {
if (this.currentTime >= 60) {
this.currentTime = 50; // change time index here
}
};
const playFull = function() {
if (this.currentTime >= 24) {
this.currentTime = 0; // change time index here
}
};
function playShortVideo() {
video.removeEventListener("timeupdate", playFull, false)
video.addEventListener("timeupdate", playShort, false);
video.addEventListener("loadedmetadata", playShort, false);
video.load();
video.play();
}
function playFullVideo() {
video.removeEventListener("timeupdate", playShort, false)
video.addEventListener("timeupdate", playFull, false);
video.load();
video.play();
}
//play short video by default
playShortVideo();
//CLICK events
var btnshort = $('.shortvideo');
var btnfull = $('.fullvideo');
btnshort.click(function() {
playShortVideo();
});
btnfull.click(function() {
playFullVideo();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="videoElm" autoplay muted controls loop>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
</video>
</div>
<button class="shortvideo">play 2 secs only</a><br>
<button class="fullvideo">loop full video</button>

Multiple audio players but only first working

The problem is that when i have 2 or more players on html page i can only play music in the first player and the rest wont work.
my customized HTML5 audio player:
<audio id="music" preload="true">
<source src="music/interlude.mp3">
</audio>
<div id="wrapper">
<div id="audioplayer">
<button id="pButton" class="play"></button>
<div id="timeline">
<div id="playhead"></div>
</div>
</div>
</div>
and js for this:
document.addEventListener("DOMContentLoaded", function(event) {
var music = document.getElementById('music'); // id for audio element
var duration; // Duration of audio clip
var pButton = document.getElementById('pButton'); // play button
var playhead = document.getElementById('playhead'); // playhead
var timeline = document.getElementById('timeline'); // timeline
// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;
// play button event listenter
pButton.addEventListener("click", play);
// timeupdate event listener
music.addEventListener("timeupdate", timeUpdate, false);
// makes timeline clickable
timeline.addEventListener("click", function(event) {
moveplayhead(event);
music.currentTime = duration * clickPercent(event);
}, false);
// returns click as decimal (.77) of the total timelineWidth
function clickPercent(event) {
return (event.clientX - getPosition(timeline)) / timelineWidth;
}
// makes playhead draggable
playhead.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
// Boolean value so that audio position is updated only when the playhead is released
var onplayhead = false;
// mouseDown EventListener
function mouseDown() {
onplayhead = true;
window.addEventListener('mousemove', moveplayhead, true);
music.removeEventListener('timeupdate', timeUpdate, false);
}
// mouseUp EventListener
// getting input from all mouse clicks
function mouseUp(event) {
if (onplayhead == true) {
moveplayhead(event);
window.removeEventListener('mousemove', moveplayhead, true);
// change current time
music.currentTime = duration * clickPercent(event);
music.addEventListener('timeupdate', timeUpdate, false);
}
onplayhead = false;
}
// mousemove EventListener
// Moves playhead as user drags
function moveplayhead(event) {
var newMargLeft = event.clientX - getPosition(timeline);
if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
playhead.style.marginLeft = newMargLeft + "px";
}
if (newMargLeft < 0) {
playhead.style.marginLeft = "0px";
}
if (newMargLeft > timelineWidth) {
playhead.style.marginLeft = timelineWidth + "px";
}
}
// timeUpdate
// Synchronizes playhead position with current point in audio
function timeUpdate() {
var playPercent = timelineWidth * (music.currentTime / duration);
playhead.style.marginLeft = playPercent + "px";
if (music.currentTime == duration) {
pButton.className = "";
pButton.className = "play";
}
}
//Play and Pause
function play() {
// start music
if (music.paused) {
music.play();
// remove play, add pause
pButton.className = "";
pButton.className = "pause";
} else { // pause music
music.pause();
// remove pause, add play
pButton.className = "";
pButton.className = "play";
}
}
// Gets audio file duration
music.addEventListener("canplaythrough", function() {
duration = music.duration;
}, false);
// getPosition
// Returns elements left position relative to top-left of viewport
function getPosition(el) {
return el.getBoundingClientRect().left;
}
/* DOMContentLoaded*/
});
i belive the problem is somewhere in the js code but i cant figure out where.
i took the code form here

I notice that you're using a lot of IDs. When the "first of something" works on a page, usually it's IDs that are causing the issue.
Change all of your IDs for your <audio> players to class attributes. You will also need to update your JavaScript as well, from something like this:
var music = document.getElementById('music');
music.addEventListener(...
To something more like this:
var music = document.querySelectorAll(".music"); // class="music"
for (var i = 0; i < music.length; i++) {
music[i].addEventListener(...
You should find that this will work for you.

Fade out of a Mp3 song using javascript

I'm trying to create a HTML file with some javascript embedded that allows me to press a button and begin to fade out of a song. I've managed to get it working so that it play the song (which is a start). but i've been playing around with a second function to try and get it to reduce the volume and setting a delay on that function can anyone help please ?!
<audio id="myAudio"
<source src="1.mp3"
type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>
<script>
var vol = myAudio.volume;
var timer;
function aud_play() {
var myAudio = document.getElementById("myAudio");
myAudio.play();
}
function aud_fade(){
var myAudio = document.getElementById("myAudio");
if (vol > 0) {
vol = vol - 0.2 ;
}
timer = setTimeout(aud_fade,2);
}
</script>

try this:
function aud_fade() {
var myAudio = document.getElementById("myAudio");
if (myAudio.volume > 0) {
myAudio.volume -= .2;
timer = setTimeout(aud_fade, 200);
}
}

A couple things seem to need addressing ;)
First off, in the example you provided, you have not closed the audio tag.
Second, you are only setting a global vol var and not the volume of the audio object itself.
What you could try is keeping things scoped to the function and use the actual audio object volume rather than a 'global' vol var:
<script>
function aud_play() {
var myAudio = document.getElementById("myAudio");
myAudio.play();
}
function aud_fade(){
var timer,
myAudio = document.getElementById("myAudio");
if (myAudio.volume > 0) {
myAudio.volume -= 0.005;
timer = setTimeout(aud_fade,5);
}
}
</script>
<audio id="myAudio">
<source src="1.mp3" type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>
I have also adjusted the timeout and the volume amount to decrease, as volume is from 0 to 1. Reducing by 0.2 (20 percent) every 2 thousands of a second would 'fade out' in 0.1 of a second!
Here is the above in a Fiddle.
You may want to consider resetting the audio currentTime and volume when the fade completes or when you click play again (Note: There is no stop method, so pause and currentTime can achieve the same thing):
<script>
var fadeTimer = false;
var aud_play = function() {
clearTimeout(fadeTimer);
var myAudio = document.getElementById("myAudio");
myAudio.volume = 1;
myAudio.currentTime = 0;
myAudio.play();
}
var aud_fade = function() {
var myAudio = document.getElementById("myAudio");
if (myAudio.volume > 0.005) {
myAudio.volume -= 0.005;
fadeTimer = setTimeout(aud_fade,5);
} else {
myAudio.volume = 0;
myAudio.pause();
myAudio.currentTime = 0;
}
}
</script>
<audio id="myAudio">
<source src="1.mp3" type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>
Here is the above example in another Fiddle.
Hope this helps!
EDIT:
Regarding Fade In, you could replicate the 'aud_fade' method but increase volume when less than 1 rather than decrease when greater than 0, than call the fade in method on the start method:
var aud_play = function() {
clearTimeout(fadeTimer);
var myAudio = document.getElementById("myAudio");
myAudio.volume = 0; // 0 not 1, so we can fade in
myAudio.currentTime = 0; // set mp3 play positon to the begining
myAudio.play(); // start mp3
aud_fade_in(); // call fade in method
};
var aud_fade_in = function() {
clearTimeout(fadeTimer);
var myAudio = document.getElementById("myAudio");
if (myAudio.volume < 9.995) {
myAudio.volume += 0.005;
fadeTimer = setTimeout(aud_fade_in,10);
} else {
myAudio.volume = 1;
}
};
var aud_fade_out = function() {
clearTimeout(fadeTimer);
var myAudio = document.getElementById("myAudio");
if (myAudio.volume > 0.005) {
myAudio.volume -= 0.005;
fadeTimer = setTimeout(aud_fade_out,5);
} else {
myAudio.volume = 0;
myAudio.pause();
myAudio.currentTime = 0;
}
};
Here is the above in a Fiddle.

Auto Full Screen Toggle When Video Plays HTML5

I am having video clip which is due to play in Timer when Timer gets tick after few minutes.
What I want is whenever the video starts playing it should automatically go into FullScreen mode and when it stops it, however comes back to position because as soon as Video stops I have Timer Ticked.
I know this requestFullScreen() method but I don't know how to call it when video starts playing?
Any Help will be appreciated!!
Regards and Thanks!

var video = document.createElement('video');
video.src = 'urlToVideo.ogg';
video.style.width = window.innerWidth;
video.style.height = window.innerHeight;
video.autoPlay = true;
document.getElementById('video2').appendChild(video);

Are you looking for something like this?
video = document.getElementById('video');
function onTick(){
video.play();
}
video.onPlay = function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
};
video.onended = function(e) {
if(video.exitFullscreen) {
video.exitFullscreen();
} else if(video.mozCancelFullScreen) {
video.mozCancelFullScreen();
} else if(video.webkitExitFullscreen) {
video.webkitExitFullscreen();
}
};

Do something like this :
<script>
window.onload = function(){
var el = document.getElementById("OnTick");
el.addEventListener("click", function(){
el.style.display = 'none';
var videoContener = document.getElementById('video2');
var video = document.createElement('video');
videoContener.style.width = window.innerWidth;
videoContener.style.height = window.innerHeight;
video.src = 'http://techslides.com/demos/sample-videos/small.ogv';
video.style.width = "100%";
video.autoPlay = true;
video.controls = true;
videoContener.appendChild(video);
}, false);
}
</script>
<body style='margin:0px'>
<div id='video2' style='overflow: hidden;'></div>
<span id='OnTick' style='width:20px;height:20px;background-color:#323232;display:block'> </span>
</body>
autoplay doesn't work

HTML5 Video Player functionality and issues

I'm currently creating an HTML5 video player and there are some issues I'm having with it. My first issue is that the end time for my video isn't displaying correctly. I've created the javascript to display the current and duration time my video is play and it doesn't display that correctly.
Second, the volumeslider function doesn't work in Mozilla Firefox, however it works in Internet Explorer and Chrome.
Third, in my if/else statement, I stated if vid.muted and volumeslider == 0, set vid.volume = volumeslider.value / 100 else set vid.volume = volumeslider.value / 100 and nothing worked so I got rid of that code.
Just below is all of the code I have for my video player
<!doctype html>
<html>
<meta charset="utf-8">
<head>
<style type="text/css">
div#video_player_box { width: 550px;
background: #000;
margin: 0px auto; }
div#videos_controls_bar{ background: #333;
padding: 10px;
color: #CCC}
input#seekslider{width: 170px;}
input#volumeslider{width: 80px;}
</style>
<script>
var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider;
function initializePlayer () {
//set object references
vid = document.getElementById("my_video");
playbtn = document.getElementById("playpausebtn");
seekslider = document.getElementById("seekslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
mutebtn = document.getElementById("mutebtn");
volumeslider = document.getElementById("volumeslider");
//Add event listeners
playbtn.addEventListener("click", playPause, false);
seekslider.addEventListener("change", vidSeek, false);
vid.addEventListener("timeupdate", seektimeupdate, false);
mutebtn.addEventListener("click", vidmute, false);
volumeslider.addEventListener("change", setvolume, false);
}
window.onload = initializePlayer;
function playPause() {
if (vid.paused) {
vid.play();
playbtn.innerHTML = "Pause";
} else {
vid.pause();
playbtn.innerHTML = "Play";
}
}
function vidSeek () {
var seekto = vid.duration * (seekslider.value / 100);
vid.currentTime = seekto;
}
function seektimeupdate () {
var nt = vid.currentTime * (100 / vid.duration);
seekslider.value = nt;
var curmins = Math.floor(vid.currentTime / 60);
var cursecs = Math.floor(vid.currentTime - curmins * 60);
var durmins = Math.floor(vid.duration / 60);
var dursecs = Math.floor(vid.duration - durmins * 60);
if(cursecs < 10) { cursecs = "0"+cursecs; }
if(dursecs < 10) { dursecs = "0"+dursecs; }
if(curmins < 10) { curmins = "0"+curmins; }
if(durmins < 10) { durmins = "0"+dursecs; }
curtimetext.innerHTML = curmins+":"+cursecs;
durtimetext.innerHTML = durmins+":"+dursecs;
}
function vidmute () {
if (vid.muted) {
vid.muted = false;
mutebtn.innerHTML = "Mute";
} else {
vid.muted = true;
mutebtn.innerHTML = "Unmute";
}
}
function setvolume () {
vid.volume = volumeslider.value / 100;
}
</script>
<title>HTML5 Video Player</title>
</head>
<body>
<div id = "video_player_box">
<video id="my_video" width="550" height="320" autoplay>
<source src="videos/Tom_and_Jerry.mp4">
</video>
<div id="videos_controls_bar">
<button id="playpausebtn">Pause</button>
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<span id ="curtimetext"></span> / <span id ="durtimetext"></span>
<button id="mutebtn">Mute</button>
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
</div>
</div>
</body>
</html>
I'm having trouble attaching the zip file onto here so if anyone needs my email address, it's ghaynes109#gmail.com