HTML5 Video Gallery and Video Enlargement with ECMAScript
Designing a Video Gallery – Part 1
Foreword: In this part of the series I explain how to place HTML5 video elements in a regular fashion (rows and columns) in a web page; I also explain how to enlarge and restore the video sizes using ECMAScript.
By: Chrysanthus Date Published: 29 Mar 2016
Introduction
Browsers and HTML5
Today, a video will normally play in a browser with the help of some plugin; this causes incompatibility. However, videos that can play in the HTML5 video tag, in new desktop browsers today, without plugin, have the extensions, .ogv (Ogg) and . webm . Mobile device browsers would use .mp4 and .3gp (without plugin).
HTML5 Elements and Arrangement
Each video goes into a figure element. A figure element is by default, a block-level element. Unfortunately a figure element extends from the left end of its containing block to the right end of the containing block. In order for the figure element to have a short length and be in a horizontal line (along with other elements), you have to give it the CSS display of inline-block.
Each figure element should have a figcaption element within. The figcaption element has the caption (title) of the video.
It is good for the video resources to have the same width and same height, at the server.
With this model, you just type the figure elements in a line; type the <br> element, then type the same number of figure elements in the next line; then <br>, same number of figure elements, and so on. In that way you end up with an arrangement of rows and columns.
In the following code, there are four figure elements, two in a row. The video resource files are in the same directory as the main HTML document. Read and try the code:
<!DOCTYPE HTML>
<html>
<head><title>Sample</title>
</head>
<body>
<h1>Title of Gallery</h1>
<article>
<figure style="display:inline-block"><video src="small.ogv" width=200px controls autoplay></video><br><figcaption>Caption 1</figcaption></figure>
<figure style="display:inline-block"><video src="small.webm" width=200px controls autoplay></video><br><figcaption>Caption 2</figcaption></figure>
<br>
<figure style="display:inline-block"><video src="small.ogv" width=200px controls autoplay></video><br><figcaption>Caption 3</figcaption></figure>
<figure style="display:inline-block"><video src="small.webm" width=200px controls autoplay></video><br><figcaption>Caption 4</figcaption></figure>
</article>
</body>
</html>
- For each figure element, you use the same video from the same source.
- You use two different video tags for this same video, and the two different tags are coded on the same place in the HTML document.
- One video tag has the smaller dimension and the other has the bigger dimension. Only the width (without the height) for each dimension is coded.
- The smaller dimension is the default dimension, which is shown initially; and the bigger dimension is not shown (initially).
- The video tag for the bigger dimension is typed in front of the tag for the smaller dimension.
- When a particular mouse even occurs on the smaller dimension, the bigger dimension is shown to cover the smaller dimension.
- When a particular mouse even occurs on the bigger dimension, it is removed and the smaller dimension is shown.
<!DOCTYPE HTML>
<html>
<head><title>Sample</title>
<style type="text/css">
video.large {width:500px; display:none; position:absolute; z-index:2}
video.small {width:200px}
</style>
<script type="text/ecmascript">
var size = "small"
function maxRest(ID)
{
if (size == "small")
{
document.getElementById(ID).style.display = "inline";
size = "big";
}
else
{
document.getElementById(ID).style.display = "none";
size = "small";
}
}
</script>
</head>
<body>
<h1>Title of Gallery</h1>
<article>
<figure style="display:inline-block"><video src="small.ogv" id="I1A" onmouseleave="maxRest('I1A')" class="large" controls autoplay></video><video src="small.ogv" id="I1B" onmouseenter="maxRest('I1A')" class="small" controls autoplay></video><figcaption>Caption 1</figcaption></figure>
<figure style="display:inline-block"><video src="small.webm" id="I2A" onmouseleave="maxRest('I2A')" class="large" controls autoplay></video><video src="small.webm" id="I2B" onmouseenter="maxRest('I2A')" class="small" controls autoplay></video><figcaption>Caption 2</figcaption></figure>
<br>
<figure style="display:inline-block"><video src="small.ogv" id="I3A" onmouseleave="maxRest('I3A')" class="large" controls autoplay></video><video src="small.ogv" id="I3B" onmouseenter="maxRest('I3A')" class="small" controls autoplay></video><figcaption>Caption 3</figcaption></figure>
<figure style="display:inline-block"><video src="small.webm" id="I4A" onmouseleave="maxRest('I4A')" class="large" controls autoplay></video><video src="small.webm" id="I4B" onmouseenter="maxRest('I4A')" class="small" controls autoplay></video><figcaption>Caption 4</figcaption></figure>
</article>
</body>
</html>
Resolution
The video element at the large size should not be higher in resolution (pixels) than the video element at the server, otherwise there would be lost of resolution for the large video.
That is it for this part of the series.
Chrys
Related Links
Surrounding a Web Page Image with TextAdvantages and Disadvantages of HTML Table for Layout
Layout Without Frames for the Web Page
Designing Iconic Hyperlink for a Web Page
A Suitable RWD Layout for Smartphones and Desktop
Knowing the Resolutions of Visitor Screens with ECMAScript
Enlarge and Reduce HTML Image with ECMAScript
HTML5 Image Gallery and Image Enlargement with ECMAScript
Designing a Video Gallery
Ajax Web Technology Explained
Perl Course
MySQL Course
Using the PurePerl MySQL API
Drawing Bar Chart in HTML Canvas
Drawing Pie Chart in HTML Canvas
HTML Canvas 2D Context
More Related Links
PurePerl MySQL API
Web Development Course
Major in Website Design
Producing a Pure Perl Library