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

Ответ 1

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

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

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

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

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

Для ленивых людей (включая 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);

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

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

Ответ 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>

Ответ 3

Смотрите здесь: http://dev.w3.org/html5/spec/video.html#attr-media-preload

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

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

Ответ 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 следующие script

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);

В моих тестах localhosts...

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

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

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