Understanding Video on the Web

Tom GreenDec 12, 2014Lessons: 31Length: 2.7 hours

Video HTML5 CSS Post-Production Compression Codecs Bitrate Video Formats Transcription

Next lesson playing in 5 seconds

Cancel

Understanding Video on the Web

Introduction

01:28

With the introduction of video and audio elements into HTML5, both have become key design features in many web projects. This course, designed for those you who are new to the subject, covers the fundamentals of creating, adding and manipulating video in an HTML5 web page. By the end of this course you will:

Understand how to create an mp4, webm and ogg file for inclusion in a web page.
Use a variety of HTML5 elements and attributes to add video and audio files to a web page.
Use CSS to control positioning and create some rather interesting effects.
Discover alternate methods for the inclusion and playback of video in a web page.
Learn how to make video and audio accessible to those with physical and cognitive disabilities.

1.Introduction
2 lessons, 02:00

1.1
Introduction
01:28

1.2
What You Need
00:32

2.Creating a Media File
7 lessons, 42:01

2.1
What is a Codec?
06:31

2.2
The Importance of Bitrate
05:27

2.3
Using Miro Converter
06:23

2.4
Using Handbrake
07:09

2.5
Using Firefogg
04:54

2.6
Using QuickTime Pro 7
04:47

2.7
Using Adobe Media Encoder
06:50

3.Playing a Media File
7 lessons, 33:31

3.1
Using The “Video” Element
09:13

3.2
Using The “Audio” Element
04:54

3.3
Supporting Multiple Formats
04:27

3.4
Preloading Audio and Video
03:48

3.5
Use and Abuse of Autoplay
03:29

3.6
Creating and Using Poster Frames
03:04

3.7
Using The “Type” Attribute
04:36

4.Playing With Video
7 lessons, 43:57

4.1
Add Drop Shadows and Borders
06:08

4.2
Wrap Text Around a Video
04:13

4.3
Playing With Opacity
04:45

4.4
Add a Gradient
05:48

4.5
Create Full Page Background Video
06:00

4.6
Rotate Video
05:23

4.7
Video in Motion
11:40

5.Alternative Players
4 lessons, 23:57

5.1
Embed YouTube Video Into a Web Page
05:39

5.2
Embed Vimeo Content Into a Web Page
04:25

5.3
Use the JW Player
08:37

5.4
Use Video.js
05:16

6.Making Video Accessible
3 lessons, 14:14

6.1
Add a Transcript
04:24

6.2
Add an Interactive Transcript
04:33

6.3
Use the “Track” Element to Add Subtitles
05:17

7.Conclusion
1 lesson, 00:12

7.1
Conclusion
00:12

Tom Green

Tom is a professor of Interactive Multimedia through the Humber Institute of Technology and Advanced Learning’s School of Media Studies. Like all faculty in the program, Tom believes his students deserve to be taught by instructors who are regarded as experts in their field and whose knowledge of their subject is current with industry best practice.

Understanding Video on the Web

Next lesson playing in 5 seconds

Understanding Video on the Web

Introduction

1.Introduction2 lessons, 02:00

2.Creating a Media File7 lessons, 42:01

3.Playing a Media File7 lessons, 33:31

4.Playing With Video7 lessons, 43:57

5.Alternative Players4 lessons, 23:57

6.Making Video Accessible3 lessons, 14:14

7.Conclusion1 lesson, 00:12

1.Introduction
2 lessons, 02:00

2.Creating a Media File
7 lessons, 42:01

3.Playing a Media File
7 lessons, 33:31

4.Playing With Video
7 lessons, 43:57

5.Alternative Players
4 lessons, 23:57

6.Making Video Accessible
3 lessons, 14:14

7.Conclusion
1 lesson, 00:12