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.
Related
I have a moving image that moves across the screen from left to right. I need to replace it in the middle of the screen with another image for 5 seconds and then replace it back again resume the movement. could anyone please help me with that ?
Here's the code I have so far. I'm new to this , any help would be very much appreciated ! Thanks in advance !
const catImg = document.querySelector('img');
let marginLeft = (catImg.style.left = 0);
let marginRight = catImg.style.right;
const body = document.querySelector('body');
body.style.position = 'relative';
function catWalk() {
let halfWidth = window.innerWidth / 2 - catImg.width / 2;
marginLeft = '0px';
if (
parseInt(window.getComputedStyle(catImg).left) <
Math.floor(window.innerWidth / 2 - catImg.width / 2)
) {
marginLeft = parseInt(window.getComputedStyle(catImg).left) + 10 + 'px';
catImg.style.left = marginLeft;
return;
} else if (parseInt(window.getComputedStyle(catImg).left) == Math.round(halfWidth / 10) * 10) {
catImg.src = 'https://tenor.com/StFI.gif';
function dancingCat(timePassed) {
let startTime, endTime;
function start() {
startTime = performance.now();
return startTime;
}
function end() {
endTime = performance.now();
timePassed = endTime - startTime;
console.log(timePassed);
return endTime;
}
if (timePassed == 5000) {
catImg.src = 'http://www.anniemation.com/clip_art/images/cat-walk.gif';
}
}
} else if (
parseFloat(window.getComputedStyle(catImg).left) >
window.innerWidth - catImg.width / 2
) {
console.log('stop here');
catImg.style.left = '0px';
return;
}
return;
}
setInterval(catWalk, 50);
catWalk();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cat Walk</title>
</head>
<body>
<img style="position: absolute;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif" />
<script src="ex5-catWalk.js"></script>
</body>
</html>
Based on your code I made a refactor separating each sentence between functions. BTW, try to avoid declare functions within functions. I'm giving you just an example of how can you make it. I'm sure it could be better turning each function as pure, but it works fine.
Edition
Adding some lines to start function you can achieve a loop cycle when the cat overflows the right side window.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cat Walk</title>
</head>
<body>
<img width="200" src="http://www.anniemation.com/clip_art/images/cat-walk.gif" />
<script type="text/javascript">
let interval, leftPos = 0, stopped = 0;
const img = document.querySelector('img');
const windowHalf = window.innerWidth / 2;
const middlePos = windowHalf - img.width / 2;
function step(img, size) {
leftPos += size;
return img.style.marginLeft = leftPos + 'px';
}
function start() {
interval = setInterval(() => {
if (leftPos < window.innerWidth) {
if (leftPos < middlePos || stopped) {
return step(img, 5);
} else {
clearInterval(interval);
return stop();
}
} else {
// restart variables when cat overflows window area
leftPos = 0;
stopped = 0;
}
}, 50)
}
function stop() {
img.src = 'https://tenor.com/StFI.gif';
stopped++
setTimeout(() => {
img.src = 'http://www.anniemation.com/clip_art/images/cat-walk.gif';
start()
}, 5000)
}
start();
</script>
</body>
</html>
I am using a JS radio player on a website. Anytime someone goes to a new page or refreshes the current page the volume slider resets to 25%. Also, Every time someone goes to a new page the radio player restarts itself causing a break in the music. What would be the best way to fix these issues so that it remembers the users volume and the music doesn't break upon switching pages? I currently have the initial volume set to 25% on load up because it is extremely loud for some reason.
--EDIT--
My question about volume has been answered, now I just need a solution for keeping the player from restarting while switching pages.
Radio Player JS:
'use strict';
var audioPlayer = document.querySelector('.ggr-radio-player');
var playPause = audioPlayer.querySelector('#playPause');
var playpauseBtn = audioPlayer.querySelector('.play-pause-btn');
var loading = audioPlayer.querySelector('.loading');
var progress = audioPlayer.querySelector('.ggr-progress');
var sliders = audioPlayer.querySelectorAll('.ggr-slider');
var volumeBtn = audioPlayer.querySelector('.ggr-volume-btn');
var volumeControls = audioPlayer.querySelector('.ggr-volume-controls');
var volumeProgress = volumeControls.querySelector('.ggr-slider .ggr-progress');
var player = audioPlayer.querySelector('audio');
var currentTime = audioPlayer.querySelector('.current-time');
var totalTime = audioPlayer.querySelector('.total-time');
var speaker = audioPlayer.querySelector('#speaker');
var draggableClasses = ['pin'];
var currentlyDragged = null;
player.volume = 0.25;
window.addEventListener('mousedown', function (event) {
if (!isDraggable(event.target)) return false;
currentlyDragged = event.target;
var handleMethod = currentlyDragged.dataset.method;
this.addEventListener('mousemove', window[handleMethod], false);
window.addEventListener('mouseup', function () {
currentlyDragged = false;
window.removeEventListener('mousemove', window[handleMethod], false);
}, false);
});
playpauseBtn.addEventListener('click', togglePlay);
player.addEventListener('timeupdate', updateProgress);
player.addEventListener('volumechange', updateVolume);
player.addEventListener('loadedmetadata', function () {
totalTime.textContent = formatTime(player.duration);
});
player.addEventListener('canplay', makePlay);
player.addEventListener('ended', function () {
playPause.attributes.d.value = "M18 12L0 24V0";
player.currentTime = 0;
});
volumeBtn.addEventListener('click', function () {
volumeBtn.classList.toggle('open');
volumeControls.classList.toggle('hidden');
});
window.addEventListener('resize', directionAware);
sliders.forEach(function (slider) {
var pin = slider.querySelector('.pin');
slider.addEventListener('click', window[pin.dataset.method]);
});
directionAware();
function isDraggable(el) {
var canDrag = false;
var classes = Array.from(el.classList);
draggableClasses.forEach(function (draggable) {
if (classes.indexOf(draggable) !== -1) canDrag = true;
});
return canDrag;
}
function inRange(event) {
var rangeBox = getRangeBox(event);
var rect = rangeBox.getBoundingClientRect();
var direction = rangeBox.dataset.direction;
if (direction == 'horizontal') {
var min = rangeBox.offsetLeft;
var max = min + rangeBox.offsetWidth;
if (event.clientX < min || event.clientX > max) return false;
}
else {
var min = rect.top;
var max = min + rangeBox.offsetHeight;
if (event.clientY < min || event.clientY > max) return false;
}
return true;
}
function updateProgress() {
var current = player.currentTime;
var percent = current / player.duration * 100;
progress.style.width = percent + '%';
currentTime.textContent = formatTime(current);
}
function updateVolume() {
volumeProgress.style.height = player.volume * 100 + '%';
if (player.volume >= 0.5) {
speaker.attributes.d.value = 'M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z';
}
else if (player.volume < 0.5 && player.volume > 0.05) {
speaker.attributes.d.value = 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667M17.333 11.373C17.333 9.013 16 6.987 14 6v10.707c2-.947 3.333-2.987 3.333-5.334z';
}
else if (player.volume <= 0.05) {
speaker.attributes.d.value = 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667';
}
}
function getRangeBox(event) {
var rangeBox = event.target;
var el = currentlyDragged;
if (event.type == 'click' && isDraggable(event.target)) {
rangeBox = event.target.parentElement.parentElement;
}
if (event.type == 'mousemove') {
rangeBox = el.parentElement.parentElement;
}
return rangeBox;
}
function getCoefficient(event) {
var slider = getRangeBox(event);
var rect = slider.getBoundingClientRect();
var K = 0;
if (slider.dataset.direction == 'horizontal') {
var offsetX = event.clientX - slider.offsetLeft;
var width = slider.clientWidth;
K = offsetX / width;
}
else if (slider.dataset.direction == 'vertical') {
var height = slider.clientHeight;
var offsetY = event.clientY - rect.top;
K = 1 - offsetY / height;
}
return K;
}
function changeVolume(event) {
if (inRange(event)) {
player.volume = getCoefficient(event);
}
}
function formatTime(time) {
var min = Math.floor(time / 60);
var sec = Math.floor(time % 60);
return min + ':' + (sec < 10 ? '0' + sec : sec);
}
function togglePlay() {
if (player.paused) {
playPause.attributes.d.value = "M0 0h6v24H0zM12 0h6v24h-6z";
player.play();
}
else {
playPause.attributes.d.value = "M18 12L0 24V0";
player.pause();
}
}
function makePlay() {
playpauseBtn.style.display = 'block';
loading.style.display = 'none';
}
function directionAware() {
if (window.innerHeight < 250) {
volumeControls.style.bottom = '-54px';
volumeControls.style.left = '54px';
}
else if (audioPlayer.offsetTop < 154) {
volumeControls.style.bottom = '-164px';
volumeControls.style.left = '-3px';
}
else {
volumeControls.style.bottom = '52px';
volumeControls.style.left = '-3px';
}
}
Radio Player HTML:
<div class="ggr-radio">
<div class="ggr-now-playing">
<marquee behavior="scroll" direction="left" scrollamount="2">
<span id="cc_strinfo_trackartist_gamersguildradio" class="cc_streaminfo"></span> - <span id="cc_strinfo_tracktitle_gamersguildradio" class="cc_streaminfo"></span>
</marquee>
</div>
<div class="audio ggr-radio-player">
<div class="loading">
<div class="spinner"></div>
</div>
<div class="play-pause-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24">
<path fill="#566574" fill-rule="evenodd" d="M0 0h6v24H0zM12 0h6v24h-6z" class="play-pause-icon" id="playPause" />
</svg>
</div>
<div class="controls">
<span class="current-time">0:00</span>
</div>
<div class="ggr-volume">
<div class="ggr-volume-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#566574" fill-rule="evenodd" d="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z" id="speaker"/>
</svg>
</div>
<div class="ggr-volume-controls hidden">
<div class="ggr-slider" data-direction="vertical">
<div class="ggr-progress">
<div class="pin" id="ggr-volume-pin" data-method="changeVolume">
</div>
</div>
</div>
</div>
</div>
<audio crossorigin autoplay id="radio">
<source src="http://192.95.18.39:5272/stream" type="audio/mp3">
</audio>
</div>
</div>
When the page is loading you setting the slider value everytime: player.volume = 0.25;
When the user changes the slider value or leave the current page, store the value it in a cookie.
When the page is refreshed, load the stored values from your cookie to the player.
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);
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