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
- Background_Video.mp4 (for Safari, Chrome, IE)
- 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.