Belajar HTML Dari Nol Sampai Mahir | Untuk Pemula | Tag Audio dan Video Pada HTML

Summary

This tutorial walks beginners through embedding and controlling audio and video elements in HTML. It covers how to prepare multimedia files (MP3 for audio and MP4 for video), create an HTML structure, and insert the appropriate `<audio>` and `<video>` tags. The tutorial explains adding basic controls for playback, enabling loops, and adjusting video size. By following these steps, users will learn to seamlessly integrate audio and video into their websites, with full interactivity for media elements such as play/pause buttons and automatic looping.

Takeaways

• 😀 This tutorial covers how to use audio and video tags in HTML for beginners.
• 😀 To follow along, prepare two files: one audio file (MP3) and one video file (MP4), and save them in a folder called 'multimedia'.
• 😀 The presenter uses an HTML file called 'pertemuan 16.html' to demonstrate the process in a web browser (Google Chrome).
• 😀 The basic structure of the HTML file includes the standard HTML framework with a title element, which is set to 'audio and video'.
• 😀 To insert audio, use the <audio> tag with a 'src' attribute pointing to the audio file's location (inside the 'multimedia' folder).
• 😀 The 'controls' attribute for the audio tag allows users to control playback (e.g., play, pause).
• 😀 The 'loop' attribute in the audio tag causes the audio to automatically restart after finishing.
• 😀 The <video> tag is used to insert video, with a 'src' attribute pointing to the video file in the 'multimedia' folder.
• 😀 Similarly to the audio tag, the 'controls' attribute is used in the video tag to provide playback control features.
• 😀 The 'width' attribute can be used to adjust the video's size (e.g., setting it to 300 pixels wide).
• 😀 Omitting the 'controls' attribute from either the audio or video tag disables user interaction with the media player, preventing playback controls.

Q & A

What is the purpose of the tutorial in the video?

The purpose of the tutorial is to teach beginners how to embed audio and video files in HTML, using the appropriate tags and attributes.

What are the file formats required for the tutorial?

The tutorial requires an MP3 file for audio and an MP4 file for video.

Where should the audio and video files be stored?

Both the audio and video files should be stored in a folder named 'multimedia'.

What HTML tag is used to embed audio in a web page?

The `<audio>` tag is used to embed audio in an HTML page.

What is the purpose of the 'src' attribute in the `<audio>` tag?

The 'src' attribute specifies the source file for the audio to be embedded, which is the path to the audio file stored in the 'multimedia' folder.

How can you control the playback of an audio element in HTML?

You can control the playback of the audio element by using the 'controls' attribute, which displays play/pause buttons and other controls.

What does the 'loop' attribute do in the `<audio>` tag?

The 'loop' attribute causes the audio to automatically restart once it finishes playing, making it play continuously.

What HTML tag is used to embed video in a web page?

The `<video>` tag is used to embed video in an HTML page.

How can you resize a video element in HTML?

You can resize the video by using the 'width' attribute to specify the desired width in pixels, such as 'width=300' to make the video 300 pixels wide.

What happens if the 'controls' attribute is removed from the `<audio>` or `<video>` tag?

If the 'controls' attribute is removed, the media element (audio or video) will not have playback controls, and users will not be able to interact with it to play, pause, or adjust volume.