![]() Using DOM Events to Monitor Load Progress Note: Safari on iOS version 3.2 does not support dynamically resizing video on the iPad. Recall that setting only the height or width causes the video to scale up or down while retaining its native aspect ratio. And it sets one read/write property: height. It calls two methods: play() and pause(). The previous example gets two read-only properties: paused and videoHeight (the native height of the video). Var myVideo = document.getElementsByTagName('video') Listing 4-1 Adding simple JavaScript controls Since there is only one element in the example, it is the 0th item in the array of elements with the “video” tag name. The example in Listing 4-1 uses the tag name. You can assign the element a name or an id, use the tag name, or use the element’s place in the DOM hierarchy. It is intended to illustrate, in the simplest possible way, addressing a media element, reading and setting properties, and calling methods.Īny of the standard ways to address an HTML element in JavaScript can be used with or elements. Listing 4-1 creates a simple play/pause movie control in JavaScript, with additional controls to toggle the video size between normal and doubled. A Simple JavaScript Media Controller and Resizer All the methods, properties, and DOM events associated with HTMLMediaElement, HTMLAudioElement, and HTMLVideoElement are exposed to JavaScript. Take your custom video player and controls into full-screen mode.įor a complete description of all the methods, properties, and DOM events associated with HTML5 media, see Safari DOM Additions Reference. Provide fallback content using JavaScript if none of the media sources is playable. Keep the playback of multiple media elements in perfect sync. Replace one movie with another when the first finishes. Use JavaScript to create a simple controller.ĭisplay a progress indicator while the media is loading. This chapter shows you how to do the following: Finally, there are DOM events you can listen for, such as load progress, media playing, media paused, and media done playing. There are also properties you can set programmatically, such as the src URL and the height and width of a video, as well as read-only properties such as the video’s native height. There are methods for loading, playing, pausing, and jumping to a time. Next Previous Controlling Media with JavaScriptīecause the and elements are part of the HTML5 standard, there are JavaScript methods, properties, and DOM events associated with them.
0 Comments
Leave a Reply. |