HTML5 MasterClass Using Video & Audio in HTML5

Name: HTML5 MasterClass Using Video & Audio in HTML5
Rating: 4.4 (21 reviews)

Learn how to take advantage of the new Video and Audio features in HTML5. A HTML5 MasterClass from Infinite Skills

Created byInfinite Skills

Last updated 1/2017

English

English [Auto],

What you'll learn

Learn how to take advantage of the new video and audio features in HTML5

Course content

5 sections • 27 lectures • 1h 59m total length

Important - Download These First - Working Files0:01
0101 What You Will Learn0:46
Learn to get HTML5 audio and video functioning across browsers and devices, exploring the tools and techniques needed to ensure multimedia works in diverse environments.
0103 Tools We Will Need6:11
Choose and configure a plain text editor, browsers, and free transcoding tools to prepare HTML5 video and audio work, using CC media from archives such as Big Buck Bunny.
0104 A Brief History Of How We Got Here3:17
Trace the evolution from Flash-based multimedia to HTML5 audio and video elements, highlighting the standardization, plugin-free playback, and broad browser compatibility across devices.
0105 Understanding Video Containers And Codecs4:07
Understand video containers mp4, webm, and ogg and how they hold video and audio tracks. See how h.264 and aac pair with mp4, and vp8 with webm.
0106 Understanding Audio Containers And Codecs2:13
Explore audio containers and codecs, including mp3 as a codec, and m4a, ogg, and wav, highlighting AAC, Vorbis, and PCM for web audio in HTML5.
0107 Current Browser Support for Audio And Video Formats6:02
Analyze current browser support for video and audio formats in HTML5, compare mp4 and webm with ogg, and test across browsers to ensure compatibility.
0108 How To Access Your Working Files2:45
Learn how to locate, copy, and access the course working files on your desktop from the dvd, extracted zip files, or the player, and save changes as you work.

0201 The Basics Of Inserting Video With HTML56:02
Learn to insert an html5 video using the video element, specify an mp4 source, enable controls, and test playback in a browser, with videos and audio organized.
0202 The Basics Of Inserting Audio With HTML52:15
Learn the basics of inserting audio in HTML5 alongside video, using the audio element with a linked mp3 file, the controls attribute, and simple demonstrations of spacing and fallback formats.
0203 Setting Media Playback Dimensions9:52
Set video and audio playback dimensions on a web page with width and height attributes and CSS sizing; understand inherent video dimensions and letterboxing.
0204 Setting Up Fallback Video Formats9:06
Test video playback across browsers and add fallback formats using multiple source elements. Include mp4, webm, and ogv with mime types, then verify across Chrome, Opera, Safari, and Firefox.
0205 Setting Up Fallback Audio Formats5:44
Set up robust audio fallbacks in HTML5 by adding multiple formats like mp3 and ogg with proper mime types, and test across browsers to ensure cross-device compatibility.
0206 Pre-Loading Your Web Videos7:24
Explore how pre-loading media in HTML5 video and audio works, using the preload attribute with none, auto, and metadata to balance bandwidth, timing, and initial dimensions.
0207 Muting Media2:30
Learn how the muted attribute mutes audio in video and audio elements, as a boolean toggle, and test across browsers since Safari may not support it.
0208 Using Autoplay With Your Videos1:45
Learn how to implement autoplay for videos and audio in HTML5, including using the autoplay attribute, testing across browsers, and noting that iOS disables autoplay by default to save bandwidth.
0209 Looping Media Playback1:15
Add the loop attribute to HTML5 video and audio to enable indefinite playback, demonstrated with a video; use with caution.
0210 Inserting Video Poster Frames3:34
Add a poster attribute to your video elements to display a branded poster image before playback, and set its size to match the video to prevent letterboxing.

0301 Providing Flash Fallback For Older Browsers5:35
Learn to provide a flash fallback for older browsers, using Adobe's flash media playback configurator to generate embed code, set video dimensions, controls, and test in ie8 and ie10.
0302 Fallback With Download Links4:26
Learn to implement optional download links for video and audio in HTML5, with multiple formats (mp4, webm, ogg) and CSS styling to create accessible fallbacks beneath the media.
0303 Adding Subtitles And Captions With The Track Element5:10
Add subtitles and captions to HTML5 video using the track element, linking a captions file with time codes, specifying language, and flagging a default track for browser playback.
0304 Mobile Playback With Responsive Video8:09
Learn to create responsive video by using a media attribute with multiple sources (mp4 and webm), set 100 percent width with CSS, and add a poster.
0305 Using Video Embed Builders5:43
Compare and apply two video embed builders—one with customizable controls and appearance and the lean back player—for embedding HTML5 video with configurable formats and embed code.

0401 Encoding MP4 Video With Handbrake3:58
Learn how to encode video and audio into mp4 and other formats using handbrake, including selecting presets, enabling web-optimized metadata, previewing, and choosing output locations.
0402 Encoding Ogg And WebM With Firefogg3:56
Use the free Firefox plugin to encode a source video into webm and ogg formats, selecting presets and saving the results to the desktop.
0403 Encoding Audio With VLC5:06
Enable audio encoding with the VLC media player using the export wizard to transcode audio to M4A and MP3, set the bitrate, and save the output to your desktop.

Requirements

PC or Mac

Description

This HTML5 Audio and Video training course from Infinite Skills teaches you the ins and outs of HTML5 video and audio. This course is designed for users that already have a basic understanding of HTML5.

You will start by learning how to embed media into your webpages using the latest HTML5 methods, as well as how to make use of a multitude of fallback formats, ensuring that your audio and video will work in a variety of scenarios and devices. This video tutorial will also teach you additional options for handling your media, including adding subtitles and captions, mobile playback with responsive video, and using video embed builders. Finally, you will learn how to encode your files to ensure reliable playback on a variety of devices.

Once you have completed this computer based training course, you will be fully capable of incorporating media on your website using HTML5. Working files are included, allowing you to follow along with the author throughout the lessons.

Who this course is for:

Web Designers and Web Developers

HTML5 MasterClass Using Video & Audio in HTML5

What you'll learn

Explore related topics

Course content

Getting Started With Audio And Video8 lectures • 25min

Adding Audio And Video To Our Web Projects10 lectures • 49min

Additional Options For Handling Media5 lectures • 29min

Encoding Media For HTML5 Projects3 lectures • 13min

Wrapping Up1 lecture • 3min

Requirements

Description

Who this course is for: