2015-03-17 1 views
1

Я нахожу, что в видео HTML5, когда пользователи выполняют действие поиска, нажимая на элементы управления, нет способа получить время перед поиском.Как получить начальную точку поиска в видео HTML5?

Что я хочу делать, когда пользователи ищут видео в определенный момент, система точно знает, в какой момент, прежде чем пользователи будут искать. Например, если пользователь просматривает видео до 2:00, а затем нажмите кнопку управления в 4:00, нам нужно отслеживать время 2:00. Я пробовал искать и искать события, но не могу получить время 2:00. Он всегда возвращает мне время 4:00. Есть ли решение?

+0

MDN определяет 'seeking' событие, как«послал, когда операция поиска начинается». Если что не дает доступа к текущей позиции _before_ поиск начинается, хотя, возможно, вы могли бы отслеживать свойство currentTime в интервале и видеть, когда он изменяется по дельта, который «выше», то что можно было бы ожидать при нормальном непрерывное воспроизведение ... – CBroe

+1

@laser_wizard Я использую google chrom e и firefox, чтобы проверить и найти, что если пользователи будут искать, когда видео приостановлено, будет отправлено искомое и искаженное событие. Если пользователи ищут, когда воспроизводится видео, события будут запускаться в порядке паузы, поиска, воспроизведения, поиска. Я не мог получить точное время, прежде чем искать какое бы то ни было событие. –

ответ

0

Вы должны быть в состоянии отследить это благодаря timeupdate событию, с короткой задержкой:

var video = document.querySelector('video'); 
 
video.BP = 0; 
 

 
video.addEventListener('timeupdate', function(e){ 
 
var that = this; 
 
(function(){ 
 
\t setTimeout(function(){ 
 
\t that.BP=that.currentTime; 
 
    \t }, 500); 
 
    }).call(that);} 
 
); 
 

 
video.addEventListener('seeking', function(e){ 
 
    log('boringPart = '+this.BP+ 
 
     " gone to "+this.currentTime) 
 
    }) 
 
function log(txt){document.querySelector('p').innerHTML = txt;}
<video controls="true" autoplay="true" height="200" width="600"><source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv"><source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4"></video> 
 
<p style="position:absolute; top: 0.5em;left: 3em; color: #FFF;background:#000"></p>

Смежные вопросы