Menu
<!DOCTYPE html>
<html>
<head>
<title>Ezra’s Schulik HTML5 Multimedia Assignment 14: Final</title>
<link rel= “stylesheet” type= “text/css” href= “ezrav2+final.css” />
</head>
<body>
<h1>Ezra’s Schulik HTML5 Multimedia Assignment 14: Final</h1>
<h2>The sound in the background is music</h2>
<p>It plays because it is supported by MP3, OGV, and WAV files</p>
<p>Its controls are based on attitional HTML scripture</p>
<h4>playing: Rock The House (Instrumental Ver.) – Gorillaz (feat. Del tha Funky Homosapien)</h4>
<audio id=”RockTheHouseGorillaz” autoplay loop>
<source src=”audio/rockthahouse.mp3″ type=”audio/mpeg” /><!–Crossbrowser Formats–>
<source src=”audio/rockthahouse.ogg” type=”audio/ogg” /><!–Crossbrowser Formats–>
<source src=”audio/rockthahouse.wav” type=”audio/wav” /><!–Crossbrowser Formats–>
</audio>
<div align=”center”>
<button type=”button” onclick=”GorillazPlays()” type=”button”>▶</button><!–Custom Controls–>
<button type=”button” onclick=”GorillazPauses()” type=”button”>⏸</button><!–Custom Controls–>
<button type=”button” onclick=”GorillazStops()” type=”button”>⏹</button><!–Custom Controls–>
<button type=”button” onclick=”GorillazQuiets()” type=”button”>❌</button><!–Custom Controls–>
<button type=”button” onclick=”GorillazLoudens()” type=”button”>❕</button><!–Custom Controls–>
</div>
<script>
var music = document.getElementById(“RockTheHouseGorillaz”);
function GorillazPlays() {
RockTheHouseGorillaz.play();
};
function GorillazPauses() {
RockTheHouseGorillaz.pause();
};
function GorillazQuiets() {
RockTheHouseGorillaz.muted = true;
}
function GorillazLoudens(){
RockTheHouseGorillaz.muted = false;
}
function GorillazStops() {
GorillazPauses();
RockTheHouseGorillaz.currentTime = 0;
};
</script>
<h2>This is a video</h2>
<p>It plays because it is supported by MP4, OGV, and WEBM files</p>
<p>Its controls are based on attitional HTML scripture</p>
<p>It shows a style because of CSS detailing</p>
<div align=”center”>
<video controls id=”RejectedVideo” width=”350″ height=”270″ poster=”video/rejected.jpg” tabindex=”0″>>
<source src=”video/rejected.mp4″/><!–Crossbrowser Formats–>
<source src=”video/rejected.ogv”/><!–Crossbrowser Formats–>
<source src=”video/rejected.webm”/><!–Crossbrowser Formats–>
<iframe width=”350″ height=”270″ src=”
</video>
</div>
<div align=”center”>
<button type=”button” onclick=”RejectedPlays()” type=”button”>▶</button><!–Custom Controls–>
<button type=”button” onclick=”RejectedPauses()” type=”button”>⏸</button><!–Custom Controls–>
<button type=”button” onclick=”RejectedStops()” type=”button”>⏹</button><!–Custom Controls–>
<button type=”button” onclick=”RejectedQuiets()” type=”button”>❌</button><!–Custom Controls–>
<button type=”button” onclick=”RejectedLoudens()” type=”button”>❕</button><!–Custom Controls–>
</div>
<script>
var vid = document.getElementById(“RejectedVideo”);
function RejectedPlays(){
vid.play();
};
function RejectedPauses(){
vid.pause ();
};
function RejectedQuiets() {
vid.muted = true;
}
function RejectedLoudens(){
vid.muted = false;
}
function RejectedStops(){
RejectedPauses();
vid.currentTime=0;
};
</script>
<br>
<p>Oh hey! who are you guys?!?
<div align=”center”>
<svg width=”700″ height=”100″>
<rect width=”700″ height=”100″/>
<text x=”50″ y=”60″ font-weight=”bold” fill=”gray” font-size=”35″>I am a SVG (Scaleable Vector Graphic)</text>
</svg>
</div>
<div align=”center”>
<canvas id=”myCanvas” width=”700″ height=”100″ style=”border: 3px solid cyan;”>
</canvas>
</div>
<script>
var canvas = document.getElementById(“myCanvas”);
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “grey”;
ctx.font = “35px Futura-Medium”;
ctx.fillText(“I am a Canvas”, 253, 60);
</script>
<p>How are you two different?</p>
<div align=”center”>
<svg width=”700″ height=”100″>
<rect width=”700″ height=”100″/>
<text x=”93″ y=”60″ font-weight=”bold” fill=”gray” font-size=”25″>I use an included tag to create my appearance</text>
</svg>
</div>
<div align=”center”>
<canvas id=”myCanvas2″ width=”700″ height=”100″ style=”border: 3px solid cyan;”>
</canvas>
</div>
<script>
var canvas = document.getElementById(“myCanvas2”);
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “grey”;
ctx.font = “35px Futura-Medium”;
ctx.fillText(“I use a seperate script for creating mine”, 85, 60);
</script>
</body>
<footer>
<h4>© EzRA Schulik Fall 2019, HTML5 Multimedia</h4>
</footer>
</html>