Part 2: (Video & Audio) 1) In the html file you created in part 1, similar to th
ID: 3667349 • Letter: P
Question
Part 2: (Video & Audio)
1) In the html file you created in part 1, similar to the example we had in the lecture (Posted on Black Board too), you need to create a similar group of buttons to control a video file [2]. First you have to add the html code to include the video file. The buttons should perform the following tasks, from left to right:
1- Stop button: when clicked, the video will stop and go to the beginning.
2- Pause button: when clicked, the video will pause.
3- Backward button: when clicked, the video will go backward 5 seconds.
4- Play button: when clicked the video will play.
5- Forward button: when clicked, the video will go forward 5 seconds.
6- End button: when clicked, the video will end.
2) In this part you need to control the audio that the video has.
Please add the following:
1- Volume increase button
2- Volume decrease button 3- Volume mute button
Notes:
For part 2, you will be writing the html code to create the buttons and the JavaScript code needed to perform the control part
Explanation / Answer
<html>
<head>
<script type="text/javascript">
function vidplay() {
var video = document.getElementById("Video1");
if (video.paused) {
video.play();
}
}
function vidpause(){
var video = document.getElementById("Video1");
if(video.play){
video.pause();
}
}
function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;
}
function end() {
var video = document.getElementById("Video1");
video.currentTime = 0;
video.pause();
}
function skip(value) {
var video = document.getElementById("Video1");
video.currentTime += value;
}
function vidmute(){
var vid = document.getElementById("Video1");
if(vid.muted){
vid.muted = false;
mutebtn.innerHTML = "Mute";
} else {
vid.muted = true;
mutebtn.innerHTML = "Unmute";
}
}
function incvolume(){
var vid = document.getElementById("Video1");
vid.volume += 0.1;
}
function decvolume(){
var vid = document.getElementById("Video1");
vid.volume -= 0.1;
}
</script>
</head>
<body>
<video id="Video1" >
// Replace these with your own video files.
<source src="demo.mp4" type="video/mp4" />
</video>
<div id="buttonbar">
<button id="restart">stop(restart)</button>
<button id="pause">pause</button>
<button id="rew">backword</button>
<button id="play">play</button>
<button id="fastFwd">forward</button>
<button id="end">end</button>
<button id="incvolume">inc volume</button>
<button id="decvolume">dec volume</button>
<button id="mute">mute</button>
</div>
</body>
</httml>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.