Скачать презентацию Digital Media Primer Yue-Ling Wong Copyright c 2016 by Скачать презентацию Digital Media Primer Yue-Ling Wong Copyright c 2016 by

1224959f7979954ee88afe19e78805f8.ppt

  • Количество слайдов: 37

"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. 1

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

In this lecture, you will learn: • Using HTML 5 video and audio vs. In this lecture, you will learn: • Using HTML 5 video and audio vs. traditional methods of adding video and audio on Web pages • How to use

Traditional methods of adding video and audio on Web pages vs. HTML 5 <video> Traditional methods of adding video and audio on Web pages vs. HTML 5

Effects on User Experience • HTML 5 Video and Audio – Each Web browser Effects on User Experience • HTML 5 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-HTML 5 – The same plug-in or external application has the same interface across Web browsers © 2016 Pearson Education, Inc. , Hoboken, NJ. All rights reserved. 5

Screenshot of Video Player: Firefox current time total time Controller: Overlaid on the video; 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. 6

Screenshot of Video Player: Chrome current time Controller: Overlaid on the video; appears when 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. 7

Screenshot of Video Player: IE current time audio volume Controller: Overlaid on the video; 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. 8

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

Use of <video> Tag The simplest form of <video> tag to add an HTML Use of

Use of <audio> Tag The simplest form of <audio> tag to add an HTML Use of

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

HTML 5 Audio Formats • WAV: . wav • OGG Vorbis: . ogg, . HTML 5 Audio Formats • WAV: . wav • OGG Vorbis: . ogg, . oga • MP 3: . mp 3 • AAC: . m 4 a © 2016 Pearson Education, Inc. , Hoboken, NJ. All rights reserved. 13

Browser Support for HTML 5 Video Firefox Safari IE Chrome Opera H. 264 MPEG/AVC Browser Support for HTML 5 Video Firefox Safari IE Chrome Opera H. 264 MPEG/AVC 33+ 3. 0+ 9. 0+ Yes, but will discontinue support OGG Web. M 3. 5+ 4. 0+ 5. 0+ 6. 0+ 10. 5+ 10. 6+ Note: • Latest Firefox supports all three video formats © 2016 Pearson Education, Inc. , Hoboken, • H. 264 MPEG/AVC is supported by almost all browsers NJ. All rights reserved. 14

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

Dealing with Browser Support Scenario #1: Not all browsers and browser versions support HTML Dealing with Browser Support Scenario #1: Not all browsers and browser versions support HTML 5 video and audio Add a text display as fallback: e. g. :

Your browser does not support HTML 5 video.

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

Dealing with Browser Support Scenario #2: A browser supports HTML 5 video and audio, Dealing with Browser Support Scenario #2: A browser supports HTML 5 video and audio, but only certain HTML 5 video formats Use a source list: e. g. :

Your browser does not support HTML 5 video.

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

Source List Example for Audio <audio controls> <source src= Source List Example for Audio

Your browser does not support HTML 5 audio.

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

<source> Tag • To provide multiple video or audio sources for different browsers • Tag • To provide multiple video or audio sources for different browsers • General Syntax: • A list of is placed within in the

Your browser does not support HTML 5 video.

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

Preloading a Media • Add preload attribute • 3 possible values: – none The 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 i. OS 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. 20

" src="http://present5.com/presentation/1224959f7979954ee88afe19e78805f8/image-21.jpg" alt="Preloading a Media Example:

Your browser does not support HTML 5 video.

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

Setting Autoplay • Attribute: autoplay • Value: None; simply add the attribute to the 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:

Your browser does not support HTML 5 video.

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

Setting the Media to Loop • Attribute: loop • Value: None; simply add the 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:

Your browser does not support HTML 5 video.

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

Setting Width and Height for Video • Attribute: width, height • Value: in number Setting Width and Height for Video • Attribute: width, height • Value: in number of pixels • Apply to video only • Example:

Your browser does not support HTML 5 video.

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

Combined Use of Attributes • These attributes can be used together • Example: <video Combined Use of Attributes • These attributes can be used together • Example:

Your browser does not support HTML 5 video.

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

Setting Width of Controller for Audio • Use Cascading Style Sheets (CSS) • Best 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:

Your browser does not support HTML 5 audio.

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

Setting Poster Image • Poster image: An image that is shown in place of 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:

Your browser does not support HTML 5 video.

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

If you don't set the width and height in <video>, what is going to If you don't set the width and height in

Without Setting Width and Height Scenario If a poster image is set What will Without Setting Width and Height Scenario If a poster image is set What will be displayed before the video starts to play Show the poster image using its width and height No poster image and preload • Show the first frame of the is enabled 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 © 2016 Pearson Education, Inc. , Hoboken, to play (load) the video 29 NJ. All rights reserved.

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

If Width and Height Actual Video Frame Size • The video will be scaled 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. 31

Review Questions Note to instructor: Depending on your preference, you may want to go 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. 32

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

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

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

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

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