JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film
Freestyle Logo

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

Implementing HTML5 Video

Version 1 | Version 2 | Version 3 | Version 4 | Version 5

Purpose: How do you use HTML5 Video to showcase music or any audio without the user having to install a plug-in on their computer in order for their browsers to view the video? Use HTML5 Video like this:

Note: All browsers except Opera and Firefox can play mp4 video files, so you have to provide another format such as ogg files for these two browsers

  1. Create the video probably in .mov format
  2. Video is rendered/converted into different formats so that it will show up on all modern browsers (Safari, Chrome, IE, Firefox, Opera, etc.)
  3. Move the converted and downloaded .mp4 and .ogg files to the right location Websites/projectX/media
  4. Then copy and past the following code into the desired location on your html page

<p align="center">
<video width="853" height="480" controls autoplay><!-- remove autoplay to prevent autoplaying when page loads-->
<source src="../media/filename.mp4" type="video/mp4"><!--For non-Firefox browsers -->
<source src="../media/filename.ogg" type="video/ogg"><!--For Firefox browsers -->
Your browser does not support the HTML5 Video.<!--This will display if video can't be played-->
</video>
</p>

Typical problems:

X