[ad_1]
In January 2015 YouTube announced that it would drop Flash for HTML5 video as default. It means that now webmasters can use YouTube embed player to stream videos on their sites and be sure that there will not be any issues with mobile playback. However, YouTube player is not the best solution to show video on a website in case:
- Your videos don’t comply with YouTube policy, e.g. because of copyright issues.
- Your content is for commercial use only and you’re afraid that it can be ripped off YouTube.
- You need custom design for your videos.
Whatever your reason is, the solution is one and the same: you have to self-host your videos and embed them onto your webpages using HTML5 ‘<video>’ tag.
Prepare video files in right formats
HTML5 specification requires video to be presented in three video formats: MP4, WebM and OGG. It provides the compatibility with all main browsers.
As we see from the table, MP4 format is supported by all major browsers. Still not every MP4 video will be playable via HTML5 ‘<video>’ tag. The codecs are very important.
For MP4 format, you have to pick up H.264 video codec and AAC audio codec to make sure that video will be stream in all browsers. If audio is encoded with MP3 codec, MP4 video will go without sound in Safari and Firefox.
Therefore, it’s also advisable to have at least two video qualities for web integration, for instance MP4 and WebM or MP4 or OGG. The browser will use the first recognized format.
To prepare video files, you may use Freemake Video Converter. This free software has the option “to HTML5” which allows webmasters to get HTML5 compatible files in bunch.
Upload files to your server
If you run your site on WordPress, simply upload the videos for integration as regular media files.
WordPress may set limits to the maximum file size for upload. So if your file is above the limit or you don’t use WordPress, you should upload the files to your server via FTP. FileZilla is a nice free solution to help you with that task.
Add HTML5 player to a web page
There are numerous ways to grab an HTML5 video player for embedding. Let’s start with your manual coding. Here is how a sample HTML5 web player looks like:
<video width="640" height="360" controls>
<source src="https://inscribemag.com/how-to-embed-a-self-hosted-html5-video/path/myvideo.mp4" type="video/mp4">
<source src="https://inscribemag.com/how-to-embed-a-self-hosted-html5-video/path/myvideo.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Having inserted this code between the tags <body> and </body> with the appropriate video file destinations, you’ll get something like this:
Customize your player (optional)
The ‘’ element has several attributes which you can change or enhance its default behavior:
| Attribute | What’s for | How to change |
| autoplay | Tells the browser to immediately start playing the video when someone opens the web page. Does not work in Safari and Opera, or in mobile devices like iPad and iPhone. | Add it to the ‘<video>’ tag if you want your video to start playing immediately |
| preload | Tells the browser about whether optimistic downloading of the video itself or its metadata is considered worthwhile. | Options are: none – Hints to the browser that the user likely will not watch the video, or that minimizing unnecessary traffic is desirable. metadata – Hints to the browser that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, track list, duration, and so on) is desirable. auto – Hints to the browser that optimistically downloading the entire video is considered desirable. |
| poster | Provides an image to show before the video loads . | Upload an image to your server add the following code to the ‘<video>’ tag: ‘poster=”poster.png”‘. |
| controls | Shows the default video controls (play, pause, volume, etc.). | Remove the attribute if you don’t want to show controls for your video. |
| height & width | Sets the width and height of the video in CSS pixels. | Change the respective value within width and height parameters to change the player size. |
| loop | Tells the browser to automatically loop the video. | Add it to the ‘<video>’ tag if you need a looped video. |
| muted | Mutes the audio from the video. | Add it to the ‘<video>’ tag if you want to mute the audio. |
| track | Provides a simple, standardized way to add subtitles, captions, screen reader descriptions and chapters to your video. | Read here about the modification of this attribute. |
In case you need Flash fallback for old browser versions, you can grab the code for this here.
Good luck with HTML5!
Author Bio:
Terry Smith is a freelance web developer and writer. He blogs about digital trends, popular software, and shares his webmastering expertise. Follow Terry on Twitter.
[ad_2]
Source link