HTML5 видео: принудительное прекращение буферизации

Question

Как заставить событие отмены в видео HTML5? У меня есть оверлей, где, когда я закрываю его, видео должно приостановить воспроизведение, а затем прекратить буферизацию . Тем не менее, мое интернет-соединение продолжает сходить с ума. О, я использую Chrome 7.0.5 на Mac OS X 10.6.

Я попробовал пару вещей - ни одна из них не сработала:

(Для тех, кто не знаком с XUI, x $ походит на функцию обтекания jQuery)

Во-первых, отправка прерванного события HTML:

var videoEl = x$('#video_el')[0];
videoEl.pause();
var evObj = document.createEvent('HTMLEvents');
evObj.initEvent('abort', false, false);
videoEl.dispatchEvent(evObj);

Далее, изменив src, а затем принудительно загрузив:

var videoEl = x$('#video_el')[0];
videoEl.pause();
videoEl.src = "";
videoEl.load(); //tried with and without this step

РЕДАКТИРОВАТЬ: мой элемент видео выглядит примерно так:

<video id="video_el" src="<video_url>" preload="none" controls="controls" />

Опять же, ничего из этого не работает. Кто-нибудь сталкивался с этой проблемой раньше? Какие-либо предложения?

Итак, я пытаюсь заставить HTML5-элемент видео прекратить буферизацию.

Спасибо!

Answer 1

Хорошо, поэтому в течение последних нескольких дней я действительно боролся с этой проблемой.
Вот мой анализ и решение:

Короче говоря, проблема, которую я пытался решить:
Iзаметил, что проигрыватель HTML5 не прекращает загрузку, когда проигрыватель находится в режиме паузы (вообще, даже через разумное количество времени).Работая с аудиопотоком в режиме 24/7 и разрабатывая мобильный веб-сайт, я понял, что это далеко не оптимально для моих посетителей, учитывая высокое использование данных, если они оставляют сайт открытым - хотя я думаю, что некоторые операторы будут очень довольны, "пропуская""эта проблема ...
Просто чтобы прояснить, мне не особо важны файлы с фиксированной длиной.Загрузка полного файла - это в большинстве случаев функциональность, необходимая для просмотра онлайн-ресурсов (например, медленное соединение), поэтому я не пытался это предотвратить.

Анализ:
У аудиоэлемента HTML5 нет остановки (), а также у него нет опции, в которой вы можете указать объем данных, которые ему разрешено буферизовать, или способ сказать, что вы хотите, чтобы элемент прекратил буферизацию. Не путайте это с функцией preload, этоприменяется только к элементу до нажатия кнопки воспроизведения.
Понятия не имею, почему это так и почему эта функция недоступна.Если кто-то может объяснить мне, почему эти важные функции не реализованы в стандарте, который должен сделать веб-разработку для мобильных телефонов лучше и стандартизированнее, я хотел бы знать.

Решение:
Единственное работающее решение, которое яобнаружена реализация (своего рода) функции остановки в вашем аудиоэлементе следующим образом:
1. Пауза текущего проигрывателя - вы можете перехватить событие паузы на проигрывателе через audio.addEventListener ('pause', yourFunction);
2. Установите источник пустым - audio.src = "";
3. Загрузите src - audio.load ();
4. Удалите весь аудиоэлемент
5. Вставьте новыйАудиоэлемент HTML5 без определенного источника
6. Установите источник (источник, который был там в первую очередь) - audio.src = "url старого источника
7. Перезапустите событие паузы - audio.addEventListener ('pause ', current-function);

Полное введение нового аудиоплеера HTML5 необходимо для iOS. Просто сбросьте src и затем загрузите его, чтобы проигрыватель автоматическиoplay 'в моем случае ...

Для ленивых людей (включая jQuery):

var audio = $("audio").get(0);
audio.pause(0);
var tmp = audio.src;
audio.src = "";
audio.load();
$("audio").remove();

$("#audio-player").html("<audio controls preload='none'></audio>");<br>
audio = $("audio").get(0);
audio.src = tmp;
audio.addEventListener('pause', current-function);

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

Надеюсь, это поможет.

Answer 2

С preload = "none", это то, как я принудительно прервал буферизацию после приостановки видео, а затем возобновил воспроизведение в приостановленном месте, используя jQuery.

<video id="video_el" src="<video_url>" preload="none" controls="controls" />    

<script>
jQuery(function() {

  var video = jQuery('video').get(0);

  video.addEventListener('pause',function(){
     var tmp_src = video.src;
     var playtime = video.currentTime;
     video.src = '';
     video.load();
     video.src = tmp_src;
     video.currentTime = playtime;
  });

});
</script>

Answer 3

Кажется, что ключевым шагом является , а не . Установите src в пустое значение перед вызовом load(). Я добился успеха, делая это так:

var wasPlaying = !audioPlayer.paused;
audioPlayer.currentTime = 0.0; // Optional -- can be left out for pause
audioPlayer.pause();

if (wasPlaying) { // This prevents the browser from trying to load the entire source
    audioPlayer.load();
}

Как в Chrome, так и в Firefox на Win10, это вызывает событие отмены. В моем конкретном случае это было необходимо для закрытия сокетов, которые в противном случае оставались бы открытыми на неопределенный срок, что привело к достижению ограничения в шесть подключений на сервер при использовании нескольких игроков на одной странице.

Answer 4

На самом деле вы можете сделать то же самое, установив атрибут src как файл php / aspx с некоторыми параметрами для чтения содержимого файла и извлечения данных как эквивалентного типа (например, Content-Type: video/mp4). НО это не работает в IE 11 (какой сюрприз: D), тогда вам нужно будет сделать трюк выше только для этого великолепного браузера.

Используйте это ...

<video id="v1" preload="none">
  <source src="video.php?id=24" type="video/mp4">
</video>

Вместо этого ...

<video id="v2" preload="none">
  <source src="video-24.mp4" type="video/mp4">
</video>

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

Я тестировал с использованием Chrome 32, Firefox 26, Opera 18 и IE 11 следующий скрипт

setInterval(function() {
    var r = [];

    try {
        r.push(v1.buffered.end(0));
    } catch(e) {
        r.push('nahh');
    };

    try {
        r.push(v2.buffered.end(0));
    } catch(e) {
        r.push('second nahh');
    };

    console.log(r.join(', '));
}, 500);

В моих локальных тестах ...

Firefox 26 После того, как вы нажали кнопку воспроизведения, он ВСЕГДА буферизировал полный файл.

IE 11 (учитывая src="video-24.mp4", потому что другие не работают) После того, как вы нажали play, он ВСЕГДА буферизировал файловый чанк по чанку, даже если он был приостановлен, и полностью игнорирует атрибут preload="none".

Chrome 32 отлично работает (то же самое для Opera 18).

Answer 5

См. Здесь: http://dev.w3.org/html5/spec/video.html#attr-media-preload

Возможно, вы могли бы установить preload на none?

В случае, если это не работает: вы можете получить его атрибуты, удалить еговставить новый элемент видео и присвоить этому элементу сохраненные атрибуты?