HTML5 Video Play/Pause вопрос

Question

Я пытаюсь построить очень простой HTML5 видео плеер:

HTML

<div class="col-lg-12 video"> 
    <video id="format-video" width="100%" height="100%" loop="loop" preload="auto"> 
    <source src="Video-AOM.mp4" type="video/mp4" /> 
    <img src="images/fallback.jpg" /> 
    </video> 
    <img class="background" src="images/video-background.jpg" /> 
    <div class="video-run"></div> 
    <div class="video-play-pause"></div> 
</div> 

машинопись

$(document).ready(function() { 
    if ($('#format-video').length > 0) { 
    var video = <HTMLVideoElement> document.getElementById('format-video'); 
    video.oncanplaythrough = function() { 
     $('.video-run').fadeIn(200); 
     $('.video-run').click(function() { 
      $(".video .background").fadeOut(200); 
      $('.video-run').fadeOut(200); 
      $('.video-play-pause').fadeIn(200); 
      $('.video-play-pause').on('click',function() { 
       if (video.paused) { 
        video.play(); 
       } 
       else { 
        video.pause(); 
       } 
      }) 
      video.play(); 
     }); 
    } 
}); 

Так что, когда видео может "прохождение", большая кнопка «игры» исчезает, когда клики исчезают, а небольшая пауза/игра исчезает.

Если я c лизать кнопку play/pause, пауза работает, но если я снова нажму на нее, она либо сыграет всего несколько секунд, либо замерзает, либо ничего не происходит.

Я тестирую на Chrome 40.0.2214.91 m.

Я попытался настроить предварительную нагрузку = "none", как предложено там: HTML5 video controls - Cannot play after pause in chrome only , но без успеха.

Не уверен, есть ли решение.

Answer 1

Так мне удалось фиксируем эту проблему путем создания предварительной нагрузки = «ни один», как не предложил там:

HTML5 video controls - Cannot play after pause in chrome only

И очистить кэш Google Chrome (который я не пытался, прежде чем я отвечал на вопрос).

Пробовал несколько раз, теперь он выглядит хорошо.

Answer 2

Что может быть может, так это то, что вы можете складывать несколько обработчиков щелчков, которые все работают и сражаются друг с другом, потому что событие «canplaythrough» может запускаться более одного раза.

Если сеть немного медленная, то что может случиться, так это то, что, как только видео начнет воспроизводиться, оно подхватит сумму, которая забуферирована, пока она не остановится на короткое время. Когда это произойдет, readyState опустится до более низкого значения. Затем, еще раз видео буферизуется, readyState возвращается к 4 и снова «может проиграть».

Если это произойдет, вы столкнетесь с проблемами. Во-первых, вы снова увидите '.video-run'. Затем у вас будет второй обработчик кликов. Если вы нажмете на нее, у вас также будет обработчик второго щелчка, прикрепленный к '.video-play-pause'. Поэтому каждый раз, когда вы нажимаете на эту кнопку, видео воспроизводится, а затем сразу же приостанавливается. Весь этот процесс мог бы повториться, каждый раз добавляя все больше и больше обработчиков кликов.

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

Обновление: Заметка о событии "canplaythrough". Это событие не должно срабатывать, пока не будет достаточно буферизированных данных, которые, по оценкам браузера, можно воспроизводить прямо по всему видео без исчерпания данных. Это не значит, что у вас есть ВСЕ данные - просто, что он подходит достаточно быстро, чтобы вы, вероятно, не догнали его. Нет никакой гарантии, что это событие будет срабатывать, прежде чем вы начнете активно воспроизводить видео, если когда-либо. И Chrome, как известно, aggressive with this event, стреляя почти сразу, где другие браузеры ждут дольше.