Поиск в HTML5 видео с Chrome

Question

У меня проблемы с видео в Chrome.

По какой-то причине, независимо от того, что я делаю, video.seekable.end(0) не всегда равен 0.

Когда я звоню video.currentTime = 5, а затем console.log(video.currentTime), я вижу, что всегда 0, который, кажется, чтобы сбросить видео.

Я пробовал как веб-форматы на основе MP4, так и VP9, ​​но оба дали одинаковые результаты.

Что еще более раздражает то, что Firefox отлично работает. Что-то особенное в Chrome, о котором я должен знать?

Вот мой код (который работает только в Firefox):

 <div class="myvideo"> 
     <video width="500" height="300" id="video1" preload="auto"> 
      <source src="data/video1.webm" type="video/webm"/> 
      Your browser does not support videos. 
     </video> 
     </div> 

А вот JavaScript:

var videoDiv = $(".myvideo").children().get(0) 
videoDiv.load(); 
    videoDiv.addEventListener("loadeddata", function(){ 
    console.log("loaded"); 
    console.log(videoDiv.seekable.end(0)); //Why is this always 0 in Chrome, but not Firefox? 
    videoDiv.currentTime = 5; 
    console.log(videoDiv.currentTime); //Why is this also always 0 in Chrome, but not Firefox? 
    }); 

Обратите внимание, что просто вызывая videoDiv.play() на самом деле правильно воспроизводить видео в обоих браузерах.

Кроме того, после того, как файл фильма полностью загружен, videoDiv.buffered.end(0) также дает правильные значения в обоих браузерах.

Answer 1

Это мне потребовалось некоторое время, чтобы понять это ...

Проблема оказалась на стороне сервера. Я использовал версию Jetty для обслуживания всех моих видеофайлов. Простая конфигурация Jetty не поддерживала byte serving.

Разница между Firefox и Chrome заключается в том, что Firefox будет загружать весь видеофайл, чтобы вы могли искать его, даже если сервер не поддерживает http code 206 (partial content). Хром, с другой стороны, отказывается загружать весь файл (если он не очень маленький, например около 2-3 МБ).

Таким образом, чтобы получить параметр html5 видео currentTime работать в Chrome, вам нужен сервер, который поддерживает HTTP-код 206.

Для кого-то с этой проблемой, вы можете дважды проверить конфигурации сервера с завитком:

curl -H Range:bytes=16- -I http://localhost:8080/GOPR0001.mp4 

Это должно вернуть код 206. Если он вернет код 200, Chrome не сможет искать видео, но Firefox будет из-за обходного пути в браузере.

И последний совет: Вы можете использовать НУЮ HTTP-сервер, чтобы получить простой HTTP-сервер для локальной папки, которая поддерживает частичное содержание:

npm install http-server -g 

И запустить его обслуживать локальную папку:

http-server -p 8000 

Answer 2

У вас есть 3 возможности для тегов видео: MP4, OGG, WebM.

Не все форматы работают во всех браузерах.

Здесь я думаю, что WebM работает в Firefox, но не в Chrome, поэтому вы должны предоставить как альтернативные форматы файлов MP4, так и WebM, включив второй тег источника, ссылающийся на файл MP4.

E.g. src = "data/video1.mp4" type = "video/mp4"

Соответствующая версия будет автоматически выбрана браузером.

Answer 3

У меня была аналогичная проблема. Я слушал конечное событие на видео и установил currentTime на середину видео, чтобы непрерывно его циклировать. Он не работал в Safari или Chrome.

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

Мое обходное начало состояло в том, чтобы запустить мою петлю непосредственно перед концом видео и не дать ей на самом деле закончить.

Попробуйте протестировать свою версию, сначала запустив воспроизведение, а затем запустите функцию fuction, чтобы увидеть, работает ли она в Safari Chrome.

Answer 4

Если вы ждете canplaythrough вместо loadeddata, это работает.

См. this codepen example.