MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

It’s also helpful to understand that video and audio are closely related, since they’re part of the same
spec. In fact, if you want to just play the audio portion of a video, you can use the Audio object in
JavaScript:
//Play just the audio of a video
var movieAudio = new Audio("http://www.kraigbrockschmidt.com/downloads/media/ModelRocket1.mp4");
movieAudio.load();
movieAudio.play();
For any given video element, you can set the width and height to control the playback size (as to
100% for full-screen). This is important when your app switches between view states, and you’ll likely
have CSS styles for video elements in your various media queries. Also, if you have a control to play full
screen, simply make the video the size of the viewport (after also calling
Windows.UI.ViewManage-ment.ApplicationView.tryUnsnap if you’re in the snapped view). In
addition, when you create a video element with the controls attribute, it will automatically have a
full-screen control on the far right that does exactly what you expect within a Windows Store app:
In short, you don’t need to do anything special to make this work. When the video is full screen, a
similar button (or the ESC key) returns to the normal app view.
Note In case you’re wondering, the audio and video elements don’t provide any CSS pseudo-selectors
for styling the controls bar. As my son’s preschool teacher would say (in reference to handing out
popsicles, but it works here too), “You get what you get and you don’t throw a fit and you’re happy
with it.” If you’d like to do something different with these controls, you’ll need to turn off the defaults
and provide controls of your own that would call the element methods appropriately.
When implementing your own controls, be sure to set a timeout to make the controls disappear (either
hiding them or changing the z-index) when they’re not being used. This is especially important if you
have a full-screen button for video like the built-in controls, where you would basically resize the
element to match the screen dimensions. When you do this, Windows will automatically detect this
full-screen video state and do some performance optimizations, but not if any other element is front of
the video. It’s also a good idea to disable any animations you might be running and disable
unnecessary background processes like web workers.
You can use the various events of the video element to know when the video is played and paused
through the controls, among other things (though there is not an event for going full-screen), but you
should also respond appropriately when hardware buttons for media control are used. For this purpose,
listen for events coming from the Windows.Media.MediaControl object, such as playpressed,
pausepressed, and so on. (These are WinRT object events, so call removeEventListener as needed.)
Refer to the Configure keys for media sample for a demonstration, but adding the listeners generally
looks like this:
417