# Bab 5: Multimedia dan Embedded Content

## Bab 5: Multimedia dan Embedded Content

### 5.1 Audio dan Video

#### 5.1.1 Audio Element

1. **Basic Audio Implementation**

   ```html
   <audio src="music.mp3" controls>
       Browser Anda tidak mendukung audio element.
   </audio>
   ```
2. **Audio dengan Multiple Sources**

   ```html
   <audio controls>
       <source src="music.ogg" type="audio/ogg">
       <source src="music.mp3" type="audio/mpeg">
       Browser Anda tidak mendukung audio element.
   </audio>
   ```
3. **Audio Attributes**

   ```html
   <audio 
       src="music.mp3"
       controls
       autoplay
       loop
       muted
       preload="auto"
   >
       Browser Anda tidak mendukung audio element.
   </audio>
   ```

#### 5.1.2 Video Element

1. **Basic Video Implementation**

   ```html
   <video src="video.mp4" controls width="640" height="360">
       Browser Anda tidak mendukung video element.
   </video>
   ```
2. **Video dengan Multiple Sources**

   ```html
   <video controls width="640" height="360">
       <source src="video.webm" type="video/webm">
       <source src="video.mp4" type="video/mp4">
       <source src="video.ogv" type="video/ogg">
       Browser Anda tidak mendukung video element.
   </video>
   ```
3. **Video dengan Tracks**

   ```html
   <video controls width="640" height="360">
       <source src="video.mp4" type="video/mp4">
       <track 
           src="subtitles_id.vtt" 
           kind="subtitles" 
           srclang="id" 
           label="Indonesia"
       >
       <track 
           src="subtitles_en.vtt" 
           kind="subtitles" 
           srclang="en" 
           label="English"
       >
   </video>
   ```

#### 5.1.3 Media Controls

1. **Custom Controls**

   ```html
   <div class="video-container">
       <video id="myVideo" src="video.mp4">
           Browser Anda tidak mendukung video element.
       </video>
       
       <div class="custom-controls">
           <button onclick="document.getElementById('myVideo').play()">
               Play
           </button>
           <button onclick="document.getElementById('myVideo').pause()">
               Pause
           </button>
           <input 
               type="range" 
               id="seekBar" 
               value="0"
               onchange="seekVideo()"
           >
           <button onclick="document.getElementById('myVideo').requestFullscreen()">
               Fullscreen
           </button>
       </div>
   </div>
   ```
2. **JavaScript Media API**

   ```javascript
   const video = document.getElementById('myVideo');

   // Play/Pause
   video.play();
   video.pause();

   // Volume Control
   video.volume = 0.5; // 0.0 to 1.0

   // Playback Speed
   video.playbackRate = 1.5;

   // Current Time
   video.currentTime = 30; // Skip to 30 seconds

   // Duration
   console.log(video.duration);
   ```

### 5.2 Embedded Content

#### 5.2.1 iframes

1. **Basic iframe**

   ```html
   <iframe 
       src="https://www.example.com"
       width="600"
       height="400"
       frameborder="0"
   ></iframe>
   ```
2. **Security Attributes**

   ```html
   <iframe 
       src="https://www.example.com"
       sandbox="allow-same-origin allow-scripts"
       referrerpolicy="no-referrer"
       loading="lazy"
   ></iframe>
   ```

#### 5.2.2 Embedding Maps

1. **Google Maps**

   ```html
   <iframe
       src="https://www.google.com/maps/embed?pb=..."
       width="600"
       height="450"
       style="border:0;"
       allowfullscreen=""
       loading="lazy"
       referrerpolicy="no-referrer-when-downgrade"
   ></iframe>
   ```
2. **OpenStreetMap**

   ```html
   <iframe
       width="600"
       height="450"
       frameborder="0"
       scrolling="no"
       marginheight="0"
       marginwidth="0"
       src="https://www.openstreetmap.org/export/embed.html?..."
   ></iframe>
   ```

#### 5.2.3 Social Media Widgets

1. **YouTube Video**

   ```html
   <iframe
       width="560"
       height="315"
       src="https://www.youtube.com/embed/VIDEO_ID"
       title="YouTube video player"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
       allowfullscreen
   ></iframe>
   ```
2. **Twitter Timeline**

   ```html
   <a class="twitter-timeline"
      href="https://twitter.com/USERNAME"
      data-width="300"
      data-height="600">
      Tweets by @USERNAME
   </a>
   <script async src="https://platform.twitter.com/widgets.js"></script>
   ```

### 5.3 Canvas dan SVG

#### 5.3.1 Canvas Basics

```html
<canvas id="myCanvas" width="400" height="200"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Drawing a rectangle
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);

// Drawing a line
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 100);
ctx.stroke();

// Drawing a circle
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

// Adding text
ctx.font = '24px Arial';
ctx.fillText('Hello Canvas!', 10, 50);
</script>
```

#### 5.3.2 SVG Introduction

1. **Basic Shapes**

   ```html
   <svg width="400" height="200">
       <!-- Rectangle -->
       <rect x="10" y="10" width="100" height="50" fill="red"/>
       
       <!-- Circle -->
       <circle cx="200" cy="50" r="40" fill="blue"/>
       
       <!-- Line -->
       <line x1="10" y1="100" x2="100" y2="100" 
             stroke="black" stroke-width="2"/>
       
       <!-- Text -->
       <text x="10" y="150" font-family="Arial" font-size="24">
           Hello SVG!
       </text>
   </svg>
   ```
2. **Complex Paths**

   ```html
   <svg width="400" height="200">
       <path d="M10 10 L100 10 L100 100 Z" 
             fill="none" stroke="black"/>
       
       <path d="M150 50 Q200 0 250 50 T350 50"
             fill="none" stroke="blue"/>
   </svg>
   ```

#### 5.3.3 Responsive Images

1. **Picture Element**

   ```html
   <picture>
       <source 
           media="(min-width: 800px)"
           srcset="large.jpg"
       >
       <source 
           media="(min-width: 400px)"
           srcset="medium.jpg"
       >
       <img src="small.jpg" alt="Responsive image">
   </picture>
   ```
2. **Srcset Attribute**

   ```html
   <img 
       src="default.jpg"
       srcset="small.jpg 300w,
               medium.jpg 600w,
               large.jpg 900w"
       sizes="(max-width: 320px) 280px,
              (max-width: 640px) 580px,
              1000px"
       alt="Responsive image"
   >
   ```

### Latihan Praktik

#### Latihan 1: Media Player

Buat custom media player dengan:

* Video element
* Custom controls
* Progress bar
* Volume control
* Fullscreen button

#### Latihan 2: Interactive Map

Buat halaman dengan:

* Embedded Google Maps
* Custom markers
* Info windows
* Location search

#### Latihan 3: SVG Animation

Buat animasi SVG sederhana:

* Basic shapes
* Path animation
* Text effects
* Interactivity

### Ringkasan Bab

* HTML5 menyediakan native support untuk multimedia
* Embedded content memperkaya pengalaman user
* Canvas untuk grafis dinamis
* SVG untuk grafis vektor
* Responsive images untuk optimasi

### Quiz Bab 5

1. Apa perbedaan antara Canvas dan SVG?
2. Bagaimana cara membuat video responsive?
3. Apa fungsi dari track element dalam video?
4. Sebutkan atribut security penting untuk iframe!
5. Bagaimana cara mengimplementasikan responsive images?

### Referensi

* [MDN Web Docs - Multimedia](https://developer.mozilla.org/en-US/docs/Web/Media)
* [W3Schools HTML5 Tutorial](https://www.w3schools.com/html/html5_intro.asp)
* [SVG Tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial)
* [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://triyono.gitbook.io/tutorial/html/bab-5-multimedia-dan-embedded-content.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.