<video src="" width="375" height="280"
controls></video>
IE 9
Google
.mp4
.ogv
.webm
•
•
•
•
Width
Height
Src
Poster
•
•
•
•
•
Loop
Autoplay
Mute
Preload
controls
<video width="375" height="280" poster="images/penguins.jpg"
controls>
<source src="videos/magnum.mp4" type="video/mp4">
<source src="videos/knight.ogv" type="video/ogg">
<source src="videos/hazzard.mp4" type="video/webm">
</video>
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 <audio> 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.
http://www.w3schools.com/tags/ref_av_dom.asp
http://www.w3schools.com/tags/tag_video.asp
<audio autoplay >
<source src="videos/magnum.mp4" type="video/mp4">
<source src="videos/knight.ogv" type="video/ogg">
<source src="videos/hazzard.webm" type="video/webm">
</audio>
Without
controls
With controls
Audio Formats
Audio attributes
•
•
•
•
•
Autoplay
Loop
Preload
Controls
Src
Tools
http://www.online-convert.com/
https://addons.mozilla.org/enus/firefox/addon/download-youtube/
File converter
http://www.microvideoconverter.com
Audio File:
http://ned.highline.edu/~mmhitch/202/video/audio/reboot.mp3
Video File:
http://ned.highline.edu/~vikram/202/team_assignments/videos/talkingdog.mp4
Audio js:
http://ned.highline.edu/~mmhitch/202/video/audio.js
Audio css:
http://ned.highline.edu/~mmhitch/202/video/audio.css
<link rel="stylesheet" href="audio.css">
<script src="audio.js"></script>
<section id="skinny">
</section>
<section id="skinny">
<audio id="myAudio">
</audio>
</section>
<section id="skinny">
<audio id="myAudio" controls>
<source src="audio/reboot.mp3" type="audio/mp3">
<source src="audio/reboot.ogv" type="audio/ogg">
<source src="audio/reboot.webm" type="audio/webm">
</audio>
</section>
</audio>
<nav> <!-- control bar -->
</nav>
</section>
<nav> <!-- control bar -->
<div id="audioButtons">
<button type="button" id="playAudioButton">Play</button>
</div>
</nav>
<div id="defaultAudioBAr">
<div id="progressAudioBar"></div> <!-- changes size
as audio plays -->
</div>
<div class="clear"></div>
</nav>
<audio id="myAudio" controls>
<source src="audio/reboot.mp3" type="audio/mp3">
<source src="audio/reboot.ogv" type="audio/ogg">
<source src="audio/reboot.webm" type="audio/webm">
</audio>
Audio.css
body {
text-align: center;
}
header, section, footer, aside nav, article, hgroup {
display: block;
}
/****
*Audio
****/
nav {
margin: 5px 0;
}
#skinny {
width: 200px; /* of whole player */
height: 40px;
margin: 10px auto;
padding: 5px;
background: #2c2c29;
border: 4px groove #00f900;
border-radius: 10px;
}
#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;
}
#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
http://thenewboston.org/watch.php?cat=43&number=27
http://thenewboston.org/watch.php?cat=43&number=28
http://thenewboston.org/watch.php?cat=43&number=29
http://thenewboston.org/watch.php?cat=43&number=30
Code:
http://www.tnbforum.com/viewtopic.php?f=25&t=18238