自定义 javascript 视频播放器在 11 秒后停止

Question

我目前正在为我的网站开发一个自定义的 javascript 视频播放器，以便能够显示一些节目。它在 Firefox 中运行良好，但在 chrome 中，演示视频每次 11 秒后都会停止，但缓冲过程已经加载超过 11 秒。

这里是视频播放器的链接：https://www.cankarka.com/en/portfolio

有人知道为什么会这样吗？我在控制台中没有错误。

提前致谢:)

这是我的 HTML：

            <div class="custom-video-player">
                <video class="video" src="inc/video.mp4" preload="auto"></video>
                <div class="video-controls">
                    <div class="video-bar">
                        <div id="currentBuffer" class="currentBuffer"></div>
                        <div id="currentProcess" class="currentProcess"></div>
                    </div>

                    <div class="buttons">
                        <button id="skip-back" class="skipBack" type="button"></button>
                        <button id="playPause" type="button"></button>
                        <button id="skip-front" class="skipForward" type="button"></button>
                        <button id="volumeBtn" class="volumeHigh" type="button"></button>

                        <div class="volume-slider-container">
                            <div class="volume-slider-container-inner">
                                <div id="volume-slider" class="volume-slider"></div>
                            </div>
                        </div>
                        <div class="volume-slider-range"></div>

                        <div class="videoTimer-container">
                            <span id="videoCurrentTime" class="videoTimer"></span> <span id="slash" class="videoTimer">/</span> <span id="videoTime" class="videoTimer"></span>
                        </div>

                        <button id="fullscreenToggle" class="fullscreen" type="button"></button>
                    </div>
                </div>
            </div>

这是我的 javascript 代码：

function initializeVideoPlayer()
{
var videoPlayers = document.querySelectorAll('.custom-video-player');
for (var i = 0; i < videoPlayers.length; ++i)
    {
    initControls(videoPlayers[i]);
    }
}

function initControls(videoPlayerContainer)
{
var video = videoPlayerContainer.querySelector('.video');
var videoBarContainer = videoPlayerContainer.querySelector('.video-bar');
video.onerror = function()
    {
    console.log("Error: " + video.error.code);
    };

// Timelines
var currentProcess = videoPlayerContainer.querySelector("div.currentProcess");
var currentBuffer = videoPlayerContainer.querySelector("div.currentBuffer");

// Buttons
var playPauseBtn = videoPlayerContainer.querySelector('#playPause');

video.addEventListener('timeupdate', updateTimeline);
video.addEventListener('click', togglePlayPause);
video.addEventListener('progress', updateBuffer);
playPauseBtn.addEventListener('click', togglePlayPause);
skipBackward.addEventListener('click', skipBackwardFunction);
skipForward.addEventListener('click', skipForwardFunction);
volumeBtn.addEventListener('click', setVolumeByBtn);

let mouseDown = false;
videoBarContainer.addEventListener('click', scrub);
videoBarContainer.addEventListener('mousemove', (e) => mouseDown && scrub(e));
videoBarContainer.addEventListener('mousedown', () => mouseDown = true);
videoBarContainer.addEventListener('mouseup', () => mouseDown = false);

function scrub(e)
    {
    var scrubTime = (e.offsetX / videoBarContainer.offsetWidth) * video.duration;
    video.currentTime = scrubTime;
    }

function skipForwardFunction()
    {
    video.currentTime += skipTime;
    }

function skipBackwardFunction()
    {
    video.currentTime -= skipTime;
    }

function updateBuffer()
    {
    var duration = video.duration;
    if (duration > 0)
        {
        for (var i = 0; i < video.buffered.length; ++i)
            {
            if (video.buffered.start(video.buffered.length - 1 - i) < video.currentTime)
                {
                currentBuffer.style.width = (video.buffered.end(video.buffered.length - 1 - i) / duration) * 100 + "%";
                break;
                }
            }
        }
    }

function updateTimeline()
    {
    // Timeline updaten
    var percent = (video.currentTime / video.duration) * 100;
    currentProcess.style.width = percent + "%";

    // Aktuelle Zeit anzeigen
    var min = Math.floor(video.currentTime / 60);
    var sec = Math.floor(video.currentTime - min * 60);

    if (sec < 10)
        {
        sec = "0" + sec;
        }
    if (min < 10)
        {
        min = "0" + min;
        }
    if (min >= 60 && min < 120)
        {
        min = "01:" + (min - 60);
        }
    else if (min >= 120 && min < 180)
        {
        min = "02:" + (min - 120);
        }
    else if (min >= 180 && min < 240)
        {
        min = "03:" + (min - 180);
        }
    else if (min >= 240 && min < 300)
        {
        min = "04:" + (min - 240);
        }
    else if (min >= 300 && min < 360)
        {
        min = "05:" + (min - 300);
        }
    else
        {
        min = "00:" + min;
        }

    // Gesamte Zeit berechnen
    var minTotal = Math.floor(video.duration / 60);
    var secTotal = Math.floor(video.duration - minTotal * 60);
        
    if (secTotal < 10)
        {
        secTotal = "0" + secTotal;
        }
    if (minTotal < 10)
        {
        minTotal = "0" + minTotal;
        }
    if (minTotal >= 60 && minTotal < 120)
        {
        minTotal = "01:" + (minTotal - 60);
        }
    else if (minTotal >= 120 && minTotal < 180)
        {
        minTotal = "02:" + (minTotal - 120);
        }
    else if (minTotal >= 180 && minTotal < 240)
        {
        minTotal = "03:" + (minTotal - 180);
        }
    else if (minTotal >= 240 && minTotal < 300)
        {
        minTotal = "04:" + (minTotal - 240);
        }
    else if (minTotal >= 300 && minTotal < 360)
        {
        minTotal = "05:" + (minTotal - 300);
        }
    else
        {
        minTotal = "00:" + minTotal;
        }
        
    videoCurrentTime.innerHTML = min + ":" + sec;
    videoTime.innerHTML = minTotal + ":" + secTotal;

    if (video.ended)
        {
        playPauseBtn.className = "play";
        }
    }

function togglePlayPause()
    {
    if (video.paused)
        {
        playVideo();
        }
    else
        {
        playPauseBtn.className = "play";
        video.pause();
        }
    }

function playVideo()
    {
    var playPromise = video.play();
    if (playPromise !== undefined)
        {
        playPromise.then(_ => {
            // Video started successfully
            playPauseBtn.className = "pause";
        }).catch(error => {
            // Video was interrupted
            playPauseBtn.className = "play";
        });
        }
    }
}

window.onload = initializeVideoPlayer;

Answer 1

为了调试视频，您可以使用以下代码：

const videoElement = document.getElementsByTagName('video')[0];

const b = HTMLMediaElement.prototype;

const allNames = new Set();
for (let o = b; o != Object.prototype; o = Object.getPrototypeOf(o)) {
  for (let name of Object.getOwnPropertyNames(o)) {
    allNames.add(name);
  }
}

const array = Array.from(allNames).filter(x => /^on/.test(x)).map(x => x.substring(2));

array.forEach(x => videoElement.addEventListener(x, console.log));

这表明发生了error 类型的事件，随后是timeupdate，然后是pause。

要获取实际错误，请使用videoElement.error，它显示以下内容：

{
    code: 3,
    message: "PIPELINE_ERROR_DECODE: Failed to send audio packet for decoding: {timestamp=12176542 duration=21250 size=516 is_key_frame=1 encrypted=0}"
}

这意味着您的文件已损坏，请尝试以不同的方式对其进行编码。另外，也许这个答案会有所帮助：Audio playback halts/stops on Chrome 64