Chapter 4: HTML5 Media - <video> & <audio>

Slides:

Advertisements

Similar presentations

What is Multimedia ? Multi ( Multiple ) and Media ! So…. Information in multiple formats, including text, images, audio, video and animation :) It makes.

Advertisements

HTML5, OVERVIEW AND NEW FEATURES PowerPoint by Mason O’Mara.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 17: Video, Audio, and Other MultiMedia.

More CSS - Page layout + HTML5 new features Boriana Koleva Room: C54

SHAREPOINT PAKISTAN USER GROUP #1 SHAREPOINT COMMUNITY IN PAKISTAN AND ASIA HTML5 and SharePoint 2013.

HTML 5 and CSS 3, Illustrated Complete Unit K: Incorporating Video and Audio.

Neal Stublen Pre-HTML5 Solutions  Audio and video were embedded in pages using plug-ins Apple Quicktime Microsoft Silverlight Adobe.

Video, audio, embed, iframe, HTML Form

INF Web Design Using Multimedia on the Web Video - Part 1.

HTML 5 Tutorial Chapter 1 Introduction. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML.

Chapter 15 HTML 5 Video and Audio Intro to HTML5 1.

Audio and Video on the Web Sec 5-12 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.

Session: 11. © Aptech Ltd. 2HTML5 Audio and Video / Session 11  Describe the need for multimedia in HTML5  List the supported media types in HTML5 

Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.

Video on the Web. The Evolution of web video formats… WebM (Supported by Google) Ogg (Supported by Theora) Mp4 (h264 video encoding) WebM (Supported by.

CHAPTER 18 INTEGRATING AUDIO AND VIDEO. LEARNING OBJECTIVES How the HTML 5 and tag pair can be used to include a video file within a webpage How video.

HTML5. What is HTML5? HTML5 will be the new standard for HTML. HTML5 is the next generation of HTML. HTML5 is still a work in progress. However, the major.

Using HTML 5.  HTML 5 uses a standard method to embed audio into Web pages.  Prior to HTML 5, browser plug-ins or separate applications such as Windows.

Computer Concepts 2014 Chapter 7 The Web and .

ACE-HIGH MP3 WAV WMA OGG Converter By :: Natharat Kaewrawang

Programming Games Show your cannonball. HTML5 video. Miro. Classwork/Homework: Acquire video, convert to multiple formats, and produce simple (just html)

HTML Advanced: HTML 5. Introduction to HTML 5 These slides are based on source material found at the w3schools.com website.

MIS 425 Lecture 3 – HTML 5 and CSS Instructor: Martin Neuhard

HTML Use of Multimedia on web page. HTML Media Q. How to call Image file in our web page ? A. That is the easy syntax for defining an image. 2.

Supplementary Materials on Web Authoring. Insert Anchors & Add Hyperlinks Insert other multimedia elements: Flash animations Video clips & Audio clips.

Indicator * File types vary based on: * Ability to compress sound * Ability to maintain sound quality * Universal or software dependent * Sound.

Unit 2 Module 6: HTML Video.  Use the tag  Use the for adding closed captions or other timed text  Why learn coding skills?  From the experts 

PLUG INS flash, quicktime, java applets, etc. Browser Plug-ins Netscape wanted a method to extend features of the browser became an unofficial standard.

HTML 5 Tutorial Chapter 3 Video. Video HTML 5.0 provides a standard for showing video. Using the element we can easily embed video within our web page.

Using Plug-Ins Adding Multimedia to an HTML Document.

CHAPTER 15 HTML 5 VIDEO AND AUDIO Intro to HTML5 1.

Chapter 11 Adding Media and Interactivity. Chapter 11 Lessons Introduction 1.Add and modify Flash objects 2.Add rollover images 3.Add behaviors 4.Add.

FLASH, VIDEO & AUDIO How to add Flash movies into your site How to add video and audio to your site HTML5 and elements.

Chapter 8 Adding Multimedia Content to Web Pages HTML5 & CSS 7 th Edition.

INT222 – Internet Fundamentals Week 8: Using New HTML features 1.

CHAPTER 8 Multimedia 1. Using Multimedia ❖ Multimedia: the combination of text, sound, and video to express an idea or convey a message. ❖ Podcasts: a.

M ULTIMEDIA ON THE W EB. Multimedia Purpose of Multimedia Multimedia Issues HTML5 and elements CSS Transitions and Animations Animation to avoid.

CHAPTER 10 AUDIO AND VIDEO. MEDIA PLAYER API HTML5 contains an API (Application Programming Interface) for controlling audio and video players embedded.

HTML Structure & syntax

Chapter 2 Markup Language By : Madam Hazwani binti Rahmat

Chapter 9 HTML 5 Video and Audio

Advanced HTML Tags:.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Section 9.1 Section 9.2 YOU WILL LEARN TO…

Section 9.1 Section 9.2 Identify multimedia design guidelines

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Chapter 9 HTML 5 Video and Audio

HOW FLASH WORKS The Flash authoring environment is used to create Flash movies The .fla file is exported to a format called .swf The .swf file is.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Chap 3. Audio/Video api.

Audio and Video on the Web

Learn HTML Basics Lesson No : 10

"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.

Web Design and Development

Tutorial 7 Working with Multimedia

HTML5 Level II Session II

Playing Audio (Part 2).

Audio and Video Chapter 10.

Essentials of Web Pages

Playing Audio (Part 1).

Playing Video (Part 2).

Client-Side Internet and Web Programming

Working with Multimedia

How to add audio and video to your website

Giuseppe Attardi Università di Pisa

Creating a Basic Web Page using HTML

HTML5 Audio & Video By Derek Peacock

Show your animation project. HTML5 video. Miro.

Presentation transcript:

Chapter 4: HTML5 Media - <video> & <audio> HTML5 Video Series Chapter 4: HTML5 Media - <video> & <audio>

Finally! HTML5 Video Series We finally have a simple way to include videos and audio clips in web pages Until now, we always needed to download plugins such as Flash to display videos in a web page. Now it is almost as simple as including an image HTML5 Video Series

Browser Support HTML5 Video Series The following browsers support HTML5 video an audio IE9+ Chrome 6+ Firefox 3.6+ Safari 5+ Opera 10.6+ HTML5 Video Series

Types of Media (MIME Types) HTML5 Video Series VIDEO Mp4 WebM Ogg AUDIO Mp3 Ogg Wav Note: There are many video converters available if you have a different format for your videos

Video Tags HTML5 Video Series <video> - Define a video <source> - Defines multiple sources for the video element <track> - Defines text tracks in media players Note: Javascript is needed for extra function and controls

Audio Tags HTML5 Video Series <video> - Define sound content <source> - Defines multiple sources for the audio element

Javascript Audio/Video Methods HTML5 Video Series addTextTrack() – Adds a new track canPlayType() – Checks if browser can play type load() - Re-loads the audio/video element play() - Starts playing the audio/video pause() - Pauses the playing audio/video

Lets Dive In! HTML5 Video Series Start Coding!