Provides a rich set of media features in easy-to-use APIs Allows you to build cutting-edge apps with advanced media functionality taking full advantage.

Slides:



Advertisements
Similar presentations
W3C Media Pipeline TF Requirements November 1-4, 2011.
Advertisements

W3C Media Pipeline TF Requirements November 1-4, 2011.
W3C Media Pipeline TF Requirements November 1-4, 2011.
FormatIEFirefoxOperaChromeSafari OggNo No MPEG 49.0+No WebMNo No FormatIE 9Firefox 3.5Opera 10.5 Chrome 3.0 Safari.
Bring Life to Your Web Pages with JavaScript and HTML5 Part 2 Ole Ildsgaard Hougaard -
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.
HTML5 Media API.
Audacity: a step-by-step tutorial Presented by: Terry W. Hoffland.
Exceptional Digital signage Solutions
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 17: Video, Audio, and Other MultiMedia.
Understanding Mobile App Development Concepts and Working with APIs Lesson 6.
Group 8: Dylan Lentini (AE), Mandy Minuti (WSE), Jean Paul Galea (TL)
Will Law | Chief Media Architect | Akamai Optimizing the Black Box of HTML.
HTML 5 and CSS 3, Illustrated Complete Unit K: Incorporating Video and Audio.
The Real Time Streaming Protocol (RTSP)
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.
HTML5 Application Development Fundamentals
Never miss a moment! Photosequence in Windows 8.1 Preview. Building an app using Capture APIs. Camera controls in Windows 8.1 Preview. Adding custom.
Windows Azure 4/15/2017 Building media streaming apps and sites without plug-ins using MPEG-DASH Daniel Schneider Senior Lead Program Manager, Microsoft.
Private cloudFrameworksClientsPublic cloud Microsoft ® Media Platform Video Editor Content Manager Microsoft ® Media Platform Player Framework Microsoft.
DIS Multimedia Productions Flash Video Streaming June 5, 2007.
School of Computer Science & Information Technology G6DPMM - Lecture 18 Synchronized Multimedia Integration Language (SMIL)
XML To this point, we’ve pretty much ignored or brushed over the use of xml What is xml? – xml is eXtensible Markup Language – it is a metalanguage for.
Bartosz Kowalski Software Developer CERN. Presentation outline -HTML : introduction and history -HTML5 : -History and philosophy -New features -Structure.
Integrating media playback on embedded devices. DTG HTML5 workshop, London, 3 rd July 2015.
Advanced Windows 8 Apps Using JavaScript Jump Start Exam Prep Advanced Windows 8 Apps Using JavaScript Jeremy Foster Microsoft Developer Evangelist.
Flash Video Flash ActionScript 3.0 Introduction to Thomas Lövgren, Flash developer
Session: 11. © Aptech Ltd. 2HTML5 Audio and Video / Session 11  Describe the need for multimedia in HTML5  List the supported media types in HTML5 
Creating apps that use video and audio
Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.
Sen Wang 11/17/2011.  RFC  “Form-based File Upload in HTML” NOV 1995 
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.
HTML 5 New Standardization of HTML. I NTRODUCTION HTML5 is The New HTML Standard, New Elements New Attributes Full CSS3 Support Video and Audio 2D/3D.
Multimedia and Web Technology Prepared by: Asst. Prof. Maryam Eskandari.
Eyeblaster Video Enhancements for RMP 6.1. Agenda Video Enhancements Goals Main features and Creative Process Flash Video Components Bandwidth Optimization.
Building the User Interface by Using HTML5: Text, Graphics, and Media Lesson 2.
Execution Environment for JavaScript " Java Script Window object represents the window in which the browser displays documents. " The Window object provides.
Audio and Video CGS Some Common Audio Formats Format Use Extension MIDI instrumental music.mid MPEG songs.mp3 RealAudio live broadcasts.ra Wave.
What is WebDemo? WebDemo is a web-based, real time collaboration tool that provides a simple way for a presenter to deliver online presentations and to.
Getting Started with Canvas IDIA Spring 2013 Bridget M. Blodgett.
Windows Media Format. The key features of Windows Media Format Included Microsoft Windows Media Video/Audio 9 codec Included Microsoft Windows Media Video/Audio.
Creating Multimedia Interaction with Windows Media Technologies 7.
Developing the Game User Interface (UI) Lesson 5.
Your Metro style app, video and audio, Part 1
London April 2005 London April 2005 Creating Video Ads The Rich Media Platform The Rich Media Platform Eyeblaster.
Code for touch, get mouse and pen for free Pointer API captures pen motion, passing coordinates to Ink API Ink API helps render and stores motion.
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.
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.
CLUE Overview and Architecture IETF 82 CLUE ad hoc meeting Allyn Romanow
California State University, LA Presented by Amanda Steven StevenAamirObaid.
CHAPTER 8 Multimedia 1. Using Multimedia ❖ Multimedia: the combination of text, sound, and video to express an idea or convey a message. ❖ Podcasts: a.
What is HTML5? HTML5 will be the new standard for HTML. The previous version of HTML, HTML 4.01, came in The web has changed a lot since then. HTML5.
Martin Kruliš by Martin Kruliš (v1.1)1.
Animations & Multimedia LESSON 9 #2.09 USING ANIMATION AND MULTIMEDIA.
Internet of the Past.
Chap 3. Audio/Video api.
Media fundamentals of a communications app
HTML5 Level II Session II
Reaching more customers with accessible Metro style apps using HTML5
Integrating Multimedia: Sound, Video and More
Integrating with the Windows Device Experience
Playing Audio (Part 1).
Playing Video (Part 1).
Client-Side Internet and Web Programming
Building a great Metro style device app for your camera
Presentation transcript:

Provides a rich set of media features in easy-to-use APIs Allows you to build cutting-edge apps with advanced media functionality taking full advantage of the power of Windows, and fully use hardware support Allows you to plug in your custom components where you need them

Media Foundation Windows Metro style app Playback/Previe w Audio/Video Source Audio/Video Source Video Decoder Video Decoder Video Effect 1 Video Effect 1 Video Encoder Video Encoder Video Effect 2 Video Effect 2 Audio/Video Sink Audio/Video Sink Audio Decoder Audio Decoder Audio Effect 1 Audio Effect 1 Audio Encoder Audio Encoder Audio Effect 2 Audio Effect 2 Windows Runtime Capture Streaming Transcode Extensibility MediaControl Protection Windows Audio Session API (WASAPI)DirectX Capture Extensibility MediaControl Protection Transcode Streaming Windows Runtime

W3C Definitions of Video and Audio Tags Defined in W3C (DRAFT) spec Inherits HTMLElement, so can be combined with CSS properties, JavaScript functions, and DOM events to create rich media experiences Select methods and attributes play() pause() load() audioTracks readyState controls currentTime duration error src playbackRate preload volume …

abort canplay canplaythrough durationchange emptied ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeking seeked suspend stalled timeupdate volumechange waiting HTML VIDEO TAG EVENTS

function populateLanguageSelect() { var video = document.getElementById("video"); var languageSelect = document.getElementById("languageSelect"); for (var i = 0; i < video.audioTracks.length; i++) { var option = document.createElement("option"); option.text = video.audioTracks.getLanguage(i); option.value = i; languageSelect.appendChild(option); if (video.audioTracks.isEnabled(i)) { languageSelect.selectedIndex = i; } languageSelect.addEventListener("change", function () { for (var i = 0; i < video.audioTracks.length; i++) { if (languageSelect.selectedIndex == i) { video.audioTracks.enable(i) } else { video.audioTracks.disable(i) } }); }

function setBookmark() { var video = document.getElementById("video"); var bookmarks = document.getElementById(“bookmarks"); var canvas = document.createElement("canvas"); bookmarks.appendChild(canvas); canvas.width = 120; canvas.height = video.offsetHeight * (120 / video.offsetWidth); var drawContext = canvas.getContext('2d'); drawContext.drawImage(video, 0, 0, canvas.width, canvas.height); var currentTime = video.currentTime; canvas.onclick = function () { video.currentTime = currentTime; video.play(); }; }

Media Foundation Windows Metro style app Playback/Preview Audio/Video Source Audio/Video Source Video Decoder Video Decoder Video Effect 1 Video Effect 1 Video Encoder Video Encoder Video Effect N Video Effect N Audio/Video Sink Audio/Video Sink Audio Decoder Audio Decoder Audio Effect 1 Audio Effect 1 Audio Encoder Audio Encoder Audio Effect N Audio Effect N Windows Runtime Capture Streaming Transcode Extensibility Media Control Protection Windows Audio Session API (WASAPI)DirectX

Media stream types (msAudioCategory) Stream TypePurpose Other All media that does not need background playback capability (e.g. a video ad in you application) Media General media requiring background playback: Local music playlists, streaming audio, YouTube, Pandora, etc. Communications Communications streams that require background capability: Voice over IP, real time chat, video conference call --- (sets msRealtime for low latency and sets msAudioDeviceType to “ Communications ”) Alerts Alarm, ring tones – sounds that will mute or attenuate existing audio. GameMedia Background music in a game or other non-effects game sounds. SoundEffects GameEffects Short duration sound effects in the foreground (gun shots, explosions), sounds that will mix with background audio. Narration Audio book, or radio narration type audio that requires background capability.

<!-- package.appxmanifest --> … <Extension Category="windows.backgroundTasks" StartPage="default.html">

<!-- Attributes allowed on tags: src, preload, autoplay, loop, and controls --> <!-- Attributes allowed on tags: src, preload, autoplay, loop, controls, poster, width, height, muted -->

Note: the msAudioCategory attribute cannot be changed dynamically. But an audio/video tag can be created dynamically. Make sure that you set the src after the msAudioCategory attribute var playerDiv = document.getElementById("player"); var audio = document.createElement("audio"); audio.setAttribute("msAudioCategory", "Media"); audio.src = "/folk_rock.mp3"; audio.controls = true; playerDiv.appendChild(audio);

// Registering for media focus events to pause playback as you app loses focus var mediaControl = Windows.Media.Devices.MediaControl; mediaControl.addEventListener("mediafocuslost", focusLost, false); mediaControl.addEventListener("mediafocusreceived", focusReceived, false); // usually, you will also subscribe to suspend/resume events // in order to save state var app = Windows.UI.WebUI.WebUIApplication app.addEventListener("suspending", appSuspending, false); app.addEventListener("resuming", appResuming, false);

Media Buttons var mediaControl = Windows.Media.Devices.MediaControl; mediaControl.addEventListener("playpausetoggleselected", playpauseHandler, false); mediaControl.addEventListener("playselected", playHandler, false); mediaControl.addEventListener("pauseselected", pauseHandler, false); MediaControl exposes events associated with media buttons Buttons can be found on keyboards, remote controls, Bluetooth headsets Actions are mapped to media consumption, TV, and recording functionality Play, Pause, Fast Forward, Rewind, Next/Previous Track, Record, Channel Down, Channel Up

Stereo3D via the Video Tag Use Windows.Graphics.DisplayProperties.StereoEnabled to query whether Stereo is enabled on the Metro screen On to video element msIsStereo3D : Tells you whether the current src is detected as Stereo 3D content by Windows msStereo3DRenderMode : by default on mono, set to stereo to switch on stereo3D rendering msStereo3DPackingMode : If Windows cannot detect the packing mode, set this to either topbottom or sidebyside. none means the content is 2D. Windows relies on H.264 SEI messages to extract the 3D metadata Stereo3D support is not present in the Windows Developer Preview

var myVideo = document.getElementById("videoTag1"); if(Windows.Graphics.DisplayProperties.StereoEnabled && myVideo.msIsStereo3D && myVideo.msIsLayoutOptimalForPlayback) { myVideo.msStereo3DRenderMode="stereo"; myVideo.play(); }

Media Foundation Windows Metro style app Playback/Previe w Audio/Video Source Audio/Video Source Video Decoder Video Decoder Video Effect 1 Video Effect 1 Video Encoder Video Encoder Video Effect 2 Video Effect 2 Audio/Video Sink Audio/Video Sink Audio Decoder Audio Decoder Audio Effect 1 Audio Effect 1 Audio Encoder Audio Encoder Audio Effect 2 Audio Effect 2 Windows Runtime Capture Streaming Transcode Extensibility MediaControl Protection Windows Audio Session API (WASAPI)DirectX ByteStream Handler 1. Register DLL with extensions in App manifest

public void RegisterAudioDecoder(string activatableClassId, System.Guid inputSubtype, System.Guid outputSubtype) public void RegisterAudioEncoder(string activatableClassId, System.Guid inputSubtype, System.Guid outputSubtype) public void RegisterByteStreamHandler(string activatableClassId, string fileExtension, string mimeType) public void RegisterSchemeHandler(string activatableClassId, string scheme) public void RegisterVideoDecoder(string activatableClassId, System.Guid inputSubtype, System.Guid outputSubtype) public void RegisterVideoEncoder(string activatableClassId, System.Guid inputSubtype, System.Guid outputSubtype)

Effects are brought in through the same extensibility mechanism as custom formats Effects are IMFMediaTransforms. They take in samples and produce samples. The Transform can expose an API via Windows Runtime (e.g. to receive config, deliver analysis data, etc.)

Media Foundation Windows Metro style app Playback/Previe w Audio/Video Source Audio/Video Source Video Decoder Video Decoder Video Effect 1 Video Effect 1 Video Encoder Video Encoder Video Effect 2 Video Effect 2 Audio/Video Sink Audio/Video Sink Audio Decoder Audio Decoder Audio Effect 1 Audio Effect 1 Audio Encoder Audio Encoder Audio Effect 2 Audio Effect 2 Windows Runtime Capture Streaming Transcode Extensibility MediaControl Protection Windows Audio Session API (WASAPI)DirectX 1. Register DLL with extensions in App manifest

How it works Game Control (JS) Object Recognizer Video Effect (C++) Object Recognizer Video Effect (C++) Video frames Object coordinates Set racket positions

RECAP

Provides a rich set of Media features in easy-to-use APIs Allows you to build cutting-edge apps with advanced media functionality taking full advantage of the power of Windows, and fully use hardware support Allows you to plug in your custom components where you need them