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
Related
I have this inside index.html
<body>
<script>
window.onload=function() {
let videoDiv = createVideoDiv()
document.getElementById("contentVideo").appendChild(videoDiv);
document.addEventListener("keydown", function(inEvent){
controlVideo(inEvent.keyCode);
});
}
</script>
<div id="progressBarWrapper">
<div id="progressBar"></div>
</div>
<div id="contentVideo"></div>
</body>
and this css
#progressBarWrapper {
width: 100%;
height:15px;
background-color: black;
}
#progressBar {
width: 0%;
height: 15px;
background-color: green;
}
this is how the video div is created:
function createVideoDiv() {
var video = document.createElement("VIDEO");
video.setAttribute('controls', '');
//video.setAttribute('autoplay', '');
video.setAttribute('preload', 'auto');
video.setAttribute('width', larguraVideo);
video.setAttribute('id', 'video');
var source = document.createElement("SOURCE");
source.setAttribute('src', obterVideoClicado());
source.setAttribute('type', 'video/mp4');
video.addEventListener('progress', function() {
var range = 0;
var bf = this.buffered;
var time = this.currentTime;
while(!(bf.start(range) <= time && time <= bf.end(range))) {
range += 1;
}
var loadStartPercentage = bf.start(range) / this.duration;
var loadEndPercentage = bf.end(range) / this.duration;
var loadPercentage = loadEndPercentage - loadStartPercentage;
setTimeout(ajustarProgressBar, 40, loadPercentage * 100);
});
video.addEventListener('loadeddata', function() {
var myBar = document.getElementById("progressBarWrapper");
myBar.style = "display:none;";
video.play();
});
video.appendChild(source);
return video;
}
this is how the progress bar is adjusted
function ajustarProgressBar(valor) {
var progressBar = document.getElementById("progressBar");
progressBar.style.width = valor + "%";
}
Even the progress bar is being fired by
setTimeout(ajustarProgressBar, 40, loadPercentage * 100);
the progress bar is not updating and stays 0% all the time.
The progress bar is to be adjusted by the video download progress.
The video progress is working fine. I have printed that to console and the values are changing as the video download progresses.
You have to pass param to function:
var valor = loadPercentage * 100;
var delay = 100;
setTimeout(() => ajustarProgressBar(valor), delay);
--Edit
Your video progress event listener would now look like:
video.addEventListener('progress', function() {
var range = 0;
var bf = this.buffered;
var time = this.currentTime;
while(!(bf.start(range) <= time && time <= bf.end(range))) {
range += 1;
}
var loadStartPercentage = bf.start(range) / this.duration;
var loadEndPercentage = bf.end(range) / this.duration;
var loadPercentage = loadEndPercentage - loadStartPercentage;
var valor = loadPercentage * 100;
var delay = 100;
setTimeout(() => ajustarProgressBar(valor), delay);
});
The setTimeout function takes 2 parameters:
The function to call after the delay time
The delay time in milliseconds
So to call your function you must make a function that will call your function like this:
setTimeout(() => ajustarProgresBar(loadPercentage * 100), 40);
So in your code it might look like this:
var loadStartPercentage = bf.start(range) / this.duration;
var loadEndPercentage = bf.end(range) / this.duration;
var loadPercentage = loadEndPercentage - loadStartPercentage;
setTimeout(() => ajustarProgressBar(loadPercentage*100), 40);
I'm currently using an input range slider to control the position of an audio track. In firefox it's working perfectly, however in Chrome The slider is stuck and doesn't move when dragged. I also have a function which updates it's position by 1 each time the currentTime of the audio changes and this may be the problem? However like I said it works perfectly on Firefox.
Any help would be greatly appreciated.
HTML:
<audio id="music">
<source src="media/mexico-music.mp3" type="audio/mpeg"/>
</audio>
<button id="playpausebtn" class="play"></button>
<span id="curtimetext">00:00</span>
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<span id="durtimetext">00:00</span>
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
JavaScript:
$(document).ready(function () {
var music = document.getElementById("music"),
playpausebtn = document.getElementById("playpausebtn"),
seekslider = document.getElementById("seekslider"),
volumeslider = document.getElementById("volumeslider"),
curtimetext = document.getElementById("curtimetext"),
durtimetext = document.getElementById("durtimetext"),
seeking,
seekto,
curtimetext,
durtimetext;
// Reset slider back to 0
seekslider.value = 0;
// PLAY/PAUSE AUDIO
function playAudio() {
if (music.paused) {
music.play();
playpausebtn.className = "pause";
} else {
music.pause();
playpausebtn.className = "play";
}
music.addEventListener('ended', function () {
playpausebtn.className = "Play";
});
}
// SEEK MUSIC POSITION
function seek(event) {
if (seeking) {
seekto = music.duration * (seekslider.value / 100);
music.currentTime = seekto;
}
}
// VOLUME CONTROL
function setVolume() {
music.volume = volumeslider.value / 100;
}
// UPDATE MUSIC TIME
function seektimeupdate() {
var newtime = music.currentTime * (100 / music.duration);
seekslider.value = newtime;
var curmins = Math.floor(music.currentTime / 60),
cursecs = Math.floor(music.currentTime - curmins * 60),
durmins = Math.floor(music.duration / 60),
dursecs = Math.floor(music.duration - durmins * 60);
// Adds 0 infront of single digit numbers
if (cursecs < 10) { cursecs = "0" + cursecs; }
if (dursecs < 10) { dursecs = "0" + dursecs; }
if (curmins < 10) { curmins = "0" + curmins; }
if (durmins < 10) { durmins = "0" + durmins; }
curtimetext.innerHTML = curmins + ":" + cursecs;
durtimetext.innerHTML = durmins + ":" + dursecs;
}
//EVENT HANDLERS
playpausebtn.addEventListener("click", playAudio);
seekslider.addEventListener("mousedown", function (event) { seeking = true; seek(event); });
seekslider.addEventListener("mousemove", function (event) { seek(event); });
seekslider.addEventListener("mouseup", function () { seeking = false; });
volumeslider.addEventListener("mousemove", setVolume);
music.addEventListener("timeupdate", seektimeupdate);
});
You are redeclaring curtimetext,durtimetext, also you don't need to use combination of mouseup, mousedown event, you could just use change event.
Working example.
$(document).ready(function () {
var music = document.getElementById("music"),
playpausebtn = document.getElementById("playpausebtn"),
seekslider = document.getElementById("seekslider"),
volumeslider = document.getElementById("volumeslider"),
curtimetext = document.getElementById("curtimetext"),
durtimetext = document.getElementById("durtimetext"),
seeking,
seekto;
// Reset slider back to 0
seekslider.value = 0;
// PLAY/PAUSE AUDIO
function playAudio() {
if (music.paused) {
music.play();
playpausebtn.className = "pause";
} else {
music.pause();
playpausebtn.className = "play";
}
music.addEventListener('ended', function () {
playpausebtn.className = "Play";
});
}
// SEEK MUSIC POSITION
function seek(event) {
seekto = music.duration * (this.value / 100);
music.currentTime = seekto;
}
// VOLUME CONTROL
function setVolume() {
music.volume = volumeslider.value / 100;
}
// UPDATE MUSIC TIME
function seektimeupdate() {
var newtime = music.currentTime * (100 / music.duration);
seekslider.value = newtime;
var curmins = Math.floor(music.currentTime / 60),
cursecs = Math.floor(music.currentTime - curmins * 60),
durmins = Math.floor(music.duration / 60),
dursecs = Math.floor(music.duration - durmins * 60);
// Adds 0 infront of single digit numbers
if (cursecs < 10) { cursecs = "0" + cursecs; }
if (dursecs < 10) { dursecs = "0" + dursecs; }
if (curmins < 10) { curmins = "0" + curmins; }
if (durmins < 10) { durmins = "0" + durmins; }
curtimetext.innerHTML = curmins + ":" + cursecs;
durtimetext.innerHTML = durmins + ":" + dursecs;
}
//EVENT HANDLERS
playpausebtn.addEventListener("click", playAudio);
seekslider.addEventListener("change", seek);
volumeslider.addEventListener("mousemove", setVolume);
music.addEventListener("timeupdate", seektimeupdate);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<audio id="music">
<source src="//mdn.mozillademos.org/files/2587/AudioTest%20(1).ogg" type="audio/mpeg"/>
</audio>
<button id="playpausebtn" class="play">
play
</button>
<span id="curtimetext">00:00</span>
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<span id="durtimetext">00:00</span>
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
Learn more about change event from mdn https://developer.mozilla.org/en-US/docs/Web/Events/change
After some help from #azs06 I managed to get this working on both Firefox and Chrome.
I removed all seekslider .addEventListener lines and only added one which has a 'change' event rather than mousedown/up etc.
The line I added is:
seekslider.addEventListener("change", function (event) { seeking = true; seek(event); });
I will update the question with the finalized code.
My code is fairly simple. The .addEventListener isn't working for 'click' or 'change.' I had to put "onclick" inside my HTML but, as far as I know, there's no 'onChange' event in HTML. I'm trying to make a custom video player but the seek slider isn't working out. I was wondering how I could make .addEventListener work? (p.s., it hadn't worked before this question either)
HTML:
<div id="video_player_box">
<video id="my_video" controls autoplay>
<source src="/videos/video.mp4">
</video>
<div id="video_control_bar">
<button id="playpausebutton" onclick="playPause()">Pause</button>
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
</div>
</div>
and JS:
var vid, playBtn, seekslider;
function initPlayer() {
vid = document.getElementById("my_video");
playBtn = window.getElementById("playpausebutton");
seekslider = window.getElementById("seekslider");
seekslider.addEventListener("change", vidSeek, false);
}
window.onload = initPlayer;
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;
}
fix your js code with this code:
var vid, playBtn, seekslider;
function initPlayer() {
vid = document.getElementById("my_video");
playBtn = document.getElementById("playpausebutton");
seekslider = document.getElementById("seekslider");
seekslider.addEventListener("change", vidSeek, false);
}
window.onload = initPlayer;
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;
}
I am trying to make an audio player for my website that plays album playlist(m3u) and Individual mp3's on click. They're are going to be several playlist and mp3's so I need the song to auto go to the next song. And I need option to go to NEXT or PREVIOUS song
I do believe that I have started writing the code for the playLast and playNext but I dont know how to script the function in order for me to assign it a button
<script>
var player;
var intv;
var slider;
//Init
//
////////////////////////////
window.onload = function()
{
document.getElementById('btnlast').addEventListener('click',playLast, false);
document.getElementById('btnPlay').addEventListener('click', playMusic, false);
document.getElementById('btnPause').addEventListener('click', pauseMusic, false);
document.getElementById('btnStop').addEventListener('click', stopMusic, false);
document.getElementById('btnVolUp').addEventListener('click', volUp, false);
document.getElementById('btnVolDown').addEventListener('click', volDown, false);
player = document.getElementById('player');
slider = document.getElementById('sliderTime');
slider.addEventListener('change', reposition, false);
}
function reposition()
{
player.currentTime = slider.value;
}
//Volume Controls
//
// 0.0 Silent - 1.0 Full Volume
/////////////////////////////
function volUp()
{
if(player.volume < 1)
{
player.volume += 0.1;
console.log(player.volume);
} else
{
player.volume = 1;
}
}
function volDown()
{
if(player.volume > 0)
{
player.volume -= 0.1;
console.log(player.volume);
} else
{
player.volume = 0;
}
}
//Music Play Controls
//
///////////////////////////
function playMusic()
{
player.play();
intv = setInterval(update, 100);
slider.max = player.duration;
}
function update()
{
document.getElementById('songTime').innerHTML = millisToMins(player.currentTime);
slider.value = player.currentTime;
}
function millisToMins(seconds)
{
var numminutes = Math.floor((((seconds % 31536000) % 86400) % 3600) / 60);
var numseconds = (((seconds % 31536000) % 86400) % 3600) % 60;
if (numseconds >= 10)
{
return "Time Elapsed: " + numminutes + ":" + Math.round(numseconds);
} else
{
return "Time Elapsed: " + numminutes + ":0" + Math.round(numseconds);
}
}
function pauseMusic()
{
player.pause();
clearInterval(intv);
}
function stopMusic()
{
player.pause();
player.currentTime = 0;
clearInterval(intv);
}
I'm having a bit of trouble I am making my own controls for a html5 video player. I have got everything working correctly but I would like for my slider to have a specified colour left of the thumb and a different colour right of the thumb. i Have seen another example on here that almost does it with jquery but I can only get it working onclick and not progessing automatically with the video. I am new to javascript and could really do with the help getting this to work.
<script>
var
vid,
playbtn,
mutebtn,
fullscreenbtn,
seekslider,
volumeslider,
curtimetext,
durtimetext;
function intializePlayer(){
//Set object references
vid = document.getElementById("my_player");
playbtn = document.getElementById("playpausebtn");
mutebtn = document.getElementById("mutebtn");
fullscreenbtn = document.getElementById("fullscreenbtn");
seekslider = document.getElementById("seekslider");
volumeslider = document.getElementById("volumeslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
//Add event listeners
playbtn.addEventListener("click",playPause,false);
mutebtn.addEventListener("click",vidmute,false);
fullscreenbtn.addEventListener("click",toggleFullScreen,false);
seekslider.addEventListener("change",vidSeek,false);
volumeslider.addEventListener("change",setvolume,false);
vid.addEventListener("timeupdate",seektimeupdate,false);
}
window.onload = intializePlayer;
function playPause(){
if(vid.paused){
vid.play();
playbtn.style.background = "url(images/pause.png)";
} else {
vid.pause();
playbtn.style.background = "url(images/play.png)";
}
}
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"+durmins; }
curtimetext.innerHTML = curmins+":"+cursecs;
durtimetext.innerHTML = durmins+":"+dursecs;
}
function vidmute(){
if(vid.muted){
vid.muted = false;
mutebtn.style.background = "url(images/volume.png)";
volumeslider.value = 100;
} else {
vid.muted = true;
mutebtn.style.background = "url(images/mute.png)";
volumeslider.value = 0;
}
}
function setvolume(){
vid.volume = volumeslider.value / 100;
}
function toggleFullScreen(){
if(vid.requestFullScreen){
vid.requestFullScreen();
} else if(vid.webkitRequestFullScreen){
vid.webkitRequestFullScreen();
} else if(vid.mozRequestFullScreen){
vid.mozRequestFullScreen();
}
}
</script>
I think what you're trying to do is update the "seektimeupdate" function every second. To do this you can use a thing called "setInterval". The code would look something like this.
var updateBar = setInterval(function(){
//You put the code you want to perform here
seektimeupdate();
},1000)
What the "1000" means is the delay, in milliseconds, between each time the code is fired. You can think of "setInterval" as a for loop that performs its code at a set rate, specified by the number at the end.
Sorry if I misunderstood your question and if you want more help on the "setInterval" function then see W3 school's documentation on it here
EDIT:
This Code works, assuming you can get the duration of the movie in seconds and the current time of the movie in seconds. The only problem you might encounter is changing the slider, depending on how the user moves the thumb or if they pause the movie. I would suggest using variables to buffer the function.
(NOTE): Just replace the jQuery in the jsFiddle link you gave me in the comments with this.
var movie = {
//duration of movie, in seconds
duration:1000,
//current time in movie, in seconds
currentTime:0
}
var update = setInterval(function(){
movie.currentTime += 1;
var val = movie.currentTime/movie.duration;
$("#range").css('background-image',
'-webkit-gradient(linear, left top, right top, '
+ 'color-stop(' + val + ', #94A14E), '
+ 'color-stop(' + val + ', #C5C5C5)'
+ ')'
);
},1000);