Class on May 8 2019
Publishing a visual analysis with image(s) and animation
Students performed an in-class hands-on assignment via the tutorial below:
Videos can be included in an HTML layout through the VIDEO element which was new to HTML5. Before HTML5, videos were embedded through an EMBED element or an OBJECT element (which came from Microsoft's Internet Explorer lineage). Three videos are included below as well as an IMG element and an IFRAME element (also embedding a video), where the IFRAME uses embellishments from last class' example.
You can copy and paste the HTML code below and create a new document. The CSS code and JavaScript code is included through internal document methods.
Students played with the above code, inserting text and other content to make the page more attractive and more informational. Other videos avialable for use include:
The following result was created by one student team applying suggested techniques during class time:
Students performed an in-class hands-on assignment via the tutorial below:
Videos can be included in an HTML layout through the VIDEO element which was new to HTML5. Before HTML5, videos were embedded through an EMBED element or an OBJECT element (which came from Microsoft's Internet Explorer lineage). Three videos are included below as well as an IMG element and an IFRAME element (also embedding a video), where the IFRAME uses embellishments from last class' example.
You can copy and paste the HTML code below and create a new document. The CSS code and JavaScript code is included through internal document methods.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Presentation Example</title>
<style>
<style>
#wrap { position:relative; top:100px; width:800px; height:720px; padding:0; overflow:hidden; }
#frame { width:1000px; height:880px; border:1px solid black;
margin-left:0px;margin-top:-28px}
#frame {
transform: scale(0.60);
transform-origin: 0 0;
-webkit-transform: scale(0.60);
-webkit-transform-origin: 0 0;
}
</style>
</style>
</head>
<body>
<!-- HTML5 video element examples -->
<video width="800" id="global" style="position:relative;z-index:2" controls>
<source src="../web1216/class/Global_Internal_Tides.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<video width="800" height="654" id="aleutian" style="position:relative;z-index:2" controls>
<source src="../web1216/class/Aleutian_Internal_Tides.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<video width="600" id="new_zealand" style="position:relative;z-index:2" controls>
<source src="../web1216/class/NewZealand_Internal_Tides.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<img src="../web1216/class/Zhao_etal_16supp.jpg" width = "1000" />
<div id="wrap">
<iframe src="http://blackfish.cs.brown.edu/InternalTides.mp4"
id="frame" frameborder="0" scrolling="no">
This is content to show when the link is either broken or the browser can't
do iframes.
</iframe>
</div>
<script>
var global = document.getElementById('global');
if (typeof global.loop == 'boolean') { // loop supported
global.loop = true;
} else { // for browsers where loop property not supported
global.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);
}
var aleutian = document.getElementById('aleutian');
if (typeof aleutian.loop == 'boolean') { // loop supported
aleutian.loop = true;
} else { // for browsers where loop property not supported
aleutian.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);
}
var new_zealand = document.getElementById('new_zealand');
if (typeof new_zealand.loop == 'boolean') { // loop supported
new_zealand.loop = true;
} else { // for browsers where loop property not supported
new_zealand.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);
}
//To play the video automatically if browser permits it (uncomment next line):
//global.play();
</script>
</body>
</html>
The page renders in a browser as can be seen here (as long as the browser has a reasonable width — otherwise the content may wrap differently):
Students played with the above code, inserting text and other content to make the page more attractive and more informational. Other videos avialable for use include:
- ../web1216/class/Atlantic_Internal_Tides.mp4
- ../web1216/class/East_Indian_Ocean_Internal_Waves.mp4
- ../web1216/class/NorthPacific_Internal_Tides.mp4
- ../web1216/class/SouthPacific_Internal_Tides.mp4
- ../web1216/class/West_Indian_Internal_Tides.mp4
The following result was created by one student team applying suggested techniques during class time:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Presentation Example</title>
<style>
body {
margin: 75px 75px 75px 75px;
background: #ffffdd;
}
video, img, div {
position: absolute;
}
#atlantic {
top: 124px;
left: 40px;
}
#aleutian {
top: 124px;
left: 844px;
}
#new_zealand {
top: 915px;
left: 40px;
width: 800px;
}
img {
top: 1610px;
left: 40px;
width: 1600px;
}
#wrap { top:892px; left:844px; width:800px; height:646px; padding:0; overflow:hidden; }
#frame { width:1000px; height:880px; border:1px solid black;
margin-left:0px;margin-top:-28px}
.frame {
transform: scale(0.60);
transform-origin: 0 0;
-webkit-transform: scale(0.60);
-webkit-transform-origin: 0 0;
}
#atl_header {
position: absolute;
top: 40px;
left: 120px;
font-size: 36pt;
}
#aleut_header {
position: absolute;
width: 600px;
top: 40px;
left: 920px;
font-size: 36pt;
}
#nz_header {
position: absolute;
top: 815px;
left: 120px;
font-size: 36pt;
}
#indian_header {
position: absolute;
width: 700px;
top: 815px;
left: 920px;
font-size: 36pt;
}
.place {
color: red;
font-weight: bold;
}
#img_header {
position: absolute;
top: 1572px;
left: 44px;
width: 1600px;
font-size: 32px;
}
</style>
</head>
<body>
<p id="atl_header"><span
class="place">Atlantic</span> Internal (M2) Tides</p>
<p id="aleut_header"><span
class="place">Aleutian</span> Internal (M2) Tides</p>
<p id="nz_header"><span
class="place">New Zealand</span> Internal (M2) Tides</p>
<p id="indian_header"><span
class="place">West Indian</span> Internal (M2) Tides</p>
<span id="img_header">Zhao et al. (2016) supplemental image of
global internal (M2) tides: </span>
<!-- HTML5 video element examples -->
<video width="800" height="654" id="atlantic" controls>
<source src="../web1216/class/Atlantic_Internal_Tides.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<video width="800" height="654" id="aleutian" controls>
<source src="../web1216/class/Aleutian_Internal_Tides.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<video width="600" id="new_zealand" controls>
<source src="../web1216/class/NewZealand_Internal_Tides.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<img src="../web1216/class/Zhao_etal_16supp.jpg" width = "1000" />
<div id="wrap">
<iframe src="../web1216/class/West_Indian_Internal_Tides.mp4"
id="frame" frameborder="0" scrolling="no">
This is content to show when the link is either broken or the browser can't
do iframes.
</iframe>
</div>
<script>
var atlantic = document.getElementById('atlantic');
if (typeof atlantic.loop == 'boolean') { // loop supported
atlantic.loop = true;
} else { // for browsers where loop property not supported
atlantic.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);
}
var aleutian = document.getElementById('aleutian');
if (typeof aleutian.loop == 'boolean') { // loop supported
aleutian.loop = true;
} else { // for browsers where loop property not supported
aleutian.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);
}
var new_zealand = document.getElementById('new_zealand');
if (typeof new_zealand.loop == 'boolean') { // loop supported
new_zealand.loop = true;
} else { // for browsers where loop property not supported
new_zealand.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);
}
//To play the video automatically if browser permits it (uncomment next line):
//global.play();
</script>
</body>
</html>
Rendering as:
