Другое: принудительно Chrome полностью загружать mp4-видео

Я видел несколько потоков об этом, но без ответов, поэтому я подумал, что добавлю еще один фрагмент грязных страниц, связанных с youtube.

У меня есть 100 МБ видео mp4, которое нужно полностью загрузить браузером,

Однако это не событие, которое срабатывает при его полной загрузке, и Chrome, похоже, перестает буферизировать видео, пока текущее время видео почти не достигнет конца буфера, а затем запросит больше.

Как я могу заставить браузеры полностью загрузить видео и загрузить его на 100%?

Спасибо

Ответы

Ответ 1

Печально Chrome - как и другие браузеры HTML5 - пытается быть уверенным в том, что он загружает и избегает ненужного использования полосы пропускания... это означает, что иногда у нас остается неоптимальный опыт (по иронии судьбы, YouTube страдает от этого настолько, что есть расширения, чтобы усилить предварительную буферизацию!)

Тем не менее, я не нашел, что это требуется слишком часто с хорошим сервером и хорошим соединением, но если вам что-то нужно, единственное решение, которое я нашел, - это кувалда... использовать Ajax для загрузки файл, который вы хотите воспроизвести, а затем загрузить его в источник для элемента видео.

В приведенном ниже примере предполагается, что ваш браузер поддерживает m4v/mp4 - вы, вероятно, захотите использовать тест canPlayType, чтобы выбрать наиболее подходящий формат видео для своих пользователей, если вы не можете гарантировать (например, Chrome). Вы также захотите проверить, насколько хорошо он обрабатывает видео размера, который вы хотите (я пробовал некоторые довольно большие, но не уверен, какой верхний предел это будет надежно обрабатывать)

Образец также довольно прост... он запускает запрос и не передает ничего пользователю, пока он загружается - с вашим размером видео вы, вероятно, захотите показать индикатор выполнения, чтобы сохранить их интересно...

другой недостаток этого процесса заключается в том, что он не начнет воспроизводиться до тех пор, пока вы не полностью загрузите файл - если вы хотите глубже отобразить видео динамически из своего буфера, вам нужно будет начать вникать в (в настоящий момент) мир MediaSource, как описано в сообщениях, таких как http://francisshanahan.com/index.php/2013/build-an-mpeg-dash-player-from-scratch/

<!DOCTYPE html>
<html>
<head>
<title>Preload video via AJAX</title>
</head>
<body>
<script>
console.log("Downloading video...hellip;Please wait...")
var xhr = new XMLHttpRequest();
xhr.open('GET', 'BigBuck.m4v', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    console.log("got it");
    var myBlob = this.response;
    var vid = (window.webkitURL || window.URL).createObjectURL(myBlob);
    // myBlob is now the blob that the object URL pointed to.
    var video = document.getElementById("video");
    console.log("Loading video into element");
    video.src = vid;
    // not needed if autoplay is set for the video element
    // video.play()
   }
  }

xhr.send();
</script>

<video id="video" controls autoplay></video>

</body>
</html>

Ответ 2

Мое решение для гораздо меньшего видео, чем описано в OP, однако желаемое поведение одинаковое: запретите воспроизведение видео до тех пор, пока видео не будет полностью буферизировано. Видео должно воспроизводиться для возвращающихся пользователей, если видео уже кэшировано.

В ответе ниже ответ был в большой степени повлиял и был протестирован в Chrome, Safari и Firefox.

Файл Javascript:

    $(document).ready(function(){
      // The video_length_round variable is video specific.
      // In this example the video is 10.88 seconds long, rounded up to 11.
      var video_length_round = 11;

      var video = document.getElementById('home_video_element');
      var mp4Source = document.getElementById('mp4Source');

      // Ensure home_video_element present on page
      if(typeof video !== 'undefined'){

        // Ensure video element has an mp4Source, if so then update video src
        if(typeof mp4Source !== 'undefined'){
          $(mp4Source).attr('src', '/assets/homepage_video.mp4');
        }

        video.load();

        // Ensure video is fully buffered before playing
        video.addEventListener("canplay", function() {
          this.removeEventListener("canplay", arguments.callee, false);

          if(Math.round(video.buffered.end(0)) >= video_length_round){
            // Video is already loaded
            this.play();

          } else {
            // Monitor video buffer progress before playing
            video.addEventListener("progress", function() {
              if(Math.round(video.buffered.end(0)) == video_length_round){
                this.removeEventListener("progress", arguments.callee, false);
                video.play();
              }
            }, false);
          }
        }, false);
      }
    });

Над javascript обновляет источник видеоэлемента, такого как этот:

    <video id="home_video_element" loop="" poster="/assets/home/video_poster_name.jpg" preload="auto">
      <source id="mp4Source" type="video/mp4">
    </video>