css 有没有一种方法可以改变html视频对象的源代码而不使其看起来很小?

qgzx9mmu  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(127)

我正在尝试做一个类似视频通话界面的东西,但我播放的视频是根据用户的React生成的。我需要能够在当前显示的视频到下一个生成的视频之间切换,而无需HTML折叠和重建视频元素。
我试着用JavaScript改变视频的来源,希望它能带来无缝的过渡,但这导致视频“崩溃”,然后再次形成。
JavaScript看起来像这样:

const video_html = document.getElementById('video');
function changeSource(path){
        video_html.src = path;
}
ikfrs5lh

ikfrs5lh1#

您遇到的问题可能是由于浏览器尚未加载视频时,您试图切换其来源。
您可以使用canplaythrough事件,当用户代理可以播放媒体时,该事件会被触发,并估计如果现在开始播放,则不需要停止以进行进一步的缓冲。有关更多信息,请参阅此内容。
canplaythrough_event mozilla developer
就像这样

const video_html = document.getElementById('video');

function changeSource(path){
    // Pause and reset the current video
    video_html.pause();
    video_html.src = path;
    video_html.load();

    // Listen for the canplaythrough event to start the video
    video_html.oncanplaythrough = function () {
        video_html.play();
    };

    // Error handling
    video_html.onerror = function() {
        console.log('Error occurred when trying to load video');
    };
}

相关问题