Saturday, 19 April 2014

How to add HTML5 media files in your blog


How to add HTML5 media files in your blog


It is often useful and necessary to add a media file on our blog, regardless of platform. For this we can use the new HTML5 tags which are already supported by browsers other than Internet Explorer and can use the files you want without using plugins, if we use WordPress.

In this case we can use the file we have on our blog, but for this example to reduce bandwidth and server resources in my blogger blog I will use a file that I have in my Dropbox account.

If we want to use an audio file, what we do is add this code:

<audio controls>
<source src="URL the file mp3" type="audio/mpeg">
<source src="URL the file ogg" type="audio/ogg">
<embed src="URL your file mp3" type="audio/mp3" width="200" height="100"/>
</ audio>

You must replace the path for your archive, the source with audio. Ogg is for users who use browsers that do not support HTML5.

The attributes of the element AUDIO and VIDEO are: controls, autoplay, loop, muted, and preload

Controls: allows the player controls and display itself.

Autoplay: causes the file to play when the page loads.

Loop: play the one file and again.

Muted: remove the audio file.

Preload: define whether the player should load when the page loads.

If you want to show a video, is almost the same except that for AUDIO VIDEO changed, in this case the code would look like:

<video width="320" height="240" controls>
<source src="URL the file mp4" type="video/mp4">
</ video>

Copying the file from Dropbox.


In this scenario we will copy the path of a file dropbox we will replace and enter the code.

We enter our own and seek the audio file.

In the file right click and select "Share link".

Immediately a window where we click on "Get link" will open

The route has now been copied and we just replace it in the above code to embed in the blog.

You must remember that to insert the code into a selection post should the editor view in HTML or TEXT as shown WordPress.

No comments:

Post a Comment