Attribute | Details |
width | Sets the element’s width in pixels. |
height | Sets the element’s height in pixels. |
<source> | Defines resources of the audio or video files |
track | Defines the text track for media elements |
controls | Displays controls |
autoplay | Automatically start playing the media |
loop | Plays the media in a repeated cycle |
muted | Plays the media without sound |
poster | Assigns an image to display until a video is loaded |
HTML5 provides a new standard for embedding an audio file on a web page.
You can embed an audio file to a page using the <audio> element
<audio controls> <source src="file.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
You can embed also a video to a webpage using the <video> element:
<video width="500" height="700" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
<video>
and <audio>
element to displayUse the HTML or <audio> element to embed video/audio content in a document. The video/audio element contains
one or more video/audio sources. To specify a source, use either the src attribute or the <source> element; the
browser will choose the most suitable one.
Audio tag example:
<!-- Simple video example --> <video src="videofile.webm" autoplay poster="posterimage.jpg"> Sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="videofile.webm">download it</a> and watch it with your favorite video player! </video> <!-- Video with subtitles --> <video src="foo.webm"> <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"> <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">GoalKicker.com – HTML5 Notes for Professionals 70 </video> <!-- Simple video example --> <video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" > <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm"> <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4"> <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg"> Your browser doesn't support HTML5 video tag. </video>
Audio tag example:
<!-- Simple audio playback --> <audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay> Your browser does not support the <code>audio</code> element. </audio> <!-- Audio playback with captions --> <audio src="foo.ogg"> <track kind="captions" src="foo.en.vtt" srclang="en" label="English"> <track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska"> </audio>
Adding a video that will autoplay on a loop and has no controls or sound. Perfect for a video header or background.
<video width="1280" height="720" autoplay muted loop poster="video.jpg" id="videobg"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"> </video>
This CSS provides a fallback if the video cannot be loaded. Note that is it recomended to use the first frame of the
video as the poster video.jpg.
#videobg { background: url(video.jpg) no-repeat; background-size: cover; }
Pasqal, a Paris-based quantum computing startup, today announced that it has raised a $100 million…
Developed with Sony Group Corp, the headset will have two ultra-high-resolution displays to handle the…
After years of blistering growth, most recently fuelled by remote working and studying during the…
Omar Ishrak had stepped down and the chipmaker appointed board director Frank Yeary as his…
Canadian Prime Minister Justin Trudeau has announced a new federal investment to build and commercialise…