Svelte视频播放器音量调节导致画面卡顿的解决方案

<script>
    import { onMount } from 'svelte';
    import Hls from 'hls.js';

    let video; // 绑定到 <video> 元素
    let volume = 50; // 初始音量
    let maxVolume = 100;
    let isMuted = false;
    let hls;

    // ... 其他变量如 duration, resolutions ...

    function handleVolume(event) {
        volume = event.target.value;
        isMuted = volume === 0;
        // 实际更新视频音量
        updateVideoVolume();
    }

    function updateVideoVolume() {
        if (video) {
            video.volume = volume / maxVolume;
        }
    }

    // ... 可能的防抖函数 ...

    onMount(() => {
        if (Hls.isSupported()) {
            hls = new Hls();
            let src = 'http://localhost:3000/videos/video3';
            hls.loadSource(src);
            hls.attachMedia(video);
            hls.enableWorker = true;
            // duration = video.duration; // 首次获取duration可能需要等待视频加载

            // ... Hls.js 事件监听 ...
        }
    });
</script>

<video bind:this={video} controls></video>

<input
    type="range"
    on:input={handleVolume}
    id="volume"
    name="volume"
    min="0"
    max={maxVolume}
    value={volume}
/>

<script>
    // ...
    let video;
    let playbackTime = 0; // 用于绑定 currentTime

    // 响应式声明，试图将 playbackTime 与 video.currentTime 保持同步
    $: playbackTime = video ? video.currentTime : 0;
</script>

<video bind:this={video} bind:currentTime={playbackTime}></video>

<script>
    import { onMount } from 'svelte';
    import Hls from 'hls.js';

    let video; // 绑定到 <video> 元素
    let volume = 50; // 初始音量
    let maxVolume = 100;
    let isMuted = false;
    let hls;

    // 将 playbackTime 声明为普通变量，而非响应式声明
    let playbackTime = 0; 
    // ... 其他变量如 duration, resolutions ...

    function handleVolume(event) {
        volume = event.target.value;
        isMuted = volume === 0;
        updateVideoVolume();
    }

    function updateVideoVolume() {
        if (video) {
            video.volume = volume / maxVolume;
        }
    }

    onMount(() => {
        if (Hls.isSupported()) {
            hls = new Hls();
            let src = 'http://localhost:3000/videos/video3';
            hls.loadSource(src);
            hls.attachMedia(video);
            hls.enableWorker = true;

            // 可以选择在视频加载完成后初始化或更新 playbackTime
            // 例如，监听 'loadedmetadata' 事件
            video.addEventListener('loadedmetadata', () => {
                playbackTime = video.currentTime;
                // duration = video.duration; // 在这里获取 duration 更可靠
            });

            // 如果需要实时显示播放时间，可以通过 timeupdate 事件来更新 playbackTime
            // 但如果 playbackTime 仅用于绑定 currentTime，且不需要在UI中显示，
            // 那么可以完全移除 bind:currentTime，让视频内部管理其播放时间。
            video.addEventListener('timeupdate', () => {
                // 如果需要在UI中显示播放时间，可以在这里更新一个专门用于显示的变量
                // 例如: displayPlaybackTime = video.currentTime;
            });

            // ... Hls.js 事件监听 ...
        }
    });
</script>

<video bind:this={video} controls></video>
<!-- 移除 bind:currentTime={playbackTime} -->
<!-- 如果需要控制播放时间，可以手动设置 video.currentTime = someValue; -->

<input
    type="range"
    on:input={handleVolume}
    id="volume"
    name="volume"
    min="0"
    max={maxVolume}
    value={volume}
/>