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

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

Chapter 15 HTML 5 Video and Audio Intro to HTML5 “Computers and Creativity” Richard D. Webster, COSC 109 Instructor Office: 7800 York Road, Room 422 |

Chapter 11 Media and Interactivity Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

Using Multimedia on the Web Enhancing a Web Site with Sound, Video, and Applets.

CNIT 132 – Week 9 Multimedia. Working with Multimedia Bandwidth is a measure of the amount of data that can be sent through a communication pipeline each.

Chapter 11 Media and Interactivity Basics Key Concepts

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

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.

UNIT K: INCORPORATING VIDEO AND AUDIO 1 Encoding: the process of transforming moving image and/or sound into a digital file. Each encoding method known.

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

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.

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.

HTML5 Audio and Video. Slide 2 History Playing audio and video used to be something of a novelty You would embed a control (with the element) into your.

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.

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

HTML 5. Introduction In modern browsers, adding a video to your page is as easy as adding an image. No longer do you need to deal with special plug-ins.

2 If aliens came to this solar system and observed humans over the last several years, what would they think is the most significant benefits of the.

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.

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

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

Chapter 9 HTML 5 Video and Audio

Advanced HTML Tags:.

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

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

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

Using Multimedia on the Web

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.

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

CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr

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

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

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

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

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.

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

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

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).

Playing Video (Part 1).

Client-Side Internet and Web Programming

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

Basics of Web Design Chapter 11 Media and Interactivity Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D.

How to add audio and video to your website

Web Programming– UFCFB Lecture 8

HTML5 Audio & Video By Derek Peacock

Show your animation project. HTML5 video. Miro.

Presentation transcript:

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

Chapter 9 HTML 5 Video and Audio Part 1 HTML5 Video and Audio © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

In this lecture, you will learn: Using HTML5 video and audio vs. traditional methods of adding video and audio on Web pages How to use <video> and <audio> tags to add HTML5 video and audio to Web pages What source list is and how to set up a source list To use the attributes for preloading, autoplay, looping, width, height, and poster image for the media © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Traditional methods of adding video and audio on Web pages vs. HTML5 <video> and <audio> Key difference: What applications play the media Traditional method (non-HTML5): browser plug-in (such as Flash Player and QuickTime) or external application (such as QuickTime player) Using HTML5 <video> and <audio>: browser's built-in player © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Effects on User Experience HTML5 Video and Audio Each Web browser may support different features of video and audio playback Each Web browser has its own visual design of the player controller Traditional non-HTML5 The same plug-in or external application has the same interface across Web browsers © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Screenshot of Video Player: Firefox current time total time Controller: Overlaid on the video; appears when mouse over the video © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Screenshot of Video Player: Chrome current time Controller: Overlaid on the video; appears when mouse over the video © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Screenshot of Video Player: IE current time audio volume Controller: Overlaid on the video; appears when mouse over the video © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Screenshot of Video Player: Safari current time full screen © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Controller: Added at the bottom; always showing

Use of <video> Tag The simplest form of <video> tag to add an HTML5 video on a Web page: <video src="demo.ogv" controls> source attribute file path of the media controls attribute: to show the controller © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Use of <audio> Tag The simplest form of <audio> tag to add an HTML5 audio on a Web page: <audio src="demo.oga" controls> source attribute file path of the media controls attribute: to show the controller © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. HTML 5 Video Formats H.264 MPEG-4/AVC: .mp4 OGG: .ogg, .ogv WebM: .webm © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. HTML 5 Audio Formats WAV: .wav OGG Vorbis: .ogg, .oga MP3: .mp3 AAC: .m4a © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Browser Support for HTML 5 Video H.264 MPEG/AVC OGG WebM Firefox 33+ 3.5+ 4.0+ Safari 3.0+ IE 9.0+ Chrome Yes, but will discontinue support 5.0+ 6.0+ Opera 10.5+ 10.6+ Note: Latest Firefox supports all three video formats H.264 MPEG/AVC is supported by almost all browsers © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Browser Support for HTML 5 Audio WAV OGG Vorbis MP3 AAC Firefox x Safari IE Chrome Opera Note: No one browser supports all four audio formats No one audio format is supported by all browsers © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Dealing with Browser Support Scenario #1: Not all browsers and browser versions support HTML5 video and audio Add a text display as fallback: e.g.: <video src="demo.ogv" controls> <p>Your browser does not support HTML5 video.</p> </video> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Dealing with Browser Support Scenario #2: A browser supports HTML5 video and audio, but only certain HTML5 video formats Use a source list: e.g.: <video controls> <source src="demo.mp4" type="video/mp4" /> <source src="demo.webm" type="video/webm" /> <source src="demo.ogv" type="video/ogg" /> <p>Your browser does not support HTML5 video.</p> </video> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Source List Example for Audio <audio controls> <source src="demo.m4a" type="audio/mp4" /> <source src="demo.oga" type="audio/ogg" /> <source src="demo.mp3" type="audio/mp3" /> <source src="demo.wav" type="audio/wav" /> <p>Your browser does not support HTML5 audio.</p> </aduio> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. <source> Tag To provide multiple video or audio sources for different browsers General Syntax: <source src="filePath" type="mediaType" /> A list of <source> is placed within in the <video> or <audio> content Example: <video controls> <source src="demo.mp4" type="video/mp4" /> <source src="demo.webm" type="video/webm" /> <source src="demo.ogv" type="video/ogg" /> <p>Your browser does not support HTML5 video.</p> </video> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Preloading a Media Add preload attribute 3 possible values: none The Web browser will not start loading the media until the user clicks the play button. auto The Web browser will decide whether the media will be preloaded. Example: On Apple iOS devices, the browser will not preload the media. metadata The Web browser will preload only the metadata of the media, such as duration, frame size, and the first frame of the video © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Preloading a Media Example: <video controls preload="auto"> <source src="demo.mp4" type="video/mp4" /> <source src="demo.webm" type="video/webm" /> <source src="demo.ogv" type="video/ogg" /> <p>Your browser does not support HTML5 video.</p> </video> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Setting Autoplay Attribute: autoplay Value: None; simply add the attribute to the tag The video or audio automatically starts playing as soon as it has been loaded Example: <video controls preload="auto" autoplay> <source src="demo.mp4" type="video/mp4" /> <source src="demo.webm" type="video/webm" /> <source src="demo.ogv" type="video/ogg" /> <p>Your browser does not support HTML5 video.</p> </video> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Setting the Media to Loop Attribute: loop Value: None; simply add the attribute to the tag The video or audio automatically starts over after it has reached the end Example: <video controls preload="auto" loop> <source src="demo.mp4" type="video/mp4" /> <source src="demo.webm" type="video/webm" /> <source src="demo.ogv" type="video/ogg" /> <p>Your browser does not support HTML5 video.</p> </video> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Setting Width and Height for Video Attribute: width, height Value: in number of pixels Apply to video only Example: <video controls preload="auto" width="480" height="320"> <source src="demo.mp4" type="video/mp4" /> <source src="demo.webm" type="video/webm" /> <source src="demo.ogv" type="video/ogg" /> <p>Your browser does not support HTML5 video.</p> </video> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Combined Use of Attributes These attributes can be used together Example: <video controls preload="auto" autoplay loop width="480" height="320"> <source src="demo.mp4" type="video/mp4" /> <source src="demo.webm" type="video/webm" /> <source src="demo.ogv" type="video/ogg" /> <p>Your browser does not support HTML5 video.</p> </video> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Setting Width of Controller for Audio Use Cascading Style Sheets (CSS) Best practice: use external style sheet For sake of simplicity, example shown here uses inline style: <audio controls style="width:480px;"> <source src="demo.m4a" type="audio/mp4" /> <source src="demo.oga" type="audio/ogg" /> <source src="demo.mp3" type="audio/mp3" /> <source src="demo.wav" type="audio/wav" /> <p>Your browser does not support HTML5 audio.</p> </aduio> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Setting Poster Image Poster image: An image that is shown in place of the video before the video starts Attribute: poster Value: the file path of the image file Example: <video controls preload="none" poster="demo-poster.png"> <source src="demo.mp4" type="video/mp4" /> <source src="demo.webm" type="video/webm" /> <source src="demo.ogv" type="video/ogg" /> <p>Your browser does not support HTML5 video.</p> </video> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. If you don't set the width and height in <video>, what is going to be displayed before the video is loaded? © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Without Setting Width and Height Scenario What will be displayed before the video starts to play If a poster image is set Show the poster image using its width and height No poster image and preload is enabled Show the first frame of the video The size of the video player matches the actual video frame size No poster image and no preload Video player appears blank The size of the video player does not match the actual video frame size until the user clicks to play (load) the video © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

What if the width and height do not match the actual video frame? © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

If Width and Height  Actual Video Frame Size The video will be scaled such that its frame aspect ratio is maintained Example: If the width attribute is set too wide: the video will be scaled such that it fills the player vertically leave empty space on the left and right sides © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Questions Note to instructor: Depending on your preference, you may want to go over the review questions at the end of this lecture as an instant review or at the beginning of next lecture to refresh students' memory of this lecture. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question To provide multiple video or audio sources for different browsers, ___. use the preload attribute use the controls attribute use the autoplay attribute use the loop attribute use the poster attribute set up a source list using <source> elements F © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question To display an image in place of the video before it starts, ___. use the preload attribute use the controls attribute use the autoplay attribute use the loop attribute use the poster attribute set up a source list using <source> elements E © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question To display the controller for the video or audio, ___. use the preload attribute use the controls attribute use the autoplay attribute use the loop attribute use the poster attribute set up a source list using <source> elements B © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question If there are multiple videos on a page, you should avoid turning on ___ to reduce network traffic. use the preload attribute use the controls attribute use the autoplay attribute use the loop attribute use the poster attribute set up a source list using <source> elements A © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question A poster image is an image that is shown in place of the video ___. before an HTML5 video starts as a fallback for browsers that do not support HTML5 video A © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.