tailieunhanh - giới thiều ebook HTML5 và CSS3 in the real world phần 5

Tham khảo tài liệu 'giới thiều ebook html5 và css3 in the real world phần 5', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | 104 HTML5 CSS3 for the Real World if you took note of the HTML that comprises our controls. Those are the four elements on the page that we ll be manipulating based on user interaction. Our first task is make sure the native controls are hidden. We could do this easily by simply removing the controls attribute from the HTML. But since our custom controls are dependent on JavaScript visitors with JavaScript disabled would be deprived of any way of controlling the video. So we re going to remove the controls attribute in our JavaScript like this js excerpt controls The next step is to make our own custom controls visible. As mentioned earlier we ve used CSS to remove our controls from view by default. By using JavaScript to enable the visibility of the custom controls we ensure that the user will never see two sets of controls. So our next chunk of code will look like this js excerpt canplaythrough function hidden false This is the first place we ve used a feature from the HTML5 video API. First take note of the addEventListener method. This method does exactly what its name implies it listens for the specified event occurring on the targeted element. But addEventListener isn t cross-browser w . If you re familiar with cross-browser JavaScript techniques you probably know that the addEventListener method isn t cross-browser. In this case it poses no problem. The only browsers in use that lack support for addEventListener are versions of Internet Explorer prior to version 9 and those browsers have no support for HTML5 video anyway. All we have to do is use Modernizr or some equivalent JavaScript to detect support for the HTML5 video API and then only run the code for supporting browsers all of which will support addEventListener. HTML5 Audio and Video 105 In this case we re targeting the video element itself. The event we re registering to be listened for is the