Невозможно воспроизвести видеофайл в формате mp4, используя расширение источника мультимедиа HTML5 - PullRequest
Новая
       17

Невозможно воспроизвести видеофайл в формате mp4, используя расширение источника мультимедиа HTML5

0 голосов
/ 02 июля 2019

У меня возникла странная проблема при воспроизведении видео в формате mp4 с использованием видео HTML 5.

Ниже приведен мой HTML-код, где я установил «IntroVideo.mp4» в качестве источника видео, который существует.Я тестировал и в Firefox Quantum 67.0.4 (64-разрядная версия), и в chrome 75.0.3770.100, он отлично работает.

~ \ ClientApp \ Index.html 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <video  id="mainPlayer" class="video" 
            width="640"  height="360"
            autoplay="autoplay"  controls="controls">
                <source src="IntroVideo.mp4" />
    </video>
</body>
</html>

НоЯ должен воспроизводить видео с помощью API MediaSource, где-то, где я нашел код и изменил его в соответствии с моими потребностями, как показано ниже, использовал то же MP4-видео, что и выше, но оно не работает в обоих браузерах.Я использовал видео со следующей закодированной информацией - MPEG-4 (Base Media / Version 2) Видеопоток: AVC Аудиопоток: AAC LC

Если я использую .webm видео, он работает нормально .. Пожалуйста, предложите мне ..Я что-то пропустил?или это проблема с поддержкой кодеков в браузере?если это так, он не должен воспроизводиться в приведенном выше примере ..

~ \ ClientApp \ Index.html 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <video  id="mainPlayer" class="video" 
            width="640"  height="360"
            autoplay="autoplay"  controls="controls">
    </video>

    <script src="main.js"></script>
</body>
</html>

~ \ ClientApp \ main.js 

try {
    if (!'MediaSource' in window)
        throw new ReferenceError('There is no MediaSource property in window object.');

    var mime = 'video/mp4; codecs="avc1.64001E"';

    if (!MediaSource.isTypeSupported(mime)) {
        alert('Can not play the media. Media of MIME type ' + mime + ' is not supported.');
        throw ('Media of type ' + mime + ' is not supported.');
    }

    var audio = document.querySelector('video'),
        mediaSource = new MediaSource();

    audio.src = URL.createObjectURL(mediaSource);

    mediaSource.addEventListener('sourceopen', function () {
        var sourceBuffer = this.addSourceBuffer(mime);
        sourceBuffer.appendWindowEnd = 4.0;
        var xhr = new XMLHttpRequest;
        xhr.open('GET', 'IntroVideo.mp4');
        xhr.responseType = 'arraybuffer';
        xhr.onload = function () {
            try {
                switch (this.status) {
                    case 200:
                        sourceBuffer.appendBuffer(this.response);
                        sourceBuffer.addEventListener('updateend', function (_) {
                            if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
                                mediaSource.endOfStream();
                            }
                        });
                        break;
                    case 404:
                        throw 'File Not Found';
                    default:
                        throw 'Failed to fetch the file';
                }
            } catch (e) {
                console.error(e);
            }
        };
        xhr.send();
    });
} catch (e) {
    console.error(e);
}
...