How to add custom seekbar in html5 video

How to add custom seekbar in html5 video - javascript

i am working on webapp. In this webapp i want add a seek bar, volume, current time/total time,play/pause, and a timer (time should start when the video is playing and should pause, video is paused)
in this webapp i just want to calculate the total number to sec. video is played by user.
thank you in advance.
<html>
<body>
<div style="text-align:center">
<div id="video_player_box">
<video id="my_video" width="550" height="300" onclick="playPause(this,'my_video')">
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4">
</video>
<div id="video_controls_bar">
<button id="playpausebtn" onclick="playPause(this,'my_video')">Play</button>
</div>
</div>
</div>
<p id="demo"></p>
<form id="watch">
<p> TIME: <input type="text" id="txt" readonly></p>
<p>COST: <input type="text" id="cost" readonly></p>
As 0.9rs/sec
</form>
<script>
var str = "Hello World!";
var result;
var c = 0;
var co = 0;
var t;
var timer_is_on = 0;
function playPause(btn, vid) {
var vid = document.getElementById(vid);
if (vid.paused) {
vid.play();
btn.innerHTML = "Pause";
result = str.fontcolor("green");
document.getElementById("demo").innerHTML = result;
if (!timer_is_on) {
timer_is_on = 1;
timedCount();
}
} else {
result = str.fontcolor("red");
document.getElementById("demo").innerHTML = result;
vid.pause();
btn.innerHTML = "Play";
clearTimeout(t);
timer_is_on = 0;
myVideo.pause();
}
}
function timedCount() {
document.getElementById('txt').value = c;
document.getElementById('cost').value = co;
c = c + 1;
co = c * 0.9;
t = setTimeout("timedCount()", 1000);
if (vid.ended) {
clearTimeout(t);
timer_is_on = 0;
}
}
</script>
</body>
</html>

Related

It doesn't move to the next image

I am trying to create a slideshow. I have created two buttons because I want to do it in two ways. One way is when I press the next button to move to the next image(single image movement) and when I press the slideshow button to make it move along with not pressing a button. I didn't manage to fix it. Please help me if you can.
var img = new Array();
img[0] = "https://images-na.ssl-images-amazon.com/images/I/5101NtSnx0L._AC_.jpg";
img[1] = "https://thumbor.forbes.com/thumbor/fit-in/1200x0/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5ecc17cdfd6d6700060f826c%2F0x0.jpg";
img[2] = "https://cdn.episode.ninja/file/episodeninja/4090819.jpg";
img[3] = "https://i.pinimg.com/564x/f0/e5/a9/f0e5a984f263b7ecb5c9cd26a493a115.jpg";
function Next() {
if (i < img.length - 1)
i++;
else
i = 0;
document.getElementById("img1").src = img[i];
}
startslideshow() {
id = window.setInterval("Next()", 1000);
var x = document.getElementById("txt").value;
id2 = window.clearTimeout("Cancel()", x * 1000)
}
<body>
<img id="img1" height="300" width="300" src="https://2.bp.blogspot.com/-ho7KT0UEARE/VPbiU-U_KSI/AAAAAAAALVM/iZdcRS6KHvQ/s1600/Acrobatty%2BBunny%2B-%2BRobert%2BMcKimson%2B(3).jpg" /> <br>
<button id="Next" onclick="Next()"> Next </button>
<button onclick="startslideshow()">startSlideShow</button>
</body>

here is the solution that we have came up with
<body>
<img id="img1" height="300" width="300" src="https://2.bp.blogspot.com/-ho7KT0UEARE/VPbiU-U_KSI/AAAAAAAALVM/iZdcRS6KHvQ/s1600/Acrobatty%2BBunny%2B-%2BRobert%2BMcKimson%2B(3).jpg" /> <br>
<button id="Next" onclick="Next()"> Next </button>
<button onclick="startslideshow()">startSlideShow</button>
<button onclick="stopslideshow()">stopSlideShow</button>
</body>
var img = new Array();
var cur = 0;
var timer = null;
img[0] = "https://images-na.ssl-images-amazon.com/images/I/5101NtSnx0L._AC_.jpg";
img[1] = "https://thumbor.forbes.com/thumbor/fit-in/1200x0/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5ecc17cdfd6d6700060f826c%2F0x0.jpg";
img[2] = "https://cdn.episode.ninja/file/episodeninja/4090819.jpg";
img[3] = "https://i.pinimg.com/564x/f0/e5/a9/f0e5a984f263b7ecb5c9cd26a493a115.jpg";
function Next() {
cur = (cur < img.length - 1) ? cur + 1 : 0;
document.getElementById("img1").src = img[cur];
}
function startslideshow() {
timer = setInterval(function() {
Next();
}, 500);
}
function stopslideshow() {
if (timer) {
clearInterval(timer);
timer = null;
}
}

Displaying hidden html buttons using JavaScript

Am trying to create a quiz but after the start page am un sure how to make the answer choices display. I have created the buttons for the choices in html and started them off as hidden, and have allocated for them in javascript. I have the questions and answers in an array but am stuck on displaying the choice buttons under the question. After the initial start page.
<div class="wrapper text-center">
<header>
<h1>Coding Quiz</h1>
</header>
<div class="card">
</div>
<div class="card-body">
<p id="header"> You have 75 seconds to complete this asessment. Every
incorrect answer will cost you time.
<br>
</p>
<button id="start-button" class="btn">Start</button>
<div id="start-game" style="visibility: hidden">
<button id="option0" data-index="0"></button><br>
<button id="option1" data-index="1"></button><br>
<button id="option2" data-index="2"></button><br>
<button id="option3" data-index="3"></button><br>
</div>
</div>
</div>
var timerEl = document.getElementById("timer");
var start = document.getElementById("start-button");
var questionEl = document.getElementById("header");
var option0 = document.getElementById("option0");
var option1 = document.getElementById("option1");
var option2 = document.getElementById("option2");
var option3 = document.getElementById("option3");
var intials = document.getElementById("user-initials");
var buttonEl = document.querySelector("start-game");
var totalTime = 75;
var elapsedTime = 0;
var questionNum = 0;
var questions =["The condition in an if/else statement is enclosed with in _______",
"Arrays in JavaScript can be used to store ______",
"Commonly used data types do not include ______",
"String values must be enclosed within _____ when being assigned to variables"];
var answers =[question1= ["Quotes","Curly brackets","Parentheses","Square brackets"],
question2= ["Numbers and strings","Other arrays","Booleans","All of the above"],
question3= ["Strings","Booleans","Alerts","Numbers"],
question4= ["Commas","Curly brackets","quotes","parentheses"]
];
var correctAnswers = [2,3,2,2];
start.addEventListener("click", function(){
timer();
displayQuestion();
start.style.visibility = "hidden";
buttonEl.style.visibility = "visible";
});
function timer(){
var timerInterval = setInterval(function(){
totalTime--;
timerEl.textContent = totalTime;
if(totalTime === 0){
function stopTimer(){
clearInterval(timerInterval);
endQuiz();
return;
}
}
}, 1000)
}
function newQuiz(){
questionEl.textContent = (questions[0]);
};
function decreaseTimer (){
timerEl.text(totalTime);
while(elapsedTime < 75){
elapesedTime += 1;
}
endQuiz();
totalTime = totalTime - elapsedTime;
timerEl.textContent = totalTime;
}
function displayQuestion(){
for( var i = 0; i < questions.length ; i++){
questionEl.textContent=(questions[i]);
option0.textContent=(answers[i][0]);
option1.textContent=(answers[i][1]);
option2.textContent=(answers[i][2]);
option3.textContent=(answers[i][3]);
}
}

var buttonEl = document.querySelector("start-game");
should be
var buttonEl = document.getElementById("start-game");
var timerEl = document.getElementById("timer");
var start = document.getElementById("start-button");
var questionEl = document.getElementById("header");
var option0 = document.getElementById("option0");
var option1 = document.getElementById("option1");
var option2 = document.getElementById("option2");
var option3 = document.getElementById("option3");
var intials = document.getElementById("user-initials");
var buttonEl = document.getElementById("start-game");
var totalTime = 75;
var elapsedTime = 0;
var questionNum = 0;
var questions =["The condition in an if/else statement is enclosed with in _______",
"Arrays in JavaScript can be used to store ______",
"Commonly used data types do not include ______",
"String values must be enclosed within _____ when being assigned to variables"];
var answers =[question1= ["Quotes","Curly brackets","Parentheses","Square brackets"],
question2= ["Numbers and strings","Other arrays","Booleans","All of the above"],
question3= ["Strings","Booleans","Alerts","Numbers"],
question4= ["Commas","Curly brackets","quotes","parentheses"]
];
var correctAnswers = [2,3,2,2];
start.addEventListener("click", function(){
timer();
displayQuestion();
start.style.visibility = "hidden";
buttonEl.style.visibility = "visible";
});
function timer(){
var timerInterval = setInterval(function(){
totalTime--;
timerEl.textContent = totalTime;
if(totalTime === 0){
function stopTimer(){
clearInterval(timerInterval);
endQuiz();
return;
}
}
}, 1000)
}
function newQuiz(){
questionEl.textContent = (questions[0]);
};
function decreaseTimer (){
timerEl.text(totalTime);
while(elapsedTime < 75){
elapesedTime += 1;
}
endQuiz();
totalTime = totalTime - elapsedTime;
timerEl.textContent = totalTime;
}
function displayQuestion(){
for( var i = 0; i < questions.length ; i++){
questionEl.textContent=(questions[i]);
option0.textContent=(answers[i][0]);
option1.textContent=(answers[i][1]);
option2.textContent=(answers[i][2]);
option3.textContent=(answers[i][3]);
}
}
<div class="wrapper text-center">
<header>
<h1>Coding Quiz</h1>
</header>
<div class="card">
</div>
<div class="card-body">
<p id="header"> You have 75 seconds to complete this asessment. Every
incorrect answer will cost you time.
<br>
</p>
<button id="start-button" class="btn">Start</button>
<div id="start-game" style="visibility: hidden">
<button id="option0" data-index="0"></button><br>
<button id="option1" data-index="1"></button><br>
<button id="option2" data-index="2"></button><br>
<button id="option3" data-index="3"></button><br>
</div>
</div>
</div>
<div id="timer"></div>

Unable to read value of dom element after populating it by Javascript

I have 2 javascript functions. One writes two values on the page and the second tries to read those values. The problem is that the second function is not able to read those values - it says "undefined".
the functions are:
<html>
<body onload="generate()">
<p>
<a type="number" id="first"></a>
<a>+</a>
<a type="number" id="second"></a>
<a>=</a>
<input type="number" id="result"></input>
<button id="submit" onclick="dosome()">Submit</button>
<p id="super"></p>
<script>
var press_flag ="no";
var press_flag ="no";
function generate()
{
var x = Math.round(Math.random()*100);
var y = Math.round(Math.random()*100);
document.getElementById("first").innerHTML = x;
document.getElementById("second").innerHTML = y;
var result = document.getElementById("result").value;
setTimeout(function () {
alert(press_flag);
if (press_flag == "yes")
{}
else
{
document.getElementById("submit").disabled = true;
var result = x+y;
document.getElementById("super").innerHTML = result;
}
}, 7000);
}
function dosome()
{
press_flag= "yes";
alert(document.getElementById("first").value);
var a = document.getElementById("first").value;
var b = document.getElementById("second").value;
var c = document.getElementById("result").value;
var resultfinal = Number(a) + Number(b);
if (c==resultfinal)
{
document.getElementById("super").innerHTML = "Superb my boy!";
}
}
</script>
</body>
</html>

It works for me,you can check it:
<!DOCTYPE html>
<html>
<body>
first:<br>
<input type="text" name="firstname" id="first"><br>
second:<br>
<input type="text" name="lastname" id="second">
<input type="text" value="result" id="result">
<input type="text" id="super">
<input type="submit" value="submit" id="submit" onclick="generate()">
<input type="submit" onclick="dosome()">
</body>
</html>
<script>
var press_flag ="no";
function generate()
{
var x = Math.round(Math.random()*100);
var y = Math.round(Math.random()*100);
document.getElementById("first").innerHTML = x;
document.getElementById("second").innerHTML = y;
var result = document.getElementById("result").value;
setTimeout(function () {
alert(press_flag);
if (press_flag == "yes")
{}
else
{
document.getElementById("submit").disabled = true;
var result = x+y;
document.getElementById("super").innerHTML = result;
}
}, 7000);
}
function dosome()
{
press_flag= "yes";
alert(document.getElementById("first").value);
var a = document.getElementById("first").value;
var b = document.getElementById("second").value;
var c = document.getElementById("result").value;
var resultfinal = Number(a) + Number(b);
if (c==resultfinal)
{
document.getElementById("super").innerHTML = "Superb my boy!";
}
}
</script>
It does not show any undefined.

Creating an HTML 5 audio player

I'm trying to build an html5/javascript mp3 player on my webpage but the site is playing no sound. I have the song in the root directory with my index.html file. Why is it when I hit play on the mp3 file, it doesn't play?
Heres my code:
index.html
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link href="menu_source/styles.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="music.js"></script>
<script>
var player;
var intv;
var slider;
window.onload = function () {
document.getElementById('btnPlay').addEventListener('click', playMusic, false);
document.getElementById('btnPause').addEventListener('click', btnPause, false);
document.getElementById('btnStop').addEventListener('click', btnStop, false);
document.getElementById('btnVolUp').addEventListener('click', , false);
document.getElementById('btnVolDown').addEventListener('click', volDown, false);
player = document.getElementById('player');
slider = document.getElementById('sliderTime');
slider.addEventListener('change', reposition, false);
getMusicList();
}
function reposition() {
player.currentTime = slider.value;
}
//Volume Controls
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);l
}
function stopMusic(){
player.pause();
player.currentTime = 0;
clearInterval(intv);
}
function getMusicList(){
var parser = new DOMParser();
xmlDocument = parser.parseFromString(xml, "
text / xml ");
var elementsArray = xmlDocument.documentElement.getElementsByTagName('composition');
var arrayLength = elementsArray.length;
var output = " < table > ";
for (var i = 0; i < arrayLength, i++){
var title = elementsArray[i].getElementsByTagName('title'[0].firstChild.nodeValue;
var composer = elementsArray[i].getElementsByTagName('composer')[0].firstChild.nodeValue;
var time = elementsArray[i].getElementsByTagName('time')[0].firstChild.nodeValue;
var fileName = elementsArray[i].getElementsByTagName('filename')[0].firstChild.nodeValue;
output += " < tr > ";
output += (" < td onclick = 'songSelect(\"" + fileName + "\")' > " + title + "
By: " + composer + " < /td>");
output += "</table > ";
document.getElementById('musicList').innerHTML = output;
}
function songSelect(fn){
//console.log(fn);
document.getElementById('player').src = fn;
playMusic();
}
</script>
</head>
<body>
<div class="row">
<div class="col-md-4">
<div id="logo2">
<div class="col-md-4">
<div ng-controller="logOut">
<div id="logOut1">
<button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
Logout
</button>
</div>
</div>
</div>
</div>
<script>
angular.module('myModule', ['ui.bootstrap']);
</script>
<script src="angular.min.js"></script>
<div id="content2">
<div id="audioPlayer">
<audio id="player">
<source src="SleepAway.mp3" />
<source src="SleepAway.ogg" />
</audio>
<button id="btnPlay">Play</button>
<button id="btnPause">Pause</button>
<button id="btnStop">Stop</button>
<button id="btnVolUp">Volume Up</button>
<button id="btnVolDown">Volume Down</button>
<span id="songTime"></span>
<br/>
<input id="sliderTime" type="range" min="0" value="0" />
<div id="musicList"></div>
</div>
</body>
</html>
main.js
<script type="text/javascript">
var audio = document.getElementById("player"),
play = document.getElementById("play"),
timer = document.getElementById("timer"),
update;
audio.addEventListener("click, PlayAudio, false);
play.addEventListener("
click, PlayAudio, false);
//play or pause audio
functon PlayAudio(e) {
e.preventDefault();
if (audio.paused) {
audio.play();
play.textContent = "Pause";
} else {
audio.pause();
play.textContent = "Play";
}
}
document.write("Hello World!");
</script>

var player = document.createElement('audio');
player.src = 'your_source_here.mp3';
player.controls = true;
document.body.appendChild(player);

Using PHP site to post javascript code and it translates the code, resulting code doesn't work

I have a php site that allows for javascript to be embeded. i have a function that won't work correctly in IE or chrome. Can you take a look at it and tell me if theres something wrong
<script language="javascript" type="text/javascript">
//<![CDATA[
var counting = 0;
var totaltime;
var audio;
var timeout;
var settimer = 0;
var haystack = "|";
var needle;
function start_playing(a,b){ haystack = haystack+a+"|";
needle = a;
audio = document.getElementById(b);counting = counting + 1.0; audio.play();
if(haystack.split(needle).length -1 >= 2){document.getElementById(a).value = "No Plays Left";
document.getElementById(a).disabled = true;}else{document.getElementById(a).value = "Playing";
document.getElementById(a).disabled = true;totaltime = Math.round(audio.duration)*1000;
timeout = setTimeout("enable_button('"+a+"')",totaltime);}}function enable_button(a) {document.getElementById(a).value ="Play"document.getElementById(a).disabled = false;}}
//]]>
</script>
<div>
<input id="PlayButton1" type="button" onclick="start_playing('PlayButton1','myTune1')" value="Play" /></div>
<audio id="myTune1" src="sound.mp3" type="audio/mp3"></audio>
what can be the issue?. its supposed to be clicked,turn disabled for the duration of the song,then enable itself. after the second play it will say no plays left.

I've revised your code. This should work
<script language="javascript" type="text/javascript">
//<![CDATA[
var counting = 0;
var totaltime;
var audio;
var timeout;
function start_playing(a,b){
audio = document.getElementById(b);
counting++;
audio.play();
if(counting == 2){
document.getElementById(a).value = "No Plays Left";
document.getElementById(a).disabled = true;
}else{
document.getElementById(a).value = "Playing";
document.getElementById(a).disabled = true;
totaltime = Math.round(audio.duration)*1000;
timeout = setTimeout("enable_button('"+a+"')",totaltime);
}
}
function enable_button(a){
document.getElementById(a).value = "Play";
document.getElementById(a).disabled = false;
}
//]]>
</script>
<div>
<input id="PlayButton1" type="button" onclick="start_playing('PlayButton1','myTune1')" value="Play" /></div>
<audio id="myTune1" src="sound.mp3" type="audio/mp3"></audio>
There are still unused variables though. Please format your code next time before submitting your answer.

Develop Reference

JavaScript is the programming language of the Web.

How to add custom seekbar in html5 video - javascript

Related

It doesn't move to the next image

Displaying hidden html buttons using JavaScript

Unable to read value of dom element after populating it by Javascript

Creating an HTML 5 audio player

Using PHP site to post javascript code and it translates the code, resulting code doesn't work

Categories

Resources