Audio and Video on the Web

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

1 HTML5 Audio and Video Credits: Dr. Jay Urbain

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.

Iframes & Images Using HTML.

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.

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.

Video, audio, embed, iframe, HTML Form

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

HTML Advanced: HTML 5. Welcome This slideshow presentation is designed to introduce you to HTML 5. It is the third of three HTML workshops available at.

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.

Computer Information System Information System California State University Los Angeles Jongwook Woo CIS 461 Web Development I HTML 5 Jongwook Woo, PhD.

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.

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

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 

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.

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.

Sound and the Web. Transferring sound Download Progressive Download Stream.

Adding Images to Your Web Page Web Design Section 5-7 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

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

Chapter 2 Markup Language By : Madam Hazwani binti Rahmat

Chapter 9 HTML 5 Video and Audio

HTML and Media More than just images.

HTML Advanced: HTML 5 With Adaptations by Dilvan Moreira.

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

Web System & Technology Course Code:CS-241 Credit Hours (3+1) Lab 7 HTML Multimedia Instructor: Muhammad Zeeshan Haider Ali Blog Address:

Chap 3. Audio/Video api.

Elements of HTML Web Design – Sec 3-2

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

HTML Advanced: HTML 5.

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

Learn HTML Basics Lesson No : 10

Essential Tags Web Design – Sec 3-3

Dive Into HTML5 - Start Using It Now! Mark Branom, Continuing Studies

Elements of HTML Web Design – Sec 3-2

Web Design and Development

Adding Images to Your Web Page

Tutorial 7 Working with Multimedia

HTML5 Level II Session II

Playing Audio (Part 2).

Audio and Video Chapter 10.

Essentials of Web Pages

Playing Video (Part 2).

Client-Side Internet and Web Programming

Insertimi i audiove/videove

Basic HTML and Embed Codes

Working with Multimedia

How to add audio and video to your website

HTML5 Audio & Video By Derek Peacock

Show your animation project. HTML5 video. Miro.

Presentation transcript:

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 and W3schools.com

Objectives The student will Understand how to use the <video> and <audio> elements in HTML5 Understand the video and audio file formats supported in HTML5 Use free tools to convert video and audio files for the web.

Audio and Video on the Web Until HTML5, there has not been a standard for showing a video/audio on a web page. Today, most sounds and videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins. HTML5 defines new elements which specifies a standard way to embed a audio/video on a web page: the <audio> and <video> elements.

Browser Support Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <audio> and <video> elements. Note: Internet Explorer 8 and earlier versions, do not support the <video> element.

Adding Audio and Video <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type='video/webm' > <source src="movie.ogg" type="video/ogg"> Your browser does not support video. </video> <audio controls> <source src=”audio.mp3" type="audio/mpeg"> <source src=”audio.wav" type="audio/wav"> <source src=”audio.ogg" type="audio/ogg"> Your browser does not support this audio format. </audio>

Video Elements The control attribute adds video controls, like play, pause, and volume. It is also a good idea to always include width and height attributes. If height and width are set, the space required for the video is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the video loads). You should also insert text content between the <video> and </video> tags for browsers that do not support the <video> element. The <video> element allows multiple <source> elements. <source> elements can link to different video files. The browser will use the first recognized format.

Example - Video <!DOCTYPE html> <html> <body style="background: RoyalBlue;"> <h1>Big Buck Bunny</h1> <video controls width=640 height=355> <source src="movie/movie.ogv" type='video/ogg; codecs="theora, vorbis"'/> <source src="movie/movie.webm" type='video/webm' > <source src="movie/movie.mp4" type='video/mp4'> <p>Video is not visible, most likely your browser does not support HTML5 video</p> </video> <br/> <p> Video courtesy of Big Buck Bunny. </p> </body> </html>

Video File Formats Video Formats and Browser Support Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg: MP4 = MPEG 4 files with H264 video codec and AAC audio codec WebM = WebM files with VP8 video codec and Vorbis audio codec Ogg = Ogg files with Theora video codec and Vorbis audio codec MIME Types for Video Formats

Preparing Videos for the Web There are free tools which allow you to convert videos to the formats required for HTML5. The tool I have chosen to use here is “Freemake Video Converter” Add the video Select “to HTML5” on the bottom and click convert. The result will be the various formats of the video and sample HTML5 code.

Audio Elements The control attribute adds audio controls, like play, pause, and volume. You should also insert text content between the <audio> and </audio> tags for browsers that do not support the <audio> element. The <audio> element allows multiple <source> elements. <source> elements can link to different audio files. The browser will use the first recognized format.

Example - Audio <!DOCTYPE html> <html> <body style="background: RoyalBlue;"> <h1>Green Day - Good Riddance</h1> <audio controls> <source src="audio/audio.mp3" type="audio/mpeg"> <source src="audio/audio.wav" type="audio/wav"> <source src="audio/audio.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> </body> </html>

Audio File Formats Audio Formats and Browser Support Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg: MIME Types for Audio Formats

Preparing Audio for the Web There are free tools which allow you to convert audio to the formats required for HTML5. The tool I have chosen to use here is “Freemake Audio Converter” Add the audio file Select MP3 and convert Repeat for OGG and WAV

Rest of Today Download Homework 5-12 from the Hancock website Complete Homework 5-12 by adding 1 video and 1 audio file to your web page This is the end of Graphics unit. Anything you want me to grade in this Unit must be shown to me by the end of class next time.

Example graphics.html File