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

PreviousBab 4: Semantic HTMLNextBab 6: HTML5 APIs dan Advanced Features

Last updated