2015-07-28 5 views
1

Я хочу адаптировать код, который я нашел по адресу http://jsfiddle.net/jAsDJ/. Это почти то, что мне нужно, за исключением того, что я хочу, чтобы видео воспроизводилось только один раз. Код, найденный в приведенной выше ссылке, воспроизводит прокрутку даже после выделения атрибута цикла для видеотег.Воспроизведение видео при прокрутке до, BUT воспроизведение видео ONCE

В http://jsfiddle.net/duya0ntw/1/ вы можете видеть, что я сделал: Добавлена ​​линия JS 4, линии 23-26 и линии 34-38. Я пытался создать функцию, чтобы определить, было ли воспроизведение видео на полную длину и воспроизводиться только тогда, когда видео не было воспроизведено.

Ниже приведен JS. Любая помощь будет принята с благодарностью. Я уже несколько часов возился с ним без везения. (Очень начинающий с JS)


var videos = document.getElementsByTagName("video"), fraction = 0.8; 
var once = new Array(videos.length); 

function checkScroll() { 

for (var i = 0; i < videos.length; i++) { 

    var video = videos[i]; 

    var x = video.offsetLeft, 
     y = video.offsetTop, 
     w = video.offsetWidth, 
     h = video.offsetHeight, 
     r = x + w, //right 
     b = y + h, //bottom 
     visibleX, visibleY, visible; 

    visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset)); 
    visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset)); 
    visible = visibleX * visibleY/(w * h); 

     if (visible > fraction) { 
      if (once[i] == false) { 
       video.play(); 
       once[i] = true; 
       } 
      } 
     else { 
     //video.pause(); 
    } 
} 
} 

$(document).ready(function() { 
for (var i = 0; i < videos.length; i++) { 
    once[i] = false; 
} 
}); 

ответ

0

Изменение:

if (visible > fraction) 

к:

if (visible > fraction && video.currentTime < video.duration) 

Таким образом, ваше видео будет не петля - они будут играть только тогда, когда Playhead ISN Уже в конце.

JSFiddle: https://jsfiddle.net/jAsDJ/218/

А вот the reference I used to construct this answer, что может быть полезным.

+0

Красивая! так просто. благодаря! – tontonio

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