FREELessons: 31Length: 2.7 hours
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
1.1Introduction01:28
1.1
Introduction
01:28
1.2What You Need00:32
1.2
What You Need
00:32
2.Creating a Media File
2.1What is a Codec?06:31
2.1
What is a Codec?
06:31
2.2The Importance of Bitrate05:27
2.2
The Importance of Bitrate
05:27
2.3Using Miro Converter06:23
2.3
Using Miro Converter
06:23
2.4Using Handbrake07:09
2.4
Using Handbrake
07:09
2.5Using Firefogg04:54
2.5
Using Firefogg
04:54
2.6Using QuickTime Pro 704:47
2.6
Using QuickTime Pro 7
04:47
2.7Using Adobe Media Encoder06:50
2.7
Using Adobe Media Encoder
06:50
3.Playing a Media File
3.1Using The “Video” Element09:13
3.1
Using The “Video” Element
09:13
3.2Using The “Audio” Element04:54
3.2
Using The “Audio” Element
04:54
3.3Supporting Multiple Formats04:27
3.3
Supporting Multiple Formats
04:27
3.4Preloading Audio and Video03:48
3.4
Preloading Audio and Video
03:48
3.5Use and Abuse of Autoplay03:29
3.5
Use and Abuse of Autoplay
03:29
3.6Creating and Using Poster Frames03:04
3.6
Creating and Using Poster Frames
03:04
3.7Using The “Type” Attribute04:36
3.7
Using The “Type” Attribute
04:36
4.Playing With Video
4.1Add Drop Shadows and Borders06:08
4.1
Add Drop Shadows and Borders
06:08
4.2Wrap Text Around a Video04:13
4.2
Wrap Text Around a Video
04:13
4.3Playing With Opacity04:45
4.3
Playing With Opacity
04:45
4.4Add a Gradient05:48
4.4
Add a Gradient
05:48
4.5Create Full Page Background Video06:00
4.5
Create Full Page Background Video
06:00
4.6Rotate Video05:23
4.6
Rotate Video
05:23
4.7Video in Motion11:40
4.7
Video in Motion
11:40
5.Alternative Players
5.1Embed YouTube Video Into a Web Page05:39
5.1
Embed YouTube Video Into a Web Page
05:39
5.2Embed Vimeo Content Into a Web Page04:25
5.2
Embed Vimeo Content Into a Web Page
04:25
5.3Use the JW Player08:37
5.3
Use the JW Player
08:37
5.4Use Video.js05:16
5.4
Use Video.js
05:16
6.Making Video Accessible
6.1Add a Transcript04:24
6.1
Add a Transcript
04:24
6.2Add an Interactive Transcript04:33
6.2
Add an Interactive Transcript
04:33
6.3Use the “Track” Element to Add Subtitles05:17
6.3
Use the “Track” Element to Add Subtitles
05:17
7.Conclusion
7.1Conclusion00:12
7.1
Conclusion
00:12
