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.

Slides:



Advertisements
Similar presentations
The Web Wizards Guide to HTML Chapter Five Working with Images.
Advertisements

What is Multimedia ? Multi ( Multiple ) and Media ! So…. Information in multiple formats, including text, images, audio, video and animation :) It makes.
1 HTML5 Audio and Video Credits: Dr. Jay Urbain
HTML5 Media API.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 17: Video, Audio, and Other MultiMedia.
HTML 5 and CSS 3, Illustrated Complete Unit K: Incorporating Video and Audio.
© De Montfort University, Synchronised Presentations using Windows Media Howell Istance School of Computing De Montfort University.
Neal Stublen Course Road Map  Create web page layouts using CSS  Manage CSS  Test website validity  Create navigation menus using.
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
Windows Azure 4/15/2017 Building media streaming apps and sites without plug-ins using MPEG-DASH Daniel Schneider Senior Lead Program Manager, Microsoft.
Project Opal Multimedia Module. Image quality Difference in quality between image processing of pre-load image derivatives to the auto generate derivatives.
INF Web Design Using Multimedia on the Web Video - Part 1.
Including images with the img tag Skills: using the img tag IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial-
Including images in Web pages Skills: use the tag IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike.
Tutorial 7 Working with Multimedia. XP Objectives Explore various multimedia applications on the Web Learn about sound file formats and properties Embed.
 Video and Audio Files can be played online just by selecting them  Video are flash files and will not work with Quicktime (Apple) or Windows Media.
© 2010 Delmar, Cengage Learning Chapter 6: Preparing and Publishing Movies.
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 
© 2011 Delmar, Cengage Learning Chapter 11 Adding Media and Interactivity with Flash and Spry.
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.
E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language.
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.
Multimedia and Web Technology Prepared by: Asst. Prof. Maryam Eskandari.
HTML Links and Anchors.
Tutorial 7 Working with Multimedia. XP Introducing Multimedia Bandwidth is a measure of the amount of data that can be sent through a communication pipeline.
CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Adding Sound.
Programming Games Show your cannonball. HTML5 video. Miro. Classwork/Homework: Acquire video, convert to multiple formats, and produce simple (just html)
CSCE Chapter 5 (Links, Images, & Multimedia) CSCE General Applications Programming Benito Mendoza 1 By Benito Mendoza Department.
Tutorial 7 Working with Multimedia. XP Objectives Explore various multimedia applications on the Web Learn about sound file formats and properties Embed.
Multimedia Web Design Professor Frank. Multimedia Combine text, graphics, sounds, and moving images in meaningful ways Use stable technology.
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.
Tutorial 7 Working with Multimedia
Tutorial 7 Designing a Multimedia Web Site
Tutorial 7 Working with Multimedia. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Explore various multimedia applications.
Tutorial 7 Working with Multimedia. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Explore various multimedia applications.
How to embed a video into a power point if you do not have internet access. You will need to download the video to your computer or a flash drive. Drag.
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.
Multimedia: Audio and Video Kyle Hawver. BGSOUND element Should be placed in the HEAD section of the HTML document Has 4 key properties: – SRC – URL of.
Using Plug-Ins Adding Multimedia to an HTML Document.
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.
Stream Hoster Upload Video
HTML Images Dr. Baker Abdalahq. The Image Tag and the Src Attribute In HTML, images are defined with the tag. In HTML, images are defined with the tag.
Embedding Multimedia in Web Pages  Multimedia is a popular buzzword for sound, motion video, and interactive animation.  Some problems or obstacles.
HTML JAVASCRIPT. CONTENTS Javascript Example NOSCRIPT Tag Advantages Summary Exercise.
HTML IMAGES. CONTENTS IMG Tag Alt Attribute Setting Width and Height Of An Image Summary Exercise.
1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer Science & Mathematics, Universiti Teknologi.
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.
DE streaming & Google Earth. Your History Class?
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.
CHAPTER 10 AUDIO AND VIDEO. MEDIA PLAYER API HTML5 contains an API (Application Programming Interface) for controlling audio and video players embedded.
© 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.
Chapter 4: HTML5 Media - <video> & <audio>
Web Design and Development
Tutorial 7 Working with Multimedia
HTML5 Level II Session II
Playing Audio (Part 1).
Playing Video (Part 1).
Client-Side Internet and Web Programming
Basic HTML and Embed Codes
How to add audio and video to your website
Pertemuan 1b
Show your animation project. HTML5 video. Miro.
Presentation transcript:

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 page to use Flash, Quicktime, Windows Media, … to play the thing HTML5 supplies simple audio / video support through the and tags Both work similarly

Slide 3 Limitations It’s still client-side You cannot use these tags to stream video There is NO copy protection It’s not adaptive

Slide 4 The element the element plays an audio file Use the src attribute to reference the audio file to play Use the controls attribute to include playback controls The preload attribute preloads the audio file before playing Values metadata, none, auto

Slide 5 The Element Works much like the element The poster attribute displays an image while the video is loading