Tip:
Highlight text to annotate it
X
One of the big premises of HTML5 is that it eliminates the need of having a Flash player
to embed video. And if you use the correct format or formats, it should play on pretty
much nay browser. I'm currently working on a Mac laptop. I have three different browser
that I'm using. I have Safari, I have Firefox, and I have Chrome. And this is exact same
page and it displays, you'll notice that each one displays differently. I did not specify size, I also
have sound on each one of these, where I have a simple recording obviously. So you can watch
these or listen to them if you wish. And I have links to the source for each of these.
For each one, to make it work on any browser, you need two sources. For the video you need
mp4 and webm, all the major browsers use one of those two. Sounds mp3 or .ogg. Every major
browser uses one of those too. To get these resources you will just, OK I'm in Safari,
Download Linked File As, or save link as. It will give you the option of where to save
it. So this gives you the files for you to recreate this page and make it work. Now,
you know that I grade where the average is a 70%. The average student will take my content
and reuse it. And that's fine. That's average. It gets you 70%. If you want the 100% on the
assignment, create your own content. You can take content off of an iPhone or any smartphone
for both video and sound, there is online converters. Just Google them to convert into
the formats that you need. And you need mp4 and webm for movie. and mp3 and ogg for sound.
And there is lots of free online converters that you can just Google and use. So if you
want a 100%, make sure to create your own content. Let's look at the source code. OK,
I'm in Firefox which is my preference. And I've kept it really simple. I have hardly
even styled it. I just can't stand sans-serif fonts so I've changed that. So you'll see
that for the video, I have controls equal controls. This puts your play head on it.
And then I have two sources - forms.webm and forms.mp4. And it will use the first one it
runs into that is supported by the browser. Same thing for the audio. samplesound.mp3,
samplesound.ogg and they work in all of the browsers. So again, if you just want to make
your basic page, I want you to try this and make the video and the audio work. You can
use mine by downloading them or you can create your own, which is what I'd prefer to see
you do.