Media platform Windows Metro Style App audio src

  • Slides: 39
Download presentation

Media platform Windows Metro Style App <audio src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=“…”> <video src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=“…”> Playback/Preview Audio/Video Source Media

Media platform Windows Metro Style App <audio src=“…”> <video src=“…”> Playback/Preview Audio/Video Source Media Foundation Win. RT (Windows. Media) Transcode Capture Video Decoder Video Effect 1 Video Effect N Video Encoder Audio Decoder Audio Effect 1 Audio Effect N Audio Encoder Streaming Audio/Video Sink

HTML 5 Media Elements

HTML 5 Media Elements

 • W 3 C HTML 5 Spec • You can create rich media

• W 3 C HTML 5 Spec • You can create rich media experiences by combining with CSS and Java. Script and DOM events • Fully hardware accelerated • Performance, battery life and reliability Select methods and attributes • • • • play() pause() load() audio. Tracks ready. State controls current. Time duration error src playback. Rate preload volume …

HTML VIDEO TAG EVENTS • • • abort canplaythrough durationchange emptied ended error loadeddata

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

<!-- Attributes allowed on both tags: src, preload, autoplay, loop, controls. Video tags also

<!-- Attributes allowed on both tags: src, preload, autoplay, loop, controls. Video tags also support poster, width, height, muted. Both support many events (e. g. volumechanged) --> <audio id="my. Audio. Tag" src="my. Song. wma" preload="none" /> <audio src="my. Song. m 4 a" autoplay loop controls /> <video id="my. Video. Tag" src="my. Video. mp 4" preload="none" /> <video src="my. Video. wmv" autoplay loop controls /> <video src="my. Video. mp 4" autoplay muted /> <video src="my. Audio. mp 3" poster="my. Image. jpg" controls />

<audio id="my. Audio" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="http: //www. contoso. com/track 1. mp 3" autoplay /> <script type="text/javascript">

<audio id="my. Audio" src="http: //www. contoso. com/track 1. mp 3" autoplay /> <script type="text/javascript"> var audio = document. get. Element. By. Id("my. Audio"); // Handle when the audio track has reached the end audio. add. Event. Listener("ended", function() { // Switch the audio src to a new track audio. src = "http: //www. contoso. com/track 2. m 4 a"; }); </script>

<video id="player" controls autoplay /> <script type="text/javascript"> // Invoke a file picker for the

<video id="player" controls autoplay /> <script type="text/javascript"> // Invoke a file picker for the user to select media from the file system var // Create a URL to represent the local file var "player" <script>

// Programmatically select the file (could also be from home network storage) var file

// Programmatically select the file (could also be from home network storage) var file = new Windows. Storage. Known. Folders. music. Library. get. File. Async("track. mp 3"). // From the file, extract media-specific properties then(function(my. File) { my. File. properties. get. Music. Properties. Async(). then(function(music. Props) { var album = music. Props. album; var artist = music. Props. artist; var title = music. Props. title; // etc. });

 • • 3 D video Audio and video effects and extensibility Audio output

• • 3 D video Audio and video effects and extensibility Audio output selection such as Bluetooth Background audio DRM such as Play. Ready Low-latency support for communications & games Play To for streaming to TVs & audio systems Zoom and mirror mode for video

Programming Model

Programming Model

Windows. Media APIs Much more than playing video and audio Windows. Media. Capture Snap

Windows. Media APIs Much more than playing video and audio Windows. Media. Capture Snap a picture, record video and audio Devices Input and output audio devices such as Bluetooth Playlists Work with audio playlists Play. To Stream media to a television or audio system Protection Use Play. Ready or other content protection systems Transcoding Convert music or video to other formats or resolutions, trim, or make effects permanent Video. Effects Insert or remove well-known video effects such as Stabilization

id="videoplayer" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="http: //www. contoso. com/clip. mp 4" controls autoplay type="text/javascript"> // Step 1: Obtain

id="videoplayer" src="http: //www. contoso. com/clip. mp 4" controls autoplay type="text/javascript"> // Step 1: Obtain Play. To. Manager object for app’s current view. var // Step 2: Register for the sourcerequested event (user selects Devices button). "sourcerequested" var // Step 3: Specify the media to be streamed (to filter devices) var "videoplayer" // The media will then be streamed to the device chosen by the user in the UI.

x: Name="videoplayer" Source="http: //www. contoso. com/clip. mp 4" Auto. Play="true" // Step 1: Obtain

x: Name="videoplayer" Source="http: //www. contoso. com/clip. mp 4" Auto. Play="true" // Step 1: Obtain Play. To. Manager object for app’s current view. // Step 2: Register for the Source. Requested event (user selects Devices button). // Step 3: Specify the media to be streamed. // The media will then be streamed to the device chosen by the user in the UI.

Camera Capture UI It’s easy to snap a photo or record video by invoking

Camera Capture UI It’s easy to snap a photo or record video by invoking the built-in capture UI.

// Application manifest capabilities required to access camera and microphone <Capabilities> <Device. Capability Name="webcam"

// Application manifest capabilities required to access camera and microphone <Capabilities> <Device. Capability Name="webcam" /> <Device. Capability Name="microphone" /> </Capabilities>

id="preview" type="text/javascript"> // Invoke the camera capture UI for taking a photo var capture.

id="preview" type="text/javascript"> // Invoke the camera capture UI for taking a photo var capture. UI = new Windows. Media. Capture. Camera. Capture. UI(); capture. UI. capture. File. Async(Windows. Media. Camera. Capture. UI. Mode. photo). then(function(captured. Item) { if (captured. Item) { // Display the photo document. get. Element. By. Id("preview"). src = URL. create. Object. URL(captured. Item); } });

Convert media files into different formats, resolutions or trim to a specific timeframe.

Convert media files into different formats, resolutions or trim to a specific timeframe.

var var // Choose a popular output format and quality var // Create the

var var // Choose a popular output format and quality var // Create the file to transcode into, and select the input file to read from "output. mp 4" "test. wmv" // Transcode the file // log "done"

var var // Specify the start and stop time defining the portion to keep

var var // Specify the start and stop time defining the portion to keep transcoder. trim. Start. Time = 900; transcoder. trim. Stop. Time = 6000; // Create the file to transcode into, and select the input file to read from "Edited. Vacation. mp 4" "vacation. mp 4" // Trim the file: profile isn’t changing so profile argument isn’t needed // log "done"

A word on formats

A word on formats

Recap

Recap

Design guidelines for Play To receivers Streaming media to devices using Play To &

Design guidelines for Play To receivers Streaming media to devices using Play To & media streaming for Metro style apps

http: //forums. dev. windows. com http: //bldw. in/Session. Feedback

http: //forums. dev. windows. com http: //bldw. in/Session. Feedback

BACKUP

BACKUP

// Define capture element in XAML x: Name="preview" Width "320" Height "240" Margin "10,

// Define capture element in XAML x: Name="preview" Width "320" Height "240" Margin "10, 5, 10, 5" // Initialize // Assign the source // Start the preview

// Select the input file to read from // Create the file to transcode

// Select the input file to read from // Create the file to transcode into // Choose a popular output format and quality // Transcode the file

// Select the input file to read from // Create the file to transcode

// Select the input file to read from // Create the file to transcode into // Specify the start and stop time defining the portion to keep transcoder. Trim. Start. Time = 900; transcoder. Trim. Stop. Time = 6000; // Trim the file: profile isn’t changing so profile argument isn’t needed