Presentation is loading. Please wait.

Presentation is loading. Please wait.

IE 9Google .mp4.ogv.webm Width Height Src Poster Loop Autoplay Mute Preload controls.

Similar presentations


Presentation on theme: "IE 9Google .mp4.ogv.webm Width Height Src Poster Loop Autoplay Mute Preload controls."— Presentation transcript:

1

2 IE 9Google

3

4 .mp4.ogv.webm

5

6 Width Height Src Poster Loop Autoplay Mute Preload controls

7

8

9

10 The only way you can deliver music or any kind of audio recording right now over the web is using a plugin like QuickTime or RealPlayer. The trouble with plugins is that they are completely user dependent. Your end user has to download and install the right plugin. With HTML5’s tag you no longer have to worry about whether your end user has the right plugin or not. As long as you offer your files in the popular,.mp3,.wav or.ogg formats, you will be fine. Mobile devices such as android phones do not have Flash and can not play certain embeded audio or video.

11 Without controls With controls

12 Audio Formats Audio attributes Autoplay Loop Preload Controls Src

13 https://addons.mozilla.org/en- us/firefox/addon/download-youtube/ File converter Tools

14 Audio File: Video File: Audio js: Audio css:

15

16

17 Play

18

19 Audio.css body { text-align: center; } header, section, footer, aside nav, article, hgroup { display: block; } /**** *Audio ****/ nav { margin: 5px 0; }

20 #skinny { width: 200px; /* of whole player */ height: 40px; margin: 10px auto; padding: 5px; background: #2c2c29; border: 4px groove #00f900; border-radius: 10px; }

21 #audioButtons { float: left; width: 70px; height: 10px; } #defaultAudioBar { position: relative; float: left; width: 90px; /* bar + button widths, dont make bigger than skin */ height: 4px; margin: 5px auto; padding: 4px; /*progress bar will show up inside here */ border: 2px solid gray; /*border around bar */ background: #c0c0c0; border-radius: 10px; }

22 #progressAudioBar { position: absolute; width: 0px; /* 0 by default */ height: 4px; background: #00ff00; /*color of the progress bar, size changes as audio plays */ border-radius: 10px; } Audio.js Change maxBarSize to match #defaultAudioBar width

23 Code:


Download ppt "IE 9Google .mp4.ogv.webm Width Height Src Poster Loop Autoplay Mute Preload controls."

Similar presentations


Ads by Google