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

Question

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

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

(Для тех, кто незнаком с XUI, х $, как функции оберточной JQuery)

Во-первых, диспетчирование в аварийное завершение HTML Событие:

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

Далее, меняя СРК, а затем заставляя груз:

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

EDIT: Мой элемент видео выглядит примерно так:

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

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

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

Спасибо!

Answer 1

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

Короче проблема я пытался решить:
я заметил, что игрок 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. Rehook пауза событие - audio.addEventListener («пауза», ток-функция);.

Полностью инъекционный новый аудиоплеер HTML5 необходим для прошивки Просто сброс СРКА, а затем загрузить его заставляет игрок на «автовоспроизведение» в моем случае ...

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

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

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

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

Answer 3

На самом деле вы можете сделать то же самое, установив атрибут 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); 

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

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

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

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

Answer 4

С 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>