2022/12/15

【My Study Note】Video and Audio

HTML Programming

Video and Audio

Common Video Types

• .mp4
• .webm
• .ogg

Common Audio Types

• .mp3
• .wav
• .ogg

Video

<video width="320" height="200" controls>
    <source src="dance.mp4" type="video/mp4">
    <source src="dance.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

• 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. The browser will use the first recognized format.
• The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

Audio

<audio width="320" height="200" controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    Your browser does not support the audio tag.
</audio>

• The <audio> tag is used to embed sound content in a document, such as music or other audio streams.
• The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports.
• The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
• mpeg would be used when using mp3 because it is short for MPEG-1 Audio Layer 3

Loop Attribute

<audio width="320" height="200" controls loop>
</audio>

Specifies that the audio will start over again, every time it is finished.

HTML Programming

• Tweet
• LINE
• facebook