How add media resources
In web a multimedia can be almost anything you can hear or see: images, video, music, sound, animation and etc.
But HTML5 standard support only mp3, wav and ogg formats for audio and mp4, mp4, WebM, and ogg for video. Other formats like swf could be supported by operating system or the browser's plugins.
For adding media you can use followed elements:
object, embed, video, audio,
iframe.
Some helper elements: param, source, track.
.
Element video
The <video> element is a standard way to embed a video in a web page for HTML 5.
The autoplay attribute allow autoplay video, but it does not work in mobile devices.
<video width="320" height="240" autoplay>
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
Your browser does not support the video tag.
</video>
Element iframe
The <iframe> element can be used for embedding media like youtube video.
code | result |
---|---|
|
Element audio
The <audio> element is a standard way to embed a audio in a web page for HTML 5.
The controls attribute show default audio controls, like play, pause, and volume.
<audio controls>
<source src="/audio/heavy-rain-daniel_simon.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Element object
The <object> element defines an embedded object within an html document. It is used to embed plug-ins (like java applets, pdf readers, Flash Players) in web pages. If media not supported, then content of the object element will be shown to user. It can be used as alternative text.
<object width="360" height="480" data="mygame.swf"></object>
<object width="100%" height="300px" data="mysnippet.html"></object>
<object data="myimage.jpg"></object>
<object data="data/test.pdf" type="application/pdf" width="300" height="200">
alt : <a href="files/mydoc.pdf">mydoc.pdf</a>
</object>
Element embed
The <embed> element defines an embedded object within an html document. In other words does same work as the object element. But It does not have a closing tag and can not contain alternative text.
<embed width="360" height="480" src="mygame.swf">
<embed width="100%" height="300px" src="mysnippet.html">
<embed src="myimage.jpg">