Use AUDIO and VIDEO HTML5 Elements for Multimedia

Use AUDIO and VIDEO HTML5 tags to insert multimedia into your web pages. No need for embed, object, or Flash.

My Demo Files: http://www.ralphphillips.com/youtube/html5media

Software for Converting Media:
Free MP3/WMA/OGG Converter (Cnet) and
Miro Video Converter

Royalty-free Music from:
http://incompetech.com/m/c/royalty-free/

---

Closed Caption:

hey this is Ralph in this video wanna
play around with some audio and video
controls
for html5 so I got a point page set up
as you can see with the headline one
let's look at my editor here
and we go so html5 doctype definition
made a character encoding I got a little
bit style just
color nothin fancy and apps simply gotta
headline one so let's get started here
so with each team of five years and
audio tag
got a couple ways you can use this you
can have an audio tagging you can put a
source
attribute right inside that if you can
refer to one particular file
how ever Tom audio file formats gets
body support for different browser so
wants to bring my source attribute
inside my audio tag
I'm gonna do it opening and closing
audio tech
in between my opening and closing on
your tag I'm gonna have least source
tag with the source attributes in my
first source after its gonna be
take the lead it.mp3 okay so that's
simply it's a guitar riff it's really
kinda cool though
arm got from the so-called incompetent
cliche to say professing still have it
up
here we go so it's incompetence dot com
in the other section
royalty free music different kinds
background music different styles
there's some use and take the lead here
i download it ASM mp3 file in the
Houston audio conversion program
in order to convert it over to into GG
format so I get two formats at the same
track
do it and copy this so I've got the mp3
format in the pool GG for me
in the reason I'm using two different
audio formats years because some are
one is supported by some browsers the
other one sport by the other browsers
for instance mp3
is supported by Chrome Safari and IE 9
but it's not supported by Firefox and
opera
searle Firefox and Opera support
the who GG format so what's gonna happen
is
the browsers will go through this list
of files until it finds the one that can
deal with the middle
take care of that so there's the basic
audio
to play now I'm a an attribute here
called
auto plant which I'm not a big fan of
but let's just about anywhere
so now I've got this autoplay attribute
inside my all your texts
get the same come back over to my
browser where's my browser
characters all the way down there
back over here refresh okay my music is
playing
so let me jump back over my editor now
ok takes autoplay Outd
say Eve browser refresh now it's not on
a plane I need to be able to control it
so I mean adduct controls attributes
there we go
whoops wrong button what's that
say leave refresh so not gots
controls here like it play button I can
see the countdown timer
and I can't even control mutes ok
okay a by the way these controls in a
little different depending on the
browser in question cell
got that taken care what else can you do
will you can also
loop the music if you want to do and we
put a little playback im
refresh
excellent I can advance to different
parts
there we go
that's a little bit about the audio
control now video works very very
similar
K something to do it opening in closing
video tag in in between those I'm and a
half
source attribute with the source I'm
sorry source tag with source attribute
and once you've got several video
formats here HTML basics is a video
tutorial a maid
normally when I make a tutorial or video
for youtube accident mp4 format
side get that one but for today
I've also got into GV video format
and the web im video formats L few
different video formats
basic same concept a
mp4 now works for Chrome Safari and I
and ie9 but it doesn't work for Firefox
and opera
below GV is supported by Firefox in
opera now the web in format that's the
one that you know that YouTube a start
Jake
experiment a little bit more with & Wed
in town is also supported by chrome and
opera searle but not Firefox
so once again my muse and different
video formats here
same reason I used audio formats that we
all the top browsers get something that
they like
and here we go so we've got the itch
that take care but also want to put in
so much stuff so I'm getting my video
tag
and I'm gonna put in with equals 500 for
500 pixels wide and Oakland height
because 280 that's pretty good HD
resolution there
and give me some controls we've seen
this before good save those
jam-packed over the browser refresh
hoops
get that music on a plane but otherwise
here's mine video
and I've got the controls hey this is
relevant and I can play that video
so let me see what else we can do in
addition to putting its include trolls
you can also do a Yom preload
there we guess I can put a pre lubed
attributes inside my opening video tag
you won't notice much of a difference
here on by the way to go to get
autoplay out so that doesn't sheep taken
on take out the auto played ever gets a
video
say back to the browser refresh
in basically this will be better over
over the Internet but
preload will start downloading the video
it seems the page loads up
it doesn't have to wait for the person
to literally hit the play button
that's pretty cool now you'll notice to
this video is just putting in the
opening frame
the shot well there's another attribute
we can put inside this
opening video tag I can put in booster
equals in the name of some image image
file I got post-production energy
okay RTC to my computer so
poster attribute will display a
thumbnail image
for your videos only minimize group lead
jump at government browser
refresh their Gilson I've got a
thumbnail
for that particular video has a really
slick so we've got Dom
we get the audio tag and we got the
video tag
and of course this is giving this away
from those olden days when we had to use
in bed tags: Riva object tags: so this
is the new latest greatest way to get on
your video on your page
no need to use flash you can use some
relatively popular audio and video file
formats you might have to use a couple
in the short term in tall
support its really wide across all
browsers but they're really easy to use