HTML5 Audio and Video

HTML5 Audio and Video

Lượt xem: 12,797Lượt tải: 2Số trang: 36

Mô tả tài liệu

This is the first place we’ve used a feature from the HTML5 video API. First, takenote of theaddEventListenermethod. This method does exactly what its nameimplies: it listens for the specified event occurring on the targeted element.

Tóm tắt nội dung

Those are the four simply removing the controls attribute from the of any way of the is the first place we’ve used a feature from the HTML5 video it listens for the specified event occurring on the targeted only browsers in use that lack support for for HTML5 video for the HTML5 video API, and then only run the code for this case, we’re targeting the video element listened for is the event from the video are other events we can use to check if the video is ready, each of which and Pausing the put a single line of code that removes the hidden class from the bind a click event handler to our paused attribute is being accessed to see if the video is currently in the just represent the start of the video, before it’s been return true if the video isn’t currently Audio and is not currently playing, we can safely call the play() method on the will play the video from its last paused fire, and this will trigger the pause() method on the video element, to it if you’re going to use the video and audio (or if something else causes the video to play, such as some other code on the page), the play event will be detected by the listener and the callback the element has been played, the first block will add the class playing to our block of code will remove the playing class, causing the state of the button to go Some video controls are via the context menu The menu above appears when you bring up the video element’s context menu. you can see, clicking the controls on the video element isn’t the only way or the video. To ensure that the button states are changed no matter how the video are accessed, we instead listen for play and pause events (and, as Audio and Video You may also be concerned that the video element’s context menu has an content producers might feel like avoiding HTML5 video for this be aware that even if you do disable the context menu on the video user can still view the source of the page and find the location of the HTML5 trial.9 After opting in, when you view a video and open the video also adds the video element to the page, so that and Unmuting the Video’s Audio time, we’ve bound the click event to the button, following with This block of code a new part of the API: the muted button is clicked, we check to see the status of this actual muting or unmuting of the video, rather than the clicking of the muted and we change the class on the Audio and Video The code we’ve written so far will allow the user to play and pause the video, as At this point, if you let the video play to the end, it will stop on the last it’s best to send the video back to the first frame, ready to be played block of code listens for the ended event, which tells us that the video has Once we detect this event, we set the the Time as the Video the content of our the video’s time changes, which means even a fraction of a second’s Audio and Video the content of the element will change update every second, even though the content of the timer HTML5 video from so have a tinker and see what else you can Features of the Media Elements API some events and that you might want to use when building your controls, or when working with video and audio to play a video when the mouse hovers over it, or use audio elements to play with HTML5 video and which only fires if the browser thinks it can play the video all Audio and Video In addition to the we’ve already seen, here’s a number of useful ones As its name implies, this attribute returns the URL that points to the video only works if you’re using the src attribute on the video will return the value of the URL pointing to the video file being it’s from the video element’s src attribute or one of the source attribute returns a numeric value from 0 to 4, with each state readiness level of the media values return the intrinsic of the video, the actual width as the video was what’s declared in the HTML or CSS. You can also access that are able to be declared directly in the of what we’ve discussed in relation to HTML5 video and its API also apply to the audio element, with the obvious being those related to to the video element, the preload, autoplay, loop, and controls be used (or not used!) on the audio audio element won’t display anything unless controls are present, but even if the element’s controls are absent, the element is still via audio element nests source tags, similar to video, and it will any child element that’s not a source tag as fallback content for Audio and keyboard (using tabindex, for example), the HTML5 media give you access to the track element to display captions or a of the Like source elements, track elements should be placed as children of the video or audio track element is still in flux, but if included as a child of the video code here has four track elements, each a text track for of this writing, the track element is yet to be supported by any info on this new element, see the W3C benefits of running audio and video natively in the browser to start with these elements Audio and Video us to style pages without having to make dozens of and text first, we need to make sure older browsers recognize the new elements on our As we mentioned back in Chapter 1, styling the new HTML5 elements in older 8 will now be aware of these new elements, but they’ll still lack any default may allow arbitrary elements, they’ve no way of knowing, for example, elements render as inline by default, it makes sense to tell these browsers which elements this CSS and the required in place, all browsers will start off on an even footing when it comes to styling HTML5 selectors to target elements on the page, the only way to modify the CSS of an element would be to use the by type, class, and/or id. This required adding class and id to our markup to create hooks and between elements of the same added and target almost any element on the page with a wide range of all the selectors from previous versions of CSS are still selectors target elements based on their to another element F that is a (child, great and so on) of an element E. For example, ol li targets li elements that are would include li elements in a ul that’s nested in an This selector matches any element F that is a direct child of element nested elements will be would only target li elements directly inside the ol, and would omit will match any element F that shares the same parent as E, and comes dir- For example, li + li will target all li will match any element F that shares the same as long as the h2 is not nested in any other elements before deciding whether or not to apply a style, rendering for a more several attribute allow for matching expands upon those attribute allowing any element E that has the attribute attr with any any element E that has the attribute attrwith the exact, any element E whose attribute attr either has the value val or any element E whose attribute attr has within its value the full any element with the class info that had a title attribute any element E whose attribute attr starts with the value the val matches the beginning of the attribute any element E whose attribute attr ends in val. val matches the end of the attribute any element E whose attribute attr matches val anywhere within the In other words, the string val is matched anywhere in the element with the class fakelink that has a title attribute the 3. :hover can apply to any element on the page—not just links and form :focus and :active are relevant to links, form controls, and any the new HTML5 form that made them more following match elements based on user user interface element that’s a user interface element that’s elements that are neither checked nor selector singles out the element that is the target of the currently link in your page that, when clicked, will jump to the selector now matches the #content element, as if you had user clicks on a different anchor, :target will match the new to one or more UI elements that are the default among a set of to elements that are valid, based on the type or pattern to empty required elements, and elements failing to match the to elements with range where the value is within those The opposite of elements whose value is outside the to form controls that have the required attribute to all form controls that do not have the required to elements whose contents are unable to be altered by the user. is usually most elements other than form to elements whose contents are such as text input that support form control like required and pattern also fails to :hover on elements other than links, and neither IE6 nor So far, we’ve seen how we can target elements based on their and also enables us to target elements based simply on their location in the markup. 1 root element, which is always the html element F that is the nth child of its parent E. The element F that is the nth child of its parent E, counting backwards from the The element that is the nth element of its type in a given parent except counting backwards from the last element in a The element E that is the first child E of its element E that is the last child E of its parent, same as element that’s the only child of its element that’s the only one of its type inside its parent element that has no children; this includes text nodes, so element in the language denoted by the is a useful one: it will select elements that don’t match with the :not match to the left of the then exclude from that matched group the elements that also match the first element in a even, targeting every other every third would match the 3rd, 6th, and 9th elements in a these numeric you can pinpoint which elements you and Generated addition to CSS gives us access to allow you to target text that’s part of the document, but not of the element that is not otherwise easily or reliably in on the other hand, represent some structure of the document that’s that match the first letter and first line of a and :after have been around since CSS2, these in The ::before and ::after don’t refer to content that exists in the To generate content for a use the content of an attribute selector and the ::after allows you to access any of the selected element, coming in handy And you’ll remember from the attribute that means “any a element whose href attribute begins with The matches text that is on The HTML5 Herald, to bring the selection and text color in line CSS3 it support for some new ways of colors on the to CSS3, we almost always declared colors using the has been extended in the CSS3 color module2 to include 147 (that are generally well CSS3 also provides us with a number of In addition to with HSLA and RGBA colors, CSS3 sets the of the as fully whereas an opacity value of 1 means the element is While opacity sets the opacity value for an other than the one it’s declared elements, you should be aware of this that we’ve been through all the available CSS selectors and new color marked them up as article elements within an aside & {CSS3}” also has a shadow that offsets it from the so we should try and use some fancy new selectors box isn’t the only a element on the page, but it might be the only a provide support to that browser, you can use a more common id or class property lets you create rounded corners without the need for For our a element, the example, only one other element on The HTML5 Herald that uses rounded note two things about the above CSS: we’ve used an attribute selector to property can be applied to all elements, except the table then use to add four spans to all the elements you want example, the color, radius, or images will need to