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

Create the video probably in .mov format
Video is rendered/converted into different formats so that it will show up on all modern browsers (Safari, Chrome, IE, Firefox, Opera, etc.)
- Background_Video.mp4 (for Safari, Chrome, IE)
  - for files 100 MB or less, use https://video.online-convert.com/convert-to-mp4 to convert your video to .mp4 format for non-Firefox browsers
  - for files more than 100 MB, use VLC - follow these instructions
- Background_Video.ogg (for Firefox and Opera)
  - for files 100 MB or less, use https://video.online-convert.com/convert-to-ogg to convert your video to .ogg format for Firefox browsers
  - for files more than 100 MB, use VLC - follow these instructions
Move the converted and downloaded .mp4 and .ogg files to the right location Websites/projectX/media
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:

The file name of and path to the video file don't match the code in the src="../media/filename.mp4". Solution: make sure the file names and the code match
Be sure to put up the media folder so the video file exists on the webserver for proper display.