Creating apps that use video and audio

Slides:



Advertisements
Similar presentations
Introduction to Macromedia Director 8.5 – Lingo
Advertisements

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.
1 Multimedia on the Web: Issues of Bandwidth Bandwidth is a measure of the amount of data that can be sent through a communication pipeline each second.
Understanding Mobile App Development Concepts and Working with APIs Lesson 6.
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.
© De Montfort University, Synchronised Presentations using Windows Media Howell Istance School of Computing De Montfort University.
Chapter 6 Jam! Implementing Audio in Android Apps.
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.
Chapter 6: Jam! Implementing Audio in Android Apps.
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.
Video, audio, embed, iframe, HTML Form
Private cloudFrameworksClientsPublic cloud Microsoft ® Media Platform Video Editor Content Manager Microsoft ® Media Platform Player Framework Microsoft.
Advanced Windows 8 Apps Using JavaScript Jump Start Exam Prep Advanced Windows 8 Apps Using JavaScript Jeremy Foster Microsoft Developer Evangelist.
Multimedia Authoring Tools Lecture 13
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.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Creating Amazing Video Experiences on BlackBerry PlayBook Rajeev Massand |
3dtv.at DV/HDV Tape Drive Synchronization Stereoscopic Displays and Applications Conference 29 th – 31 th January 2007 San Jose, United States.
Podcasting 101..and more. Workshop Objectives: Introduce iTunes: abundance of resources, multi-media organizer, classroom tool You do not need an iPod.
Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.
What’s new for Windows 8 Devs Part 3 Lewis Benge Devices & Integration Team TBWA\Digital Arts Network DEV216.
Eyeblaster Video Enhancements for RMP 6.1. Agenda Video Enhancements Goals Main features and Creative Process Flash Video Components Bandwidth Optimization.
Getting to Know TiVo: The Home Media Engine (HME SDK) Eric M. Upchurch CS 525 Spring 2008.
Favorite Twitter® Searches App Android How to Program © by Pearson Education, Inc. All Rights Reserved.
JavaScript, Fourth Edition
Chapter 11 Adding Sound and Video. Chapter 11 Lessons 1.Work with sound 2.Specify synchronization options 3.Modify sounds 4.Use ActionScript with sound.
U.01 General File Upload As a file uploader, I want to be able to upload files to Media Vault so that I can safely store and access these files. Acceptance.
Lesson 1 What is Camtasia?. Lesson 2 Editing Objectives After completing the lesson, the student will be able to: Edit a basic recording Camtasia file.
Creating Multimedia Interaction with Windows Media Technologies 7.
11 Web Services. 22 Objectives You will be able to Say what a web service is. Write and deploy a simple web service. Test a simple web service. Write.
Developing the Game User Interface (UI) Lesson 5.
Chapter 8 Cookies And Security JavaScript, Third Edition.
Chapter 8 Browsing and Searching the Web. Browsing and Searching the Web FAQs: – What’s a Web page? – What’s a URL? – How does a browser work? – How do.
CHAPTER TEN AUTHORING.
Your Metro style app, video and audio, Part 1
The Windows Runtime (WinRT) is the shared runtime and API space used by store apps across the Windows platform (phone and client) 5 Common WinRT.
1 Begin the editing process by selecting method of importing video Use the Movie Task Menu to import, edit and save video Follow this menu to complete.
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.
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.
Storage Device Design Pattern JEFF MEISSNER; KEN HARDY Windows Program Management.
PLUG INS flash, quicktime, java applets, etc. Browser Plug-ins Netscape wanted a method to extend features of the browser became an unofficial standard.
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.
Introduction to Interactive Media Interactive Media Tools: Authoring Applications.
Reading Flash. Training target: Read the following reading materials and use the reading skills mentioned in the passages above. You may also choose some.
Multimedia Encoder and Converter. SUPER©  SUPER = Simplified Universal Player Encoder & Renderer.  The full version of SUPER can be downloaded from.
Ulead Video Studio is an easy to use video editing software that allows even the novice of movie makers to produce a professional project complete with.
Multimedia Capture & storage. Introduction A rich set of API for recording of audio & video. A developer has two choices  launch the built-in app using.
CS378 - Mobile Computing Audio.
Debugging tools in Flash CIS 126. Debugging Flash provides several tools for testing ActionScript in your SWF files. –The Debugger, lets you find errors.
Integral Users will interact with your app on a big screen with keyboard and mouse.
Multimedia. Audio,vedio and Images End user typically refer to vedio/audio using the respective file format MP4 or AVI(audio vedio interleave) Developer.
David Robb 10/14/08 Discovery Streaming. From the Home Page, you can search for digital media by keyword, subject, grade level, or curriculum standards.
Exploring Mobile Device Networking Lesson 4. Exam Objective Matrix Skills/ConceptsMTA Exam Objectives Understanding Networking for Mobile Devices Network.
Sharing makes life beautiful ARKUDA STB SOLUTION.
Active-HDL Server Farm Course 11. All materials updated on: September 30, 2004 Outline 1.Introduction 2.Advantages 3.Requirements 4.Installation 5.Architecture.
How to Rip and Convert Blu-ray to MOV Videos on Mac to Play Blu-ray Movies on iTunes From:
CHAPTER 8 Multimedia 1. Using Multimedia ❖ Multimedia: the combination of text, sound, and video to express an idea or convey a message. ❖ Podcasts: a.
ITL conference 2003 Putting Your Content on a Diet Using rich online media without download woes.
Video API and Coding Graduate Seminar Dr. Jinan Fiaidhi
Chap 3. Audio/Video api.
Windows Developer Day Fall Creators Update Chris Cortes
Lecture 7: Service Topics: Services, Playing Media.
Myth Busting: Hosted Web Apps
Integrating Multimedia: Sound, Video and More
Integrating with the Windows Device Experience
Playing Audio (Part 1).
4/9/ | Contracts © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks.
Lecture 7: Service Topics: Services, Broadcast Receiver, Playing Media.
Presentation transcript:

Creating apps that use video and audio Windows Azure 4/20/2017 Creating apps that use video and audio Gabe Frost Senior Program Manager, Lead 2-087 © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Agenda A recap of video and audio What’s new for 8.1 Completing your audio experience Completing your video experience Better together with Xbox One

A recap of video and audio Desktop apps use IMFMediaEngine, etc. Windows.Media namespace Great battery life with hardware offload Apps can extend formats and codecs Multimedia platform Media Foundation Playback & preview (IMFMediaEngine) Windows Store app Camera & mic capture (IMFCaptureEngine) Streaming to Xbox (IMFMediaSharingEngine) Transcode & trim (IMFTranscodeEngine) Audio/video reader (source) Video decoder effect 1 encoder effect n Audio/video writer or render (sink) Audio HTML5 video & audio tags, XAML MediaElement Windows Runtime (WinRT)

A recap of video and audio Content protection, e.g. PlayReady Background audio Stream to Xbox, TVs and audio receivers Convert between popular formats Low latency mode for communications and games Video stabilization Zoom and mirror modes Stereo 3D And more

What’s new Improved quality, performance & battery Adaptive bitrate and encrypted streaming with HTML5 standards Improved online playlists and ad insertion in connected standby Custom formats without native code

What’s new Unconstrained download of large files App discovery and launching on Xbox One Audio effect management Edit media file metadata in local libraries And more

Completing your audio experience Demo

Simple background audio playlist Build 2012 4/20/2017 Simple background audio playlist // Create audio element that continues to play in the background <audio id=“audioplayer" msAudioCategory=“BackgroundCapableMedia” autoplay /> // First track is from local library, then 2nd is chosen by the app var picker = new Windows.Storage.FileOpenPicker(); picker.pickSingleFileAsync(). then(function(file) { var url = URL.createObjectURL(file); document.getElementById(“audioplayer”).src = url; }); audio.addEventListener("ended", function() { document.getElementById(“audioplayer”).src = "http://contoso.com/track2.m4a"; }); /* If the device idles to connected standby, track2 can’t be fetched */ © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Set audio behavior using msAudioCategory Set attribute for best experience when app is not visible and when audio is mixed ForegroundOnlyMedia BackgroundCapableMedia Communications Alert SoundEffects GameEffects GameMedia Other

Audio playlist while in connected standby // Create downloader and download instance for a given URI to download to “newFile” var nextItem = "http://contoso.com/track2.m4a"; var downloader = new Windows.Networking.BackgroundTransfer.BackgroundDownloader(); var download = downloader.createDownload(nextItem, newFile); // Set priority so the download starts immediately download.priority = Windows.Networking.BackgroundTransfer.BackgroundTransferPriority.high; download.startAsync(); // Play the resulting file var url = URL.createObjectURL(newFile); document.getElementById(“audioplayer”).src = url;

Media playback controls function initSystemMediaControls() { /* initialize at app activation */ SystemMediaControls = Windows.Media.SystemMediaTransportControls.getForCurrentView(); SystemMediaControls. /* Events for both software and hardware buttons */ addEventListener(“buttonpressed”, systemMediaControlsButtonPressed, false); SystemMediaControls.isPlayEnabled = true; /* Enable all buttons */ SystemMediaControls.isPauseEnabled = true; // Reflect the current playback state in the system UI SystemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.closed; }

Media playback controls function systemMediaControlsButtonPressed(e) { var mediaButton = Windows.Media.SystemMediaTransportControlsButton; switch (e.button) { /* Add case statements for case mediaButton.play: audio.play(); break; /* each button */ case mediaButton.pause: audio.pause(); break; } function updateSystemMediaTransportControlsMetadata() { displayUpdater.type = Windows.Media.MediaPlaybackType.music; musicProperties.title = “my track title”; /* Add other metadata too */ displayUpdater.update();

Stream to, and remotely control Xbox Build 2012 4/20/2017 Stream to, and remotely control Xbox // Step 1: Obtain PlayToManager object for app’s current view var ptm = Windows.Media.PlayToManager.getForCurrentView(); // Step 2: Register for the “sourcerequested” event (when user selects Devices charm) ptm.addEventListener(“sourcerequested”, function(e) { var request = e.sourceRequest; var deferral = request.getDeferral(); // Step 3: Specify the media to be streamed request.setSource(document.getElementById(“audioplayer”).msPlayToSource); deferral.complete(); // The media will then be streamed to the device chosen by the user in the Charm. }); © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

What’s new for the Devices charm Clarity on what devices are supported: Play, Print, Project Add a device from the charm Adobe Flash video and audio now works from the browser Audio from a video can be streamed to audio-only receivers (e.g. music videos)

Add a custom file or stream format App is responsible for retrieving audio samples and parsing file format MediaStreamSource takes elementary stream samples as input Decoding and rendering by platform Multimedia platform Media Foundation Playback & preview (IMFMediaEngine) Windows Store app Camera & mic capture (IMFCaptureEngine) Streaming to Xbox (IMFMediaSharingEngine) Transcode & trim (IMFTranscodeEngine) Video decoder effect 1 encoder effect n Audio/video writer (sink) Audio HTML5 video & audio tags XAML MediaElement Windows Runtime (WinRT) Media Stream Source Get audio samples (e.g. sockets) and parse file format Windows.Media.Core.MediaStreamSource Audio/video reader (source)

Add a custom file or stream format // Audio sample details and encoding properties: // Raw AAC data, 48KHz sampling rate, 2 channel and approx 124Kbps var sampleSize = 1024; var sampleDuration = 20; var audioProps = Windows.Media.MediaProperties.AudioEncodingProperties. createAac(48000, 2, 124338); // Create the media source with specific encoding properties. var streamSource = new Windows.Media.Core.MediaStreamSource(new Windows.Media.Core.AudioStreamDescriptor(audioProps));

Add a custom file or stream format // Register handlers streamSource.addEventListener(“samplerequested”, sampleRequestedHandler, false); streamSource.canSeek = true; streamSource.musicProperties.title = “My track title”; var songDuration = 60000; // Attach media source to the audio tag and start playing var audio = document.getElementById(“audiotag”); audio.src = URL.createObjectURL(streamSource); audio.play();

Add a custom file or stream format Build 2012 4/20/2017 Add a custom file or stream format function sampleRequestedHandler(e) { var request = e.request; if (!MyCustomFormatParser.IsAtEndOfStream(randomAccessStream)) { var deferral = request.getDeferral(); var inputStream = MyCustomFormatParser.getInputStream(randomAccessStream); MediaStreamSample.createFromStreamAsync(inputStream, sampleSize, timeOffset). then(function(sample) { sample.duration = sampleDuration; /* When sample is requested, your */ sample.keyFrame = true; /* custom parser extracts audio data */ request.sample = sample; /* from RandomAccessStream and returns */ deferral.complete(); /* an InputStream of only audio samples */ }); } © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Build 2012 4/20/2017 In review Add audio declaration in app manifest and set msAudioCategory attribute Handle media button events for play and pause at minimum Set high priority on background downloader for online playlists © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

In review PlayTo app contract for streaming to Xbox Build 2012 4/20/2017 In review PlayTo app contract for streaming to Xbox Use MediaStreamSource for advanced streaming or custom formats © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Completing your video experience Demo

Simple video playback, Windows 8.1 Build 2012 4/20/2017 Simple video playback, Windows 8.1 <MediaElement Name=“VideoPlayer” Source=“http://contoso.com/movie1.m4v” PosterSource=“movie1_artwork.png” AreTransportControlsEnabled=“true” /> /* No longer necessary to create buttons and handlers for each. All transport control buttons, including Zoom and Fullscreen are free, as are power and performance optimizations */ © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Simple video playback, before 8.1 Build 2012 4/20/2017 Simple video playback, before 8.1 <MediaElement Name=“VideoPlayer” Source=“http://contoso.com/movie1.m4v” PosterSource=“movie1_artwork.png” /> /* Before 8.1, Media playback buttons had to be manual. You can still do this for custom controls */ <StackPanel x:Name=“mtcPanel” Orientation=“Horizontal”> <Button Name=“btnPlay” Click=“btnPlay_Click” Content=“Play” /> <Button Name=“btnStop” Click=“btnStop_Click” Content=“Stop” /> <Button Name=“btnZoom” Click=“btnZoom_Click” Content=“Zoom” /> <Button Name=“btnFull” Click=“btnFull_Click” Content=“Full” /> </StackPanel> © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Simple video playback, before 8.1 Build 2012 4/20/2017 Simple video playback, before 8.1 private DisplayRequest dispRequest = null; private void btnPlay_Click(object sender, RoutedEventArgs e) { VideoPlayer.Play(); /* Before 8.1, button handlers */ if (dispRequest == null) /* had to be manual, and a */ { /* display request had to be made */ dispRequest = new DisplayRequest(); /* to prevent the screen from */ dispRequest.RequestActive(); /* turning off after 2 minutes */ } private void btnStop_Click(object sender, RoutedEventArgs e) VideoPlayer.Stop(); if (dispRequest != null) { dispRequest.RequestRelease(); } © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Full screen video, Windows 8.1 Build 2012 4/20/2017 Full screen video, Windows 8.1 /* Full screen is free using AreTransportControlsEnabled. This hides all UI and stretches to screen perfectly to ensure hardware offload */ <MediaElement Name=“VideoPlayer” Source=“http://contoso.com/movie1.m4v” PosterSource=“movie1_artwork.png” AreTransportControlsEnabled=“true” /> /* For custom controls, let Windows optimize for hardware offload and set display request using the new IsFullWindow */ private void btnFull_Click(object sender, RoutedEventArgs e) { VideoPlayer.IsFullWindow = “true”; } © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Video zoom for small screen tablets Build 2012 4/20/2017 Video zoom for small screen tablets /* Zoom is free using AreTransportControlsEnabled */ <MediaElement Name=“VideoPlayer” Source=“http://contoso.com/movie1.m4v” PosterSource=“movie1_artwork.png” AreTransportControlsEnabled=“true” /> /* For custom controls, use Stretch */ private void btnZoom_Click(object sender, RoutedEventArgs e) { VideoPlayer.Stretch = “UniformToFill”; } © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Media playback controls Build 2012 4/20/2017 Media playback controls private SystemMediaTransportControls SystemMediaControls = null; public void InitSystemMediaControls() { SystemMediaControls = SystemMediaTransportControls.getForCurrentView(); /* The new SystemMediaTransportControls events for software and hardware buttons */ SystemMediaControls.ButtonPressed += SystemMediaControls_ButtonPressed; /* Enable specific media playback buttons (for brevity, only play and pause are shown) */ SystemMediaControls.IsPlayEnabled = true; SystemMediaControls.IsPauseEnabled = true; /* Reflect the current playback state in the system UI */ SystemMediaControls.PlaybackStatus = MediaPlaybackStatus.Closed; } © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Media playback controls Build 2012 4/20/2017 Media playback controls private async void SystemMediaControls_ButtonPressed(SystemMediaTransportControls sender, SystemMediaTransportControlsButtonPressedEventArgs args) { switch case SystemMediaTransportControlsButton.Play: /* Add case statements for */ VideoPlayer.Play(); break; /* each button – both system UI */ } /* and hardware buttons will event the same */ } /* Sets metadata from properties in the passed StorageFile */ private async Task UpdateSystemMediaControlsDisplayAsync(StorageFile mediaFile) copyFromFileAsyncSuccessful = await SystemMediaControls.DisplayUpdater.CopyFromFileAsync(Music, mediaFile); © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Mute or pause when app is not visible Build 2012 4/20/2017 Mute or pause when app is not visible <MediaElement Name=“VideoPlayer” Source=“http://contoso.com/movie1.m4v” PosterSource=“movie1_artwork.png” AudioCategory=“ForegroundOnlyMedia” /> /* Audio will mute when app */ /* is not visible */ /* If pause is appropriate when the video is not in view, listen for sound level changes similar to listening for button presses */ SystemMediaTransportControls SystemMediaControls = SystemMediaTransportControls.getForCurrentView(); SystemMediaControls.PropertyChanged += SystemMediaControls_PropertyChanged; © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Mute or pause when app is not visible Build 2012 4/20/2017 Mute or pause when app is not visible private async void SystemMediaControls_PropertyChanged(SystemMediaTransportControls sender, SystemMediaTransportControlsPropertyChangedEventArgs args) { if (args.Property == SystemMediaTransportControlsProperty.SoundLevel) if (sender.SoundLevel == SoundLevel.Muted) { /* SoundLevel will only report ‘Muted’ when the app is not visible */ VideoPlayer.Pause(); } else { /* If SoundLevel isn’t ‘Muted’ the app must be visible */ VideoPlayer.Play(); © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Unconstrained download Build 2012 4/20/2017 Unconstrained download StorageFile offlineMovie = /* path for saving downloaded file */; BackgroundDownloader downloader = new BackgroundTransfer.BackgroundDownloader(); var download = downloader.CreateDownload(new Windows.Foundation.Uri(“http://contoso.com/movie1.m4v”), offlineMovie); List<DownloadOperation> operations = new List<DownloadOperation>(); operations.Add(download); /* Add as many downloads as you like */ var result = await BackgroundDownloader.RequestUnconstrainedDownloadsAsync(operations); if (result.IsUnconstrained) { /* If user accepts prompt, downloads are unconstrained. If no; constrained */ } Download.StartAsync().AsTask( /* Implement progress indicator, etc. */ ); © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Stream to, and remotely control Xbox /* Step 1: Obtain PlayToManager object for app’s current view */ PlayToManager ptm = PlayToManager.GetForCurrentView(); /* Step 2: Register for SourceRequested event (fires when Devices charm selected) */ ptm.SourceRequested += (PlayToManager sender, PlayToSourceRequestedEventArgs e) => { request = e.SourceRequest; PlayToSourceDeferral deferral = request.GetDeferral(); request.SetSource(VideoPlayer.PlayToSource); /* Step 3: Set source of media */ deferral.Complete(); } /* The media will then be streamed to the device chosen by the user */

Add a custom file or stream format /* Audio sample details and encoding properties: Raw AAC data, 48KHz sampling rate, 2 channel and approx 124Kbps */ AudioEncodingProperties AudioProps = new MediaProperties.AudioEncodingProperties.CreateAac(48000, 2, 124338); /* Create the media source with specific encoding properties. */ MediaStreamSource StreamSource = new Windows.Media.Core.MediaStreamSource(new Windows.Media.Core.AudioStreamDescriptor(AudioProps));

Add a custom file or stream format /* Handle events on the media source. Only SampleRequested is shown for brevity */ StreamSource.SampleRequested += StreamSource_SampleRequested; /* Set higher level properties */ StreamSource.canSeek = true; StreamSource.MusicProperties.title = “My track title”; TimeSpan songDuration = new TimeSpan(600000000); StreamSource.duration = SongDuration; /* Attach media source to XAML MediaElement and start playing */ AudioPlayer.SetMediaStreamSource(StreamSource); AudioPlayer.Play();

Add a custom file or stream format Build 2012 4/20/2017 Add a custom file or stream format async void StreamSource_SampleRequested(MediaStreamSource sender, MediaStreamSourceSampleRequestedEventArgs args) { /* Whenever a sample is requested, */ MediaStreamSourceSampleRequest request = args.Request; /* MyCustomFormatParser parses the */ if (!MyCustomFormatParser.IsAtEndOfStream(RandomAccessStream)) /* RandomAccessStream to retrieve only raw audio */ { /* data then returns it as an InputStream */ Windows.Media.Core.StartingRequestDeferral deferral = request.GetDeferral(); IInputStream InputStream = MyCustomFormatParser.GetInputStream(RandomAccessStream); MediaStreamSample Sample = await MediaStreamSample.CreateFromStreamAsync(InputStream, sampleSize, timeOffset); Sample.duration = SampleDuration; Sample.keyFrame = true; timeOffset.Ticks += SampleDuration.Ticks; Request.Sample = Sample; deferral.Complete(); } © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

In review AreTransportControlsEnabled for integrated controls and best performance With custom controls, optimize for full screen using IsFullWindow Handle media button events for play and pause at minimum

In review SoundLevelChanged events to pause when not visible Unconstrained background downloader for large files PlayTo app contract for streaming to Xbox MediaStreamSource for advanced streaming and custom formats

Video performance Video is offloaded to GPU, even when not full screen Best performance when full screen Delay setting source URI until ready to play If you control video encoding, match encoded resolution with device resolutions

Small screen tablets Follow touch target size guidelines Support video zoom for letterbox removal Consider playing full screen as default Consider locking screen orientation to landscape when playing full screen

Your Windows 8.1 and Xbox One apps are better together Demo

Better together with Xbox One From the Devices charm, users see Xbox One if your console app is installed Xbox Music and Video apps are first to implement Both apps and sites, and for protected content Transition is fast and continues at current position Playback controls persist in app, lock screen, Kinect voice, game controller or SmartGlass Controls work when other apps are being used Best quality and battery life because streaming is direct from the web

Xbox One app manifest <!-- Register ms-playtoapp protocol handler to enable app launching. Apps can register multiple protocol handlers --> <Extensions> <Extension Category=“windows.protocol” StartPage=“main.html”> <Protocol Name=“ms-playtoapp-myapp” /> </Extension> </Extensions>

Windows 8.1 app /* Pass custom meta info used to initiate streaming from Xbox One app using x-ms-playToPreferredUri */ <video id=“player” src=“http://contoso.com/movie.m4v” x-ms-playToPreferredUri=“ms-playtoapp-myapp://media?id=12345” controls />

Xbox One app contract ptreceiver = new Windows.Media.PlayTo.PlayToReceiver(); /* Receiver accepts commands */ ptreceiver.supportsVideo = true; /* from home network, and */ ptreceiver.friendlyName = “My Movies App”; /* advertises playback state */ // Subscribe to events on the PlayToReceiver so you know when to control the video tag ptreceiver.addEventListener("playrequested", playRequestedHandler, false); ptreceiver.addEventListener("sourcechangerequested", sourceChangeRequestedHandler, false); // Subscribe to events on the video tag so you can update playback state on home network videoplayer.addEventListener("playing“, playingStateHandler, false); // Advertise the receiver on the home network and start receiving playback commands ptreceiver.startAsync().then( /* notify of current volume level, etc. */ );

Xbox One app contract function playRequestedHandler(e) { document.getElementById(“videoplayer”).play(); } function sourceChangeRequestedHandler(e) { /* Set the source based on whether a preferred URI if (e.stream) { /* is provided or not */ if (e.properties["System.ItemUrl"] != null && e.properties["System.ItemUrl"].indexOf("ms-playtoapp") > -1) { // Parse custom Uri to extract variables encoded to initiate streaming else { var blob = MSApp.createBlobFromRandomAccessStream(e.stream.contentType, e.stream); document.getElementById(“videoplayer").src = URL.createObjectURL(blob); } /* If x-ms-playToPreferredUri isn’t specified, just set source normally */ }

Xbox One app contract /* Call associated notifying method to update the home network whenever the state of the video tag change, such as: volumechange, ratechange, loadedmetadata, durationchange, seeking, seeked, playing, pause, ended, error */ function playingStateHandler(e) { ptreceiver.notifyPlaying(); }

Related sessions 3-088: Building apps that use the camera 3-089: Building media streaming apps and sites without plug-ins using MPEG-DASH

Resources Designing great entertainment apps for Windows Playing and previewing audio and video Creating a media player app Handling hardware media buttons

4/20/2017 12:58 PM Required Slide *delete this box when your slide is finalized Your MS Tag will be inserted here during the final scrub. Evaluate this session Scan this QR code to evaluate this session and be automatically entered in a drawing to win a prize! © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.