Open Video Workbook - Archived April 29th
- Introduction
- Overview
- How to Use the Open Video Workbook
- Help Create More Open Video Modules
- Subtitling
- Terms & Techniques: Subtitling
- Case Study: Into the Fire
- Hands-On: Creating Subtitles with Amara
- Resources: Subtitling
- Creating a DVD
- Case Study: Straight-to-DVD Distribution
- Hands-On: DVD Authoring
- Resources: DVDs and Free Software
- Online Distribution
- Case Study: Engage Media
- Hands-On: Uploading a Video with Plumi
- Resources: Online Video Distribution
- Create an Open Video file
- Terms & Techniques: Open Video Files
- Hands-On: Creating Open Video Files with FireFogg
- Hands-On: Creating Open Video Files with Miro Converter
- Resources: Making the Case for Open Video
- Expanding Web Video
- Terms & Techniques: Expanding Web Video
- Case Study: Popcorn Maker
- Hands-On: Popcorn Maker Tutorial
- Hands-On: Crafting your own Popcorn Maker experience
- Hands-On: Matching Events in Popcorn Maker and Popcorn.js
- Case Study: Popcorn.js
- Hands-On: Getting started with visual content in HTML
- Hands-On: Including video in HTML5
- Hands-On: Adding a time-based footnote with popcorn.js
- Resources: Taking Popcorn Further
- Projection
- Terms & Techniques: Video Projection
- Case Study: Projection
- Hands-On: Video Projection Mapping with LPMT
- Resources: Projection
- Editing Video
- Case Study: Video Editing for The Record
- Hands-On: Editing an Interview with Kdenlive
- Transcoding and Video Codecs
- Hands-On: Transcoding Files with FFmpeg
- Hands-On: Using a Graphical User Interface vs Command Line
- Streaming
- Hands-On: Streaming Video with VLC
- Resources: Streaming
- Resources: Open Video Codecs
- Train the Trainer
- Teaching Open Video
- Appendix
- About the Open Video Workbook
- Outlook: The Politics of Code
- Glossary
Hands on - Including video in HTML5
Objective
Learn how to include video in a web page the open standard way with HTML5
Background: <video> in HTML5
The possibility to include images via the <img> tag in HTML pages was added in 1993. Many years later, discussions started about adding video support, which have now resulted in the <video> tag as part of HTML5. HTML5 is a set of new tags and functions for HTML that has been in active development since 2008 [http://en.wikipedia.org/wiki/Html5]. Open-source web browsers were the first to explore running audio and video on their own, inside new <audio> and <video> tags. This makes it possible to access and edit the media directly, make your page interact with the video, create different-shaped frames, and many other cool tricks.
Once you have video files that are ready to go online (find out more about encoding for web here [http://diveintohtml5.info/video.html#video-codecs]), you can include them via the <video> tag in your HTML5 page like so:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my first web page, featuring an image.</p>
<video height="180" width="300" id="ourvideo" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv">
</video>
</body>
</html>
Task
Have a look at the this page at: http://jsbin.com/agecem/latest and hit 'Edit in JS Bin' again to access the source. See how the <video> tag has the attributes "height" and "width", set to 180 and 300 pixels respectively? Change the values between quotes to modify the dimensions of the video element. Try making the video twice the size. Got it showing up correctly in the preview on the right? Cool! You are getting in control of your video the HTML5 way!