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

   <audio src="music.mp3" controls>
       Browser Anda tidak mendukung audio element.
   </audio>

2. Audio dengan Multiple Sources

   <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

   <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

   <video src="video.mp4" controls width="640" height="360">
       Browser Anda tidak mendukung video element.
   </video>

2. Video dengan Multiple Sources

   <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

   <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

   <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

   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

   <iframe 
       src="https://www.example.com"
       width="600"
       height="400"
       frameborder="0"
   ></iframe>

2. Security Attributes

   <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

   <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

   <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

   <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

   <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

<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

   <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

   <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

   <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

   <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

• W3Schools HTML5 Tutorial

• SVG Tutorial

• Canvas API