HTML ELEMENT: VIDEO
HTML Video
The HTML <video> element is used to play an video file on a web page.The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads. The <source> element allows you to specify alternative video files which the browser may choose from.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
HHTML <video> Autoplay
To start a video automatically, use the autoplay attribute. Add muted after autoplay to let your video start playing automatically (but muted):
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Video Format:
list use the attribute type to help define the type of list item maker.
- MP3: this format is in audio/mpeg
- Wav: this format is in audio/wav
- Ogg: this format is in audio/ogg
HTML YouTube Videos
The easiest way to play videos in HTML, is to use YouTube.Converting videos to different formats can be difficult and time-consuming.An easier solution is to let YouTube play the videos in your web page.
YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video. You can use this id, and refer to your video in the HTML code. you embed a youtube video in an iframe element. using the Src (Url) to link it to the Video id in youtube.
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
YouTube Autoplay + Mute
You can let your video start playing automatically when a user visits the page, by adding autoplay=1 to the YouTube URL. you can also add mute=1 after autoplay=1 to let your video start playing automatically (but muted).
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
YouTube Loop
Add loop=1 to let your video loop forever.
- Value 0 (default): The video will play only once.
- Value 1: The video will loop (forever).
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
YouTube Controls
Add controls=0 to not display controls in the video player.
- Value 0: Player controls does not display.
- Value 1 (default): Player controls display.
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0"> </iframe>
