Why clock time is not being shown?

Why clock time is not being shown? - javascript

I am trying to make a simple task manager. I added a clock at the top of the page and after a few check list I added few codes that will show me how much time of the day is left. I got that from my question: How can I code a clock to show me that how much time is left of the day?
I took the second answer and it was working separately as I wanted. But after I inserted that code to my main code the time is not being shown. It's just blank.
Here's my code:
<html lang="en">
<head>
<title>Task Achievement</title>
<link href="https://fonts.googleapis.com/css2?family=Concert+One&display=swap" rel="stylesheet">
<script>
function myFunction(item) {
if (item.checked) {
item.parentNode.style.backgroundColor = "#8db600";
} else {
item.parentNode.style.backgroundColor = "transparent";
}
}
</script>
<style>
table { border:solid 1px #8db600; }
body {
background-color: #7ef9ff;
}
#import url('');
#clock {
margin: auto;
width: 300px;
height: 50px ;
background-color: black;
font-family: "Concert One";
color: #7ef9ff;
font-size: 48px;
text-align: center;
padding: 5px 5px 5px 5px;
}
#task {
width: 300px;
margin: auto;
color: #7ef9ff;
background-color: black;
font-family: "Concert One";
}
#tab {
font-family: "Concert One";
}
</style>
</head>
<body>
<div id="clock"></div>
<script>function currentTime() {
var date = new Date(); /* creating object of Date class */
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
if (hour > 12){
hour = hour - 12;
}
else{
hour = hour;
}
hour = updateTime(hour);
min = updateTime(min);
sec = updateTime(sec);
document.getElementById("clock").innerText = hour + " : " + min + " : " + sec; /* adding time to the div */
var t = setTimeout(function(){ currentTime() }, 1000); /* setting timer */
}
function updateTime(k) {
if (k < 10) {
return "0" + k;
}
else {
return k;
}
}
currentTime(); /* calling currentTime() function to initiate the process */</script>
<div id="task">
<h4 align = 'center'>Today's Accomplishments</h4>
</div>
<div id="tab">
<table align="center" #8db600" CELLSPACING=0>
<tr>
<td id="box">
Vocab<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
<td id="box">
SAT-Math<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
<td class="box">
SAT-Reading<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
<td class="box">
SAT-Writing<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
<td class="box">
Chemistry<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
<td class="box">
Math<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
</tr>
</table>
</div>
<div id="clock"></div>
<script>function currentTime() {
var toDate=new Date();
var tomorrow=new Date();
tomorrow.setHours(24,0,0,0);
var diffMS=tomorrow.getTime()/1000-toDate.getTime()/1000;
var diffHr=Math.floor(diffMS/3600);
diffMS=diffMS-diffHr*3600;
var diffMi=Math.floor(diffMS/60);
diffMS=diffMS-diffMi*60;
var diffS=Math.floor(diffMS);
var result=((diffHr<10)?"0"+diffHr:diffHr);
result+=" : "+((diffMi<10)?"0"+diffMi:diffMi);
result+=" : "+((diffS<10)?"0"+diffS:diffS);
document.getElementById("clock").innerText = result; /* adding time to the div */
var t = setTimeout(function(){ currentTime() }, 1000); /* setting timer */
}
function updateTime(k) {
if (k < 10) {
return "0" + k;
}
else {
return k;
}
}
currentTime(); /* calling currentTime() function to initiate the process */
</body>```

I think I understand. You want 2 clocks, the first one showing NOW time and the second one showing time left in the day, am I right?.
In that case, the two div can not have the same ID and the function can not have the same name.
<html lang="en">
<head>
<title>Task Achievement</title>
<link href="https://fonts.googleapis.com/css2?family=Concert+One&display=swap" rel="stylesheet">
<script>
function myFunction(item) {
if (item.checked) {
item.parentNode.style.backgroundColor = "#8db600";
} else {
item.parentNode.style.backgroundColor = "transparent";
}
}
</script>
<style>
table {
border: solid 1px #8db600;
}
body {
background-color: #7ef9ff;
}
#import url('');
#clock,
#clock-left {
margin: auto;
width: 300px;
height: 50px;
background-color: black;
font-family: "Concert One";
color: #7ef9ff;
font-size: 48px;
text-align: center;
padding: 5px 5px 5px 5px;
}
#task {
width: 300px;
margin: auto;
color: #7ef9ff;
background-color: black;
font-family: "Concert One";
}
#tab {
font-family: "Concert One";
}
</style>
</head>
<body>
<div id="clock"></div>
<script>
function currentTime() {
var date = new Date(); /* creating object of Date class */
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
if (hour > 12) {
hour = hour - 12;
} else {
hour = hour;
}
hour = updateTime(hour);
min = updateTime(min);
sec = updateTime(sec);
document.getElementById("clock").innerText = hour + " : " + min + " : " + sec; /* adding time to the div */
var t = setTimeout(function() {
currentTime()
}, 1000); /* setting timer */
}
function updateTime(k) {
if (k < 10) {
return "0" + k;
} else {
return k;
}
}
currentTime(); /* calling currentTime() function to initiate the process */
</script>
<div id="task">
<h4 align='center'>Today's Accomplishments</h4>
</div>
<div id="tab">
<table align="center" #8db600 CELLSPACING=0>
<tr>
<td id="box">
Vocab<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
<td id="box">
SAT-Math<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
<td class="box">
SAT-Reading<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
<td class="box">
SAT-Writing<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
<td class="box">
Chemistry<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
<td class="box">
Math<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
</tr>
</table>
</div>
<div id="clock-left"></div>
<script>
function timeLeft() {
var toDate = new Date();
var tomorrow = new Date();
tomorrow.setHours(24, 0, 0, 0);
var diffMS = tomorrow.getTime() / 1000 - toDate.getTime() / 1000;
var diffHr = Math.floor(diffMS / 3600);
diffMS = diffMS - diffHr * 3600;
var diffMi = Math.floor(diffMS / 60);
diffMS = diffMS - diffMi * 60;
var diffS = Math.floor(diffMS);
var result = ((diffHr < 10) ? "0" + diffHr : diffHr);
result += " : " + ((diffMi < 10) ? "0" + diffMi : diffMi);
result += " : " + ((diffS < 10) ? "0" + diffS : diffS);
document.getElementById("clock-left").innerText = result; /* adding time to the div */
var t = setTimeout(function() {
timeLeft()
}, 1000); /* setting timer */
}
function updateTime(k) {
if (k < 10) {
return "0" + k;
} else {
return k;
}
}
timeLeft(); /* calling currentTime() function to initiate the process */
</script>
</body>

Your table is not being rendered properly because you are declaring it like this: <table align="center" #8db600" CELLSPACING=0>.
Is "#8db600"" supposed to be an attribute or an attribute value? Either way, you didn't finish either declaration, so it becomes a syntax error. Remove the stray "#8db600"".
Additionally, remove that duplicate declaration of the currentTime() function which is superfluous.
<html lang="en">
<head>
<title>Task Achievement</title>
<link href="https://fonts.googleapis.com/css2?family=Concert+One&display=swap" rel="stylesheet">
<script>
function myFunction(item) {
if (item.checked) {
item.parentNode.style.backgroundColor = "#8db600";
} else {
item.parentNode.style.backgroundColor = "transparent";
}
}
</script>
<style>
table {
border: solid 1px #8db600;
}
body {
background-color: #7ef9ff;
}
#import url('');
#clock {
margin: auto;
width: 300px;
height: 50px;
background-color: black;
font-family: "Concert One";
color: #7ef9ff;
font-size: 48px;
text-align: center;
padding: 5px 5px 5px 5px;
}
#task {
width: 300px;
margin: auto;
color: #7ef9ff;
background-color: black;
font-family: "Concert One";
}
#tab {
font-family: "Concert One";
}
</style>
</head>
<body>
<div id="clock"></div>
<script>
function currentTime() {
var date = new Date(); /* creating object of Date class */
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
if (hour > 12) {
hour = hour - 12;
} else {
hour = hour;
}
hour = updateTime(hour);
min = updateTime(min);
sec = updateTime(sec);
document.getElementById("clock").innerText = hour + " : " + min + " : " + sec; /* adding time to the div */
var t = setTimeout(function() {
currentTime()
}, 1000); /* setting timer */
}
function updateTime(k) {
if (k < 10) {
return "0" + k;
} else {
return k;
}
}
currentTime(); /* calling currentTime() function to initiate the process */
</script>
<div id="task">
<h4 align='center'>Today's Accomplishments</h4>
</div>
<div id="tab">
<table align="center">
<tr>
<td id="box">
Vocab<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
<td id="box">
SAT-Math<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
<td class="box">
SAT-Reading<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
<td class="box">
SAT-Writing<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
<td class="box">
Chemistry<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
<td class="box">
Math<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
</td>
</tr>
</table>
</div>
<div id="clock"></div>
</body>
</html>

Related

How to Trigger Youtube API Iframe loader using an OnClick function?

I have a youtube API Iframe that loads on a video trimming script.
Works fine but How can I trigger it based on a click function instead of default on document load.
The reason behind this is that I would like to insert a youtube link in an input box and on click I m trying to update the link ID in onYouTubeIframeAPIReady() videoId var.
Here's the fiddle to play around
Here's the code snippet.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css'>
<style>
.size
{
font-size: 80px;
font-weight: bold;
}
.sizePar
{
font-size: 21px;
}
.input-size
{
width: 355px;
float: left;
}
.button-size
{
width: 95px;
float: none;
height: 33px;
}
.padding
{
padding-top: 11px;
}
.video-image-size
{
width:250px;
height:auto;
}
.center
{
text-align: center;
padding-top: 25px;
}
.button-rule
{
font-style: normal;
font-weight: bold;
vertical-align: middle;
}
.button-widht
{
width: 116px;
}
.allontana
{
margin-bottom: 30px;
margin-top:50px;
margin-right:15px;
}
.separa{
margin-left: 10px;
margin-right: 10px;
}
.bordered{
border: 1px solid black;
}
body {
padding-top: 70px;
}
.carousel-inner img{
margin: 0 auto;
}
.navbar-brand{
font-size: 20pt;
font-style: bold;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid orange;
margin: 1em 0; padding: 0;
}
.progress {
border-radius: 0px;
height: 10px;
}
.progress-bar-warning{
background: #ffffff;
}
.video-image-size-onWatch{
width:150px;
height:auto;
}
#showcase {
margin: 0 20px;
text-align: center;
}
#range .noUi-base {
}
#range .noUi-background {
}
#range .noUi-connect {
background: #80C9F5;
box-shadow: inset 0 0 5px rgba(20,20,20,0.65);
}
#value-span,
#value-input {
width: 50%;
float: left;
display: block;
text-align: center;
margin: 0;
}
</style>
</head>
<body translate="no" >
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div>
<input type="text" id="custom_link" />
<a id="custom_link_btn" >Submit</a>
</div>
<div class="row">
<div class="col-md-3 text-center">
<hr>
<h3>Cut This Video</h3>
<div class="panel panel-info" style="margin-top:30px;">
<div class="panel-heading">
<h3 class="panel-title">Current Time</h3>
</div>
<div class="panel-body">
<div id="curTime" style="font-size:20px;">
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Select Quality</h3>
</div>
<div class="panel-body">
<div class="dropdown" id="dropdown" style="font-size:20px;">
<!-- dropdown here -->
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Cutted duration</h3>
</div>
<div class="panel-body">
<div id="finalDuration" style="font-size:20px;">
</div>
</div>
</div>
</div>
<!-- player -->
<div class="col-md-6 text-center" style="padding-top:30px;">
<div class="embed-responsive embed-responsive-16by9">
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player" class="embed-responsive-item">
</div>
</div>
<!-- progress bar -->
<div class="progress">
<div class="progress-bar progress-bar-primary progress-bar-striped" id="cut-left" style="width: 0%">
<span class="sr-only"></span>
</div>
<div class="progress-bar progress-bar-success progress-bar-striped active" id="played" style="width: 0%">
<span class="sr-only"></span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" id="toPlay" style="width: 100%">
<span class="sr-only"></span>
</div>
<div class="progress-bar progress-bar-primary progress-bar-striped" id="cut-right" style="width: 0%">
<span class="sr-only"></span>
</div>
</div>
<!-- 2. The IONrangeSlider container -->
<div id="range"></div>
<div id="value-input"></div>
<div id="value-span"></div>
<!-- Controls -->
<div id="controls" style="padding-top:20px;">
<a href="#" onClick="rewindVideo()" class="separa">
<i class="separa fa fa-refresh fa-2x"></i>
</a>
<a href="#" onClick="backwardVideo()" class="separa">
<i class="separa fa fa-backward fa-2x"></i>
</a>
<a href="#" onClick="playPauseVideo()" id="playPause" class="separa">
<i class="separa fa fa-play fa-2x"></i>
</a>
<a href="#" onClick="forwardVideo()" class="separa">
<i class="separa fa fa-forward fa-2x"></i>
</a>
</div>
<div class="input-group" style="margin-top:30px;">
<span class="input-group-addon" id="basic-addon1">Title</span>
<input type="text" name="title" id="title" class="form-control" value="Bill Maher Live DNC Special Edition: July 27" aria-describedby="basic-addon1" required>
<div id="inputList"></div>
</div>
<div class="col-md-3">
</div>
<div class="col-md-6 text-center" style="padding-top: 30px;">
<button type="submit" class="btn btn-primary" style="margin-top:10px">Cut</button>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<!-- endRow -->
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.js'></script>
<script id="rendered-js" >
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var duration;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'IP1kr0SCYzk',
playerVars: { 'start': 0, 'autoplay': 0, 'controls': 0 },
events: {
'onReady': onPlayerReady,
'onStateChange': onytplayerStateChange } });
}
function onPlayerReady(event) {
// event.target.playVideo();
duration = player.getDuration();
setMoreInfo();
playPauseVideo();
setIONrangeSlider();
checkDomainAndStop();
}
function onytplayerStateChange(newState) {
setCorrectImageOnPlay();
}
/*
IONrangeSlider
*/
var fromOld = 0;
var toOld = duration;
var slider;
function setIONrangeSlider() {
var slider = document.getElementById('range');
noUiSlider.create(slider, {
start: [0, duration], // Handle start position
step: 1, // Slider moves in increments of '1'
margin: 3, // Handles must be more than '3' apart
connect: true, // Display a colored bar between the handles
behaviour: 'tap-drag', // Move handle on tap, bar is draggable
range: { // Slider can select '0' to 'duration'
'min': 0,
'max': duration } });
var valueInput = document.getElementById('value-input'),
valueSpan = document.getElementById('value-span');
var readValue;
// When the slider value changes, update the input and span
slider.noUiSlider.on('update', function (values, handle) {
if (handle) {
readValue = values[handle] | 0;
valueSpan.innerHTML = toHHMMSS(values[handle]);
if (toOld != readValue) {
toOld = readValue;
}
} else {
readValue = values[handle] | 0;
valueInput.innerHTML = toHHMMSS(values[handle]);
if (fromOld != readValue) {
fromOld = readValue;
player.seekTo(readValue, true);
player.pauseVideo();
player.playVideo();
}
}
});
// When the input changes, set the slider value
valueInput.addEventListener('change', function () {
slider.noUiSlider.set([null, this.value]);
});
}
/*
Player Bar
*/
function updatePlayerBar() {
var curTime = player.getCurrentTime();
var cutLeft = fromOld * 100 / duration;
var cutRigth = (duration - toOld) * 100 / duration;
var played = (curTime - fromOld) * 100 / duration;
var toPlay = 100 - played - cutLeft - cutRigth;
document.getElementById("cut-left").style.width = cutLeft + "%";
document.getElementById("cut-right").style.width = cutRigth + "%";
document.getElementById("played").style.width = played + "%";
document.getElementById("toPlay").style.width = toPlay + "%";
}
/*
Updates the playback quality
*/
function updatePlaybackQuality(quality) {
player.setPlaybackQuality(quality);
waitForQuality(quality);
}
function waitForQuality(quality) {
if (player.getPlaybackQuality() != quality) {
setTimeout(function () {waitForQuality(quality);}, 1000);
} else
{
createQualityList(qualityLevels);
}
}
function checkDomainAndStop() {
var curTime = player.getCurrentTime();
document.getElementById('curTime').innerHTML = toHHMMSS(curTime.toString()) + " / " + toHHMMSS(duration.toString());
var result = toHHMMSS((toOld - fromOld).toString());
if (result != "NaN:NaN:NaN") {
document.getElementById('finalDuration').innerHTML = result;
}
if (curTime < fromOld) {
player.seekTo(fromOld, true);
}
if (curTime > toOld) {
player.seekTo(toOld, true);
pauseVideo();
}
updatePlayerBar();
// recursively call it.
setTimeout(checkDomainAndStop, 100);
}
/*
Setting more infos
*/
var waitForLevels;
var qualityLevels;
function setMoreInfo() {
waitForLevels = player.getAvailableQualityLevels();
if (waitForLevels.length == 0) {
setTimeout(setMoreInfo, 1000);
} else
{
qualityLevels = waitForLevels;
//console.log(qualityLevels);
createQualityList(qualityLevels);
}
}
/*
converts String to hh:mm:ss or mm:ss
*/
function toHHMMSS(val) {
var sec_num = parseInt(val, 10);
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - hours * 3600) / 60);
var seconds = sec_num - hours * 3600 - minutes * 60;
if (hours < 10) {hours = "0" + hours;}
if (minutes < 10) {minutes = "0" + minutes;}
if (seconds < 10) {seconds = "0" + seconds;}
// only mm:ss
if (hours == "00") {
var time = minutes + ':' + seconds;
} else
{
var time = hours + ':' + minutes + ':' + seconds;
}
return time;
}
function stopVideo() {
player.stopVideo();
}
function pauseVideo() {
player.pauseVideo();
}
function playVideo() {
player.playVideo();
}
function playPauseVideo() {
//is playing
if (player.getPlayerState() == 1) {
pauseVideo();
} else
{
playVideo();
}
}
function setCorrectImageOnPlay() {
//is playing
if (player.getPlayerState() == 1) {
document.getElementById('playPause').innerHTML =
"<i class=\"separa fa fa-pause fa-2x\"></i>";
} else
{
document.getElementById('playPause').innerHTML =
"<i class=\"separa fa fa-play fa-2x\"></i>";
}
}
function backwardVideo() {
var curTime = player.getCurrentTime();
curTime -= 5;
if (curTime < fromOld) {
player.seekTo(fromOld, true);
} else
{
player.seekTo(curTime, true);
}
}
function rewindVideo() {
player.seekTo(fromOld, true);
playVideo();
}
function forwardVideo() {
var curTime = player.getCurrentTime();
curTime += 5;
if (curTime > toOld) {
player.seekTo(toOld, true);
} else
{
player.seekTo(curTime, true);
}
}
//# sourceURL=pen.js
</script>
So, as per the above code, I'm trying to get the input value with the click of submit button and update it on videoId var, so the trimmable video gets updated. as well.
What I tried:
I tried keeping the whole script inside a function and tried "OnClick", It ran till 2nd console.log print.

How to trim a local video using a Custom Video Trimmer in JQuery?

I have a custom video trimmer snippet from codepen.
Here's the fiddle link to play around
However, I can only be able to trim the video from youtube. How can I trim a local video using the code?
The code goes as :
<!DOCTYPE html>
<html lang="en" >
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css'>
<style>
.size
{
font-size: 80px;
font-weight: bold;
}
.sizePar
{
font-size: 21px;
}
.input-size
{
width: 355px;
float: left;
}
.button-size
{
width: 95px;
float: none;
height: 33px;
}
.padding
{
padding-top: 11px;
}
.video-image-size
{
width:250px;
height:auto;
}
.center
{
text-align: center;
padding-top: 25px;
}
.button-rule
{
font-style: normal;
font-weight: bold;
vertical-align: middle;
}
.button-widht
{
width: 116px;
}
.allontana
{
margin-bottom: 30px;
margin-top:50px;
margin-right:15px;
}
.separa{
margin-left: 10px;
margin-right: 10px;
}
.bordered{
border: 1px solid black;
}
body {
padding-top: 70px;
}
.carousel-inner img{
margin: 0 auto;
}
.navbar-brand{
font-size: 20pt;
font-style: bold;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid orange;
margin: 1em 0; padding: 0;
}
.progress {
border-radius: 0px;
height: 10px;
}
.progress-bar-warning{
background: #ffffff;
}
.video-image-size-onWatch{
width:150px;
height:auto;
}
#showcase {
margin: 0 20px;
text-align: center;
}
#range .noUi-base {
}
#range .noUi-background {
}
#range .noUi-connect {
background: #80C9F5;
box-shadow: inset 0 0 5px rgba(20,20,20,0.65);
}
#value-span,
#value-input {
width: 50%;
float: left;
display: block;
text-align: center;
margin: 0;
}
</style>
</head>
<body translate="no" >
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="row">
<div class="col-md-3 text-center">
<hr>
<h3>Cut This Video</h3>
<div class="panel panel-info" style="margin-top:30px;">
<div class="panel-heading">
<h3 class="panel-title">Current Time</h3>
</div>
<div class="panel-body">
<div id="curTime" style="font-size:20px;">
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Select Quality</h3>
</div>
<div class="panel-body">
<div class="dropdown" id="dropdown" style="font-size:20px;">
<!-- dropdown here -->
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Cutted duration</h3>
</div>
<div class="panel-body">
<div id="finalDuration" style="font-size:20px;">
</div>
</div>
</div>
</div>
<!-- player -->
<div class="col-md-6 text-center" style="padding-top:30px;">
<div class="embed-responsive embed-responsive-16by9">
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player" class="embed-responsive-item">
</div>
</div>
<!-- progress bar -->
<div class="progress">
<div class="progress-bar progress-bar-primary progress-bar-striped" id="cut-left" style="width: 0%">
<span class="sr-only"></span>
</div>
<div class="progress-bar progress-bar-success progress-bar-striped active" id="played" style="width: 0%">
<span class="sr-only"></span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" id="toPlay" style="width: 100%">
<span class="sr-only"></span>
</div>
<div class="progress-bar progress-bar-primary progress-bar-striped" id="cut-right" style="width: 0%">
<span class="sr-only"></span>
</div>
</div>
<!-- 2. The IONrangeSlider container -->
<div id="range"></div>
<div id="value-input"></div>
<div id="value-span"></div>
<!-- Controls -->
<div id="controls" style="padding-top:20px;">
<a href="#" onClick="rewindVideo()" class="separa">
<i class="separa fa fa-refresh fa-2x"></i>
</a>
<a href="#" onClick="backwardVideo()" class="separa">
<i class="separa fa fa-backward fa-2x"></i>
</a>
<a href="#" onClick="playPauseVideo()" id="playPause" class="separa">
<i class="separa fa fa-play fa-2x"></i>
</a>
<a href="#" onClick="forwardVideo()" class="separa">
<i class="separa fa fa-forward fa-2x"></i>
</a>
</div>
<div class="input-group" style="margin-top:30px;">
<span class="input-group-addon" id="basic-addon1">Title</span>
<input type="text" name="title" id="title" class="form-control" value="Bill Maher Live DNC Special Edition: July 27" aria-describedby="basic-addon1" required>
<div id="inputList"></div>
</div>
<div class="col-md-3">
</div>
<div class="col-md-6 text-center" style="padding-top: 30px;">
<button type="submit" class="btn btn-primary" style="margin-top:10px">Cut</button>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<!-- endRow -->
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.js'></script>
<script id="rendered-js" >
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var duration;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'IP1kr0SCYzk',
playerVars: { 'start': 0, 'autoplay': 0, 'controls': 0 },
events: {
'onReady': onPlayerReady,
'onStateChange': onytplayerStateChange } });
}
function onPlayerReady(event) {
// event.target.playVideo();
duration = player.getDuration();
setMoreInfo();
playPauseVideo();
setIONrangeSlider();
checkDomainAndStop();
}
function onytplayerStateChange(newState) {
setCorrectImageOnPlay();
}
/*
IONrangeSlider
*/
var fromOld = 0;
var toOld = duration;
var slider;
function setIONrangeSlider() {
var slider = document.getElementById('range');
noUiSlider.create(slider, {
start: [0, duration], // Handle start position
step: 1, // Slider moves in increments of '1'
margin: 3, // Handles must be more than '3' apart
connect: true, // Display a colored bar between the handles
behaviour: 'tap-drag', // Move handle on tap, bar is draggable
range: { // Slider can select '0' to 'duration'
'min': 0,
'max': duration } });
var valueInput = document.getElementById('value-input'),
valueSpan = document.getElementById('value-span');
var readValue;
// When the slider value changes, update the input and span
slider.noUiSlider.on('update', function (values, handle) {
if (handle) {
readValue = values[handle] | 0;
valueSpan.innerHTML = toHHMMSS(values[handle]);
if (toOld != readValue) {
toOld = readValue;
}
} else {
readValue = values[handle] | 0;
valueInput.innerHTML = toHHMMSS(values[handle]);
if (fromOld != readValue) {
fromOld = readValue;
player.seekTo(readValue, true);
player.pauseVideo();
player.playVideo();
}
}
});
// When the input changes, set the slider value
valueInput.addEventListener('change', function () {
slider.noUiSlider.set([null, this.value]);
});
}
/*
Player Bar
*/
function updatePlayerBar() {
var curTime = player.getCurrentTime();
var cutLeft = fromOld * 100 / duration;
var cutRigth = (duration - toOld) * 100 / duration;
var played = (curTime - fromOld) * 100 / duration;
var toPlay = 100 - played - cutLeft - cutRigth;
document.getElementById("cut-left").style.width = cutLeft + "%";
document.getElementById("cut-right").style.width = cutRigth + "%";
document.getElementById("played").style.width = played + "%";
document.getElementById("toPlay").style.width = toPlay + "%";
}
/*
Updates the playback quality
*/
function updatePlaybackQuality(quality) {
player.setPlaybackQuality(quality);
waitForQuality(quality);
}
function waitForQuality(quality) {
if (player.getPlaybackQuality() != quality) {
setTimeout(function () {waitForQuality(quality);}, 1000);
} else
{
createQualityList(qualityLevels);
}
}
function checkDomainAndStop() {
var curTime = player.getCurrentTime();
document.getElementById('curTime').innerHTML = toHHMMSS(curTime.toString()) + " / " + toHHMMSS(duration.toString());
var result = toHHMMSS((toOld - fromOld).toString());
if (result != "NaN:NaN:NaN") {
document.getElementById('finalDuration').innerHTML = result;
}
if (curTime < fromOld) {
player.seekTo(fromOld, true);
}
if (curTime > toOld) {
player.seekTo(toOld, true);
pauseVideo();
}
updatePlayerBar();
// recursively call it.
setTimeout(checkDomainAndStop, 100);
}
/*
Setting more infos
*/
var waitForLevels;
var qualityLevels;
function setMoreInfo() {
waitForLevels = player.getAvailableQualityLevels();
if (waitForLevels.length == 0) {
setTimeout(setMoreInfo, 1000);
} else
{
qualityLevels = waitForLevels;
//console.log(qualityLevels);
createQualityList(qualityLevels);
}
}
/*
converts String to hh:mm:ss or mm:ss
*/
function toHHMMSS(val) {
var sec_num = parseInt(val, 10);
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - hours * 3600) / 60);
var seconds = sec_num - hours * 3600 - minutes * 60;
if (hours < 10) {hours = "0" + hours;}
if (minutes < 10) {minutes = "0" + minutes;}
if (seconds < 10) {seconds = "0" + seconds;}
// only mm:ss
if (hours == "00") {
var time = minutes + ':' + seconds;
} else
{
var time = hours + ':' + minutes + ':' + seconds;
}
return time;
}
function stopVideo() {
player.stopVideo();
}
function pauseVideo() {
player.pauseVideo();
}
function playVideo() {
player.playVideo();
}
function playPauseVideo() {
//is playing
if (player.getPlayerState() == 1) {
pauseVideo();
} else
{
playVideo();
}
}
function setCorrectImageOnPlay() {
//is playing
if (player.getPlayerState() == 1) {
document.getElementById('playPause').innerHTML =
"<i class=\"separa fa fa-pause fa-2x\"></i>";
} else
{
document.getElementById('playPause').innerHTML =
"<i class=\"separa fa fa-play fa-2x\"></i>";
}
}
function backwardVideo() {
var curTime = player.getCurrentTime();
curTime -= 5;
if (curTime < fromOld) {
player.seekTo(fromOld, true);
} else
{
player.seekTo(curTime, true);
}
}
function rewindVideo() {
player.seekTo(fromOld, true);
playVideo();
}
function forwardVideo() {
var curTime = player.getCurrentTime();
curTime += 5;
if (curTime > toOld) {
player.seekTo(toOld, true);
} else
{
player.seekTo(curTime, true);
}
}
//# sourceURL=pen.js
</script>
Things I tried.
Replacing the youtube link in the iframe with the local video path works but it won't have any effect with the trimmer and progress bar
Tried changing the "player" variable in the script, Failed.
Any help is greatly appreciated.

Image swap with progress bar increase/decrease onclick

I'm trying to create image swap with the progress bar increase/decrease when the button clicked. This first problem is working but the second one is not working. On the second one, image won't swap after the fist button ("mark completed") clicked.
$(document).ready(function($){
var progress = 20;
var picSource = document.getElementById("mark-complete").src;
var notcomplete = "https://www.w3schools.com/images/picture.jpg";
var completed = "https://www.w3schools.com/images/lamp.jpg";
function changePic() {
if (picSource == notcomplete) {
picSource = completed;
} else {
picSource = notcomplete;
}
}
document.getElementById("btn").onclick = function() {
changePic();
document.getElementById("mark-complete").src = picSource;
}
document.getElementById("btn2").onclick = function() {
changePic();
document.getElementById("mark-complete2").src = picSource;
}
$("#pg1 input").on('change', function(){
if ($("#pg1 input").is(":checked") === true) {
progress = progress+5;
$('#blips > .xp-progress').attr("style","width:" + progress + "%");
}
else if ($("#pg1 input").is(":checked") === false) {
progress = progress-5;
$('#blips > .xp-progress').attr("style","width:" + progress + "%");
}
});
$("#pg2 input").on('change', function(){
if ($("#pg2 input").is(":checked") === true) {
progress = progress+5;
$('#blips > .xp-progress').attr("style","width:" + progress + "%");
}
else if ($("#pg2 input").is(":checked") === false) {
progress = progress-5;
$('#blips > .xp-progress').attr("style","width:" + progress + "%");
}
});
});
.xp-progress { background-color: darkred;
height: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blips" class="xp-line">
<div class="xp-progress" role="progressbar" style="width:20%">
<span class="sr-only" style="color:blue;"></span>
</div>
</div>
<img id="mark-complete" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">
<hr>
<p></p>
<label id="pg1" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Mark Completed!
<input type="checkbox" id="btn" style="display:none;">
</label>
<hr>
<p></p>
<img id="mark-complete2" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">
<label id="pg2" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Mark Completed!2
<input type="checkbox" id="btn2" style="display:none;">
</label>
I know it has to do with "getelementbyid" but What did i do wrong?
Here is the demo: https://plnkr.co/UGWOqpdeCDhXuS9MMXfI

picSource is always equals to path to your first image (document.getElementById("mark-complete").src).
You need to pass your current image to changePic and compare it on click event. Updated changePic returns needed src for image.
$(document).ready(function($){
var progress = 20;
var notcomplete = "https://www.w3schools.com/images/picture.jpg";
var completed = "https://www.w3schools.com/images/lamp.jpg";
function changePic(source) {
if (source == notcomplete) {
return completed;
} else {
return notcomplete;
}
}
document.getElementById("btn").onclick = function() {
var imgSrc=document.getElementById("mark-complete").src;
document.getElementById("mark-complete").src = changePic(imgSrc);
}
document.getElementById("btn2").onclick = function() {
var imgSrc=document.getElementById("mark-complete2").src;
document.getElementById("mark-complete2").src = changePic(imgSrc);
}
$("#pg1 input").on('change', function(){
if ($("#pg1 input").is(":checked") === true) {
progress = progress+5;
$('#blips > .xp-progress').attr("style","width:" + progress + "%");
}
else if ($("#pg1 input").is(":checked") === false) {
progress = progress-5;
$('#blips > .xp-progress').attr("style","width:" + progress + "%");
}
});
$("#pg2 input").on('change', function(){
if ($("#pg2 input").is(":checked") === true) {
progress = progress+5;
$('#blips > .xp-progress').attr("style","width:" + progress + "%");
}
else if ($("#pg2 input").is(":checked") === false) {
progress = progress-5;
$('#blips > .xp-progress').attr("style","width:" + progress + "%");
}
});
});
.xp-progress { background-color: darkred;
height: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blips" class="xp-line">
<div class="xp-progress" role="progressbar" style="width:20%">
<span class="sr-only" style="color:blue;"></span>
</div>
</div>
<img id="mark-complete" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">
<hr>
<p></p>
<label id="pg1" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Mark Completed!
<input type="checkbox" id="btn" style="display:none;">
</label>
<hr>
<p></p>
<img id="mark-complete2" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">
<label id="pg2" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Mark Completed!2
<input type="checkbox" id="btn2" style="display:none;">
</label>

The problem is that picSource remains set to the src of the last image that was changed.
You've made this way more complicated then it has to be, here is a simplified version:
$(function() {
var progress = 20;
var notcomplete = "https://www.w3schools.com/images/picture.jpg";
var completed = "https://www.w3schools.com/images/lamp.jpg";
$("#btn, #btn2").click(function() {
// Get a reference to the appropriate image based on the id of the pushed button.
var $img = this.id === 'btn' ? $("#mark-complete") : $("#mark-complete2");
// Toggle the image.
if ($img.attr("src") === notcomplete) {
$img.attr("src", completed);
} else {
$img.attr("src", notcomplete);
}
});
$("#pg1 input, #pg2 input").on('change', function() {
if ($(this).is(":checked")) {
progress = progress + 5;
} else {
progress = progress - 5;
}
$('#blips > .xp-progress').css("width", progress + "%");
});
});
.xp-progress {
background-color: darkred;
height: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blips" class="xp-line">
<div class="xp-progress" role="progressbar" style="width:20%">
<span class="sr-only" style="color:blue;"></span>
</div>
</div>
<img id="mark-complete" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">
<hr>
<p></p>
<label id="pg1" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Mark Completed!
<input type="checkbox" id="btn" style="display:none;">
</label>
<hr>
<p></p>
<img id="mark-complete2" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">
<label id="pg2" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Mark Completed!2
<input type="checkbox" id="btn2" style="display:none;">
</label>

I want to make a game to count the number of clicks on the image in 1 minute

I've made this code to make a game that counts the number of clicks on the moving image .. but i can't make the Countdown or the counter .. i want when the user press start the game an countdown begins .. and every click on the image the number in (the counter) increased by one .. Thnx
var x_position = 0 ;
var theSpace = document.getElementById("gamespace");
var textt=document.getElementById("text");
var theMission = document.createTextNode(" - Press the tree as fast as you can ");
var theTree = document.createElement("img");
var moving;
function movingf() {
theSpace.appendChild(theTree);
theTree.style.left=Math.floor(Math.random() * 401) + "px";
theTree.style.right=Math.floor(Math.random() * 401) + "px";
theTree.style.top=Math.floor(Math.random() * 401) + "px";
theTree.style.bottom=Math.floor(Math.random() * 401) + "px";
moving=setTimeout(movingf,500);
theTree.addEventListener("click",theCounter);
}
function theGame() {
textt.style.clear="both";
theTree.setAttribute("src","http://franklinccc.org/wp-content/uploads/2014/03/ccc-tree-logo.jpg");
theTree.style.position="absolute";
theSpace.appendChild(theTree);
textt.appendChild(theMission);
moving=setTimeout(movingf,50);
theTree.onclick = theCounter();
}
function theCounter() {
var time = 0;
time = time + 1 ;
var theCount = document.getElementById("times").innerHTML=time;
}
#gamespace{
border:2px solid black ;
width:500px;
height:500px;
top:215px;}
p{position:absolute;
border:1px solid black;}
button{position:absolute;
top:60px;}
#here{position:absolute;
top:45px;
}
<h1> PICTURE GAME .. </h1>
<button id="start" onclick="theGame()"> Press here to start the game</button>
<div id="here">
<form action="/action_page.php" id="here">
The countdown :
<input type="text" name="firstname" value="0" >
The counter :
<input type="text" name="lastname" value="0">
</form>
</div>
<p id="text" style="top:170px"></p>
<div id="gamespace" style="position:absolute"> </div>

You have an error in your javascript :
"message": "Uncaught TypeError: Cannot set property 'innerHTML' of null",
here :
var theCount = document.getElementById("times").innerHTML=time;
You have no element with the id = "times", so if you want the <p> element to contain the count, change the line to :
var theCount = document.getElementById("text").innerHTML=time;
Also, theCounter() function should be like this :
function theCounter() {
time = time + 1 ;
document.getElementById("text").innerHTML=time;
}
var x_position = 0 ;
var theSpace = document.getElementById("gamespace");
var textt=document.getElementById("text");
var theMission = document.createTextNode(" - Press the tree as fast as you can ");
var theTree = document.createElement("img");
var moving ;
var time = 0;
function movingf() {
theSpace.appendChild(theTree);
theTree.style.left=Math.floor(Math.random() * 401) + "px";
theTree.style.right=Math.floor(Math.random() * 401) + "px";
theTree.style.top=Math.floor(Math.random() * 401) + "px";
theTree.style.bottom=Math.floor(Math.random() * 401) + "px";
moving=setTimeout(movingf,500);
theTree.addEventListener("click",theCounter);
}
function theGame() {
textt.style.clear="both";
theTree.setAttribute("src","http://franklinccc.org/wp-content/uploads/2014/03/ccc-tree-logo.jpg");
theTree.style.position="absolute";
theSpace.appendChild(theTree);
textt.appendChild(theMission);
moving=setTimeout(movingf,50);
theTree.onclick = theCounter();
}
function theCounter() {
time = time + 1 ;
document.getElementById("text").innerHTML=time;
}
#gamespace {
border: 2px solid black ;
width: 500px;
height: 500px;
top: 215px;
}
p {
position: absolute;
border: 1px solid black;
}
button {
position: absolute;
top: 60px;
}
#here {
position: absolute;
top: 45px;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h1> PICTURE GAME .. </h1>
<button id="start" onclick="theGame()"> Press here to start the game</button>
<div id="here">
<form action="/action_page.php" id="here">
The countdown :
<input type="text" name="firstname" value="0" >
The counter :
<input type="text" name="lastname" value="0">
</form>
</div>
<p id="text" style="top:170px"></p>
<div id="gamespace" style="position:absolute"> </div>
</body>

You were trying to reset your counter inside the theCounter function each time it was called, also tried to set innerHTML of element with id that was not in your markup. After fixing this this you can use setInterval to implement timer countdown:
var x_position = 0 ;
var theSpace = document.getElementById("gamespace");
var textt=document.getElementById("text");
var theMission = document.createTextNode(" - Press the tree as fast as you can ");
var theTree = document.createElement("img");
var moving;
function movingf() {
theTree.style.left=Math.floor(Math.random() * 401) + "px";
theTree.style.right=Math.floor(Math.random() * 401) + "px";
theTree.style.top=Math.floor(Math.random() * 401) + "px";
theTree.style.bottom=Math.floor(Math.random() * 401) + "px";
}
var clicks = 0, gameTimer, movingfTimer, timeleft;
theSpace.appendChild(theTree);
function theGame() {
clicks = 0;
timeleft = 30;
document.getElementById("times").value = clicks;
document.getElementById("countdown").value = timeleft;
textt.style.clear="both";
theTree.setAttribute("src","http://franklinccc.org/wp-content/uploads/2014/03/ccc-tree-logo.jpg");
theTree.style.position="absolute";
theSpace.appendChild(theTree);
textt.appendChild(theMission);
theTree.addEventListener("click", theCounter);
movingf();
clearInterval(movingfTimer);
clearInterval(gameTimer);
movingfTimer = setInterval(movingf, 500);
gameTimer = setInterval(function(){
timeleft--;
document.getElementById("countdown").value = timeleft;
if(timeleft <= 0){
clearInterval(gameTimer);
clearInterval(movingfTimer);
theTree.removeEventListener("click", theCounter);
}
}, 1000);
}
function theCounter() {
clicks++;
document.getElementById("times").value = clicks;
}
#gamespace {
border:2px solid black ;
width:500px;
height:500px;
top:215px;
}
p {
position:absolute;
border:1px solid black;
}
button {
position:absolute;
top:60px;
}
#here {
position:absolute;
top:45px;
}
<h1> PICTURE GAME .. </h1>
<button id="start" onclick="theGame()"> Press here to start the game</button>
<div id="here">
<form action="/action_page.php" id="here">
The countdown :
<input type="text" name="countdown" id="countdown" />
The counter :
<input type="text" name="times" id="times" value="0" />
</form>
</div>
<p id="text" style="top:170px"></p>
<div id="gamespace" style="position:absolute"> </div>

audio onprogress in chrome not working

I am having a problem getting onprogress event for the audio tag working on chrome. it seems to work on fire fox.
http://www.scottandrew.com/pub/html5audioplayer/ works on chrome but there is no progress bar update. When I copy the code and change the src to a .wav file and run it on fire fox it works perfectly.
<style type="text/css">
#content
{
clear:both;
width:60%;
}
.player_control
{
float:left;
margin-right:5px;
height: 20px;
}
#player
{
height:22px;
}
#duration
{
width:400px;
height:15px;
border: 2px solid #50b;
}
#duration_background
{
width:400px;
height:15px;
background-color:#ddd;
}
#duration_bar
{
width:0px;
height:13px;
background-color:#bbd;
}
#loader
{
width:0px;
height:2px;
}
.style1
{
height: 35px;
}
</style>
<script type="text/javascript">
var audio_duration;
var audio_player;
function pageLoaded() {
audio_player = $("#aplayer").get(0);
//get the duration
audio_duration = audio_player.duration;
$('#totalTime').text(formatTimeSeconds(audio_player.duration));
//set the volume
}
function update(){
//get the duration of the player
dur = audio_player.duration;
time = audio_player.currentTime;
fraction = time/dur;
percent = (fraction*100);
wrapper = document.getElementById("duration_background");
new_width = wrapper.offsetWidth*fraction;
document.getElementById("duration_bar").style.width = new_width + "px";
$('#currentTime').text(formatTimeSeconds(audio_player.currentTime));
$('#totalTime').text(formatTimeSeconds(audio_player.duration));
}
function formatTimeSeconds(time) {
var minutes = Math.floor(time / 60);
var seconds = "0" + (Math.floor(time) - (minutes * 60)).toString();
if (isNaN(minutes) || isNaN(seconds))
{
return "0:00";
}
var Strseconds = seconds.substr(seconds.length - 2);
return minutes + ":" + Strseconds;
}
function playClicked(element){
//get the state of the player
if(audio_player.paused)
{
audio_player.play();
newdisplay = "||";
}else{
audio_player.pause();
newdisplay = ">";
}
$('#totalTime').text(formatTimeSeconds(audio_player.duration));
element.value = newdisplay;
}
function trackEnded(){
//reset the playControl to 'play'
document.getElementById("playControl").value=">";
}
function durationClicked(event){
//get the position of the event
clientX = event.clientX;
left = event.currentTarget.offsetLeft;
clickoffset = clientX - left;
percent = clickoffset/event.currentTarget.offsetWidth;
duration_seek = percent*audio_duration;
document.getElementById("aplayer").currentTime=duration_seek;
}
function Progress(evt){
$('#progress').val(Math.round(evt.loaded / evt.total * 100));
var width = $('#duration_background').css('width')
$('#loader').css('width', evt.loaded / evt.total * width.replace("px",""));
}
function getPosition(name) {
var obj = document.getElementById(name);
var topValue = 0, leftValue = 0;
while (obj) {
leftValue += obj.offsetLeft;
obj = obj.offsetParent;
}
finalvalue = leftValue;
return finalvalue;
}
function SetValues() {
var xPos = xMousePos;
var divPos = getPosition("duration_background");
var divWidth = xPos - divPos;
var Totalwidth = $('#duration_background').css('width').replace("px","")
audio_player.currentTime = divWidth / Totalwidth * audio_duration;
$('#duration_bar').css('width', divWidth);
}
</script>
</head>
<script type="text/javascript" src="js/MousePosition.js" ></script>
<body onLoad="pageLoaded();">
<table>
<tr>
<td valign="bottom"><input id="playButton" type="button" onClick="playClicked(this);" value=">"/></td>
<td colspan="2" class="style1" valign="bottom">
<div id='player'>
<div id="duration" class='player_control' >
<div id="duration_background" onClick="SetValues();">
<div id="loader" style="background-color: #00FF00; width: 0px;"></div>
<div id="duration_bar" class="duration_bar"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<span id="currentTime">0:00</span>
</td>
<td align="right" >
<span id="totalTime">0:00</span>
</td>
</tr>
</table>
<audio id='aplayer' src='<%=getDownloadLink() %>' type="audio/ogg; codecs=vorbis" onProgress="Progress(event);" onTimeUpdate="update();" onEnded="trackEnded();" >
<b>Your browser does not support the <code>audio</code> element. </b>
</audio>
</body>

Chrome doesn't fire the progress event when it has the media in cache, that might be your problem.

The progress event doesn't fire in Chrome for WAV files but it does for MP3.

There is a known timeupdate bug: http://code.google.com/p/chromium/issues/detail?id=25185.

Develop Reference

JavaScript is the programming language of the Web.

Why clock time is not being shown? - javascript

Related

How to Trigger Youtube API Iframe loader using an OnClick function?

How to trim a local video using a Custom Video Trimmer in JQuery?

Image swap with progress bar increase/decrease onclick

I want to make a game to count the number of clicks on the image in 1 minute

audio onprogress in chrome not working

Categories

Resources