<script>
// Create audio context
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// Audio processing chain
function createAudioEffects(audio) {
    const source = audioContext.createMediaElementSource(audio);
    
    // Create effects nodes
    const gainNode = audioContext.createGain();
    const filterNode = audioContext.createBiquadFilter();
    const analyserNode = audioContext.createAnalyser();
    
    // Configure filter
    filterNode.type = 'lowpass';
    filterNode.frequency.value = 1000;
    
    // Connect audio chain
    source.connect(filterNode);
    filterNode.connect(gainNode);
    gainNode.connect(analyserNode);
    analyserNode.connect(audioContext.destination);
    
    return { source, gainNode, filterNode, analyserNode };
}

// Volume control with Web Audio API
function setVolume(volume) {
    if (gainNode) {
        gainNode.gain.value = volume;
    }
}

// Audio visualization
function visualizeAudio(analyser) {
    const canvas = document.getElementById('audioCanvas');
    const ctx = canvas.getContext('2d');
    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);
    
    function draw() {
        analyser.getByteFrequencyData(dataArray);
        
        ctx.fillStyle = 'rgb(0, 0, 0)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        const barWidth = (canvas.width / bufferLength) * 2.5;
        let x = 0;
        
        for (let i = 0; i < bufferLength; i++) {
            const barHeight = dataArray[i] / 2;
            
            ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
            ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
            
            x += barWidth + 1;
        }
        
        requestAnimationFrame(draw);
    }
    
    draw();
}
</script>

<script>
// Create 3D audio context
function create3DAudio() {
    const audioContext = new AudioContext();
    const listener = audioContext.listener;
    
    // Set listener position (user's position)
    listener.positionX.value = 0;
    listener.positionY.value = 0;
    listener.positionZ.value = 0;
    
    // Set listener orientation
    listener.forwardX.value = 0;
    listener.forwardY.value = 0;
    listener.forwardZ.value = -1;
    listener.upX.value = 0;
    listener.upY.value = 1;
    listener.upZ.value = 0;
    
    return audioContext;
}

// Position audio source in 3D space
function positionAudioSource(audioContext, audioElement, x, y, z) {
    const source = audioContext.createMediaElementSource(audioElement);
    const panner = audioContext.createPanner();
    
    // Configure 3D audio parameters
    panner.panningModel = 'HRTF';
    panner.distanceModel = 'inverse';
    panner.refDistance = 1;
    panner.maxDistance = 10000;
    panner.rolloffFactor = 1;
    panner.coneInnerAngle = 360;
    panner.coneOuterAngle = 0;
    panner.coneOuterGain = 0;
    
    // Set position
    panner.positionX.value = x;
    panner.positionY.value = y;
    panner.positionZ.value = z;
    
    // Connect audio chain
    source.connect(panner);
    panner.connect(audioContext.destination);
    
    return { source, panner };
}
</script>

<video controls>
    <!-- Multiple quality sources -->
    <source src="video-4k.mp4" type="video/mp4" media="(min-width: 1920px)">
    <source src="video-1080p.mp4" type="video/mp4" media="(min-width: 1280px)">
    <source src="video-720p.mp4" type="video/mp4" media="(min-width: 720px)">
    <source src="video-480p.mp4" type="video/mp4">
    
    <!-- Format fallbacks -->
    <source src="video.webm" type="video/webm">
    <source src="video.ogv" type="video/ogg">
</video>

<script>
// Adaptive bitrate streaming simulation
class AdaptiveStreaming {
    constructor(video) {
        this.video = video;
        this.qualities = [
            { resolution: '480p', bitrate: 500 },
            { resolution: '720p', bitrate: 1500 },
            { resolution: '1080p', bitrate: 3000 },
            { resolution: '4K', bitrate: 8000 }
        ];
        this.currentQuality = 1;
    }
    
    measureBandwidth() {
        // Simulate bandwidth measurement
        return new Promise((resolve) => {
            setTimeout(() => {
                const bandwidth = Math.random() * 10000 + 1000; // 1-11 Mbps
                resolve(bandwidth);
            }, 1000);
        });
    }
    
    async adaptQuality() {
        const bandwidth = await this.measureBandwidth();
        let optimalQuality = 0;
        
        for (let i = 0; i < this.qualities.length; i++) {
            if (bandwidth > this.qualities[i].bitrate * 1.5) {
                optimalQuality = i;
            }
        }
        
        if (optimalQuality !== this.currentQuality) {
            this.switchQuality(optimalQuality);
        }
    }
    
    switchQuality(newQuality) {
        const currentTime = this.video.currentTime;
        const wasPlaying = !this.video.paused;
        
        // Switch to new quality source
        // This would typically involve HLS or DASH streaming
        console.log(`Switching from ${this.qualities[this.currentQuality].resolution} to ${this.qualities[newQuality].resolution}`);
        
        this.currentQuality = newQuality;
        
        // Restore playback position
        this.video.currentTime = currentTime;
        if (wasPlaying) {
            this.video.play();
        }
    }
}
</script>

<video controls 
       aria-label="Educational video about web development"
       aria-describedby="video-description">
    
    <source src="video.mp4" type="video/mp4">
    
    <!-- Multiple caption tracks -->
    <track kind="captions" src="captions-en.vtt" srclang="en" label="English" default>
    <track kind="captions" src="captions-es.vtt" srclang="es" label="Español">
    <track kind="captions" src="captions-fr.vtt" srclang="fr" label="Français">
    
    <!-- Audio descriptions -->
    <track kind="descriptions" src="audio-descriptions.vtt" srclang="en" label="Audio Descriptions">
    
    <!-- Chapter navigation -->
    <track kind="chapters" src="chapters.vtt" srclang="en" label="Chapters">
    
    <!-- Fallback content -->
    <p>This video demonstrates web development concepts. 
       <a href="transcript.html">Read the full transcript</a> or 
       <a href="video.mp4" download>download the video</a>.</p>
</video>

<div id="video-description" class="sr-only">
    A comprehensive tutorial covering HTML5 video implementation, 
    including accessibility features and modern streaming techniques.
</div>

<!-- Accessible video controls -->
<div class="accessible-controls" role="toolbar" aria-label="Video controls">
    <button id="playBtn" aria-label="Play video" aria-pressed="false">
        <span class="sr-only">Play</span>
        ▶️
    </button>
    
    <button id="captionToggle" aria-label="Toggle captions" aria-pressed="false">
        <span class="sr-only">Captions</span>
        💬
    </button>
    
    <div class="volume-control" role="slider" 
         aria-label="Volume" 
         aria-valuemin="0" 
         aria-valuemax="100" 
         aria-valuenow="100">
        <input type="range" min="0" max="100" value="100" 
               aria-label="Volume control">
    </div>
</div>

WEBVTT

NOTE
This is a sample WebVTT file for video captions

1
00:00:00.000 --> 00:00:05.000
Welcome to our HTML5 video tutorial.

2
00:00:05.000 --> 00:00:10.000
Today we'll learn about advanced multimedia features.

3
00:00:10.000 --> 00:00:15.000
<v Instructor>Let's start with basic video implementation.

4
00:00:15.000 --> 00:00:20.000 position:10% align:left size:35%
You can position captions anywhere on screen.

5
00:00:20.000 --> 00:00:25.000
<c.highlight>This text is highlighted</c> for emphasis.

NOTE
Chapter markers for navigation

CHAPTER 1
00:00:00.000 --> 00:05:00.000
Introduction

CHAPTER 2
00:05:00.000 --> 00:10:00.000
Basic Implementation

CHAPTER 3
00:10:00.000 --> 00:15:00.000
Advanced Features