Play Pause HTML5 video javascript

Question

Mam funkcję, która odtwarza wideo po kliknięciu na zdjęcie plakatu wyświetlanego w odtwarzaczu i wydaje się działać:

var video = document.getElementById('player'); 
video.addEventListener('click',function(){ 
    video().play(); 
},false); 

w tagu HTML5 video mam coś takiego: id = "player" onclick = "this.play();"

Problem polega na tym, że jeśli wciśniesz pauzę na elementach sterujących wideo, to rzeczywiście pauza, która jest dobra, ale jeśli naciśniesz przycisk odtwarzania na kontrolkach wideo, widzę, jak zmienia się przycisk, aby ponownie zrobić pauzę po czym wraca do bycia ponownie przyciskiem odtwarzania. Naciskam więc na grę i gra ona tylko przez kilka klatek, a następnie wraca do pauzy. Jedynym sposobem na ponowne uruchomienie gry jest kliknięcie w obszar wyświetlania wideo.

Jak mogę przerwać powrót do trybu pauzy, gdy używasz przycisku odtwarzania/pauzy na pasku sterowania i jak mogę go wstrzymać po kliknięciu na obszar wyświetlania wideo?

Próbowałem następujących, ale to nie działa:

var video = document.getElementById('player'); 
video.addEventListener('click',function(){ 
    if(video.paused){ 
     video().play(); 
    }else{ 
     video.pause(); 
    } 
},false); 

Powodem chcę mieć grę wideo po naciśnięciu na rzeczywiste pole widzenia jest to zbyt trudne do zlokalizowania malutkie controlbar luz przycisk na Androidzie, ponieważ jest tak mały, łatwiej byłoby po prostu nacisnąć obszar wyświetlania, aby uruchomić. W przeglądarce Firefox odtwarzacz wideo jest odtwarzany, gdy klikam na obszarze wyświetlania, a także pauzach, co jest dokładnie tym, co chcę, a także robi to bez żadnego javascriptu. W systemie Android wideo po prostu nie będzie odtwarzane po naciśnięciu obszaru wyświetlania. Więc zasadniczo próbuję zmusić przeglądarkę systemu Android do zachowania się jak Firefox.

Wszelkie pomysły?

Answer 1

$('#play-pause-button').click(function() { 
    if ($("#media-video").get(0).paused) { 
     $("#media-video").get(0).play(); 
    } else { 
     $("#media-video").get(0).pause(); 
    } 
}); 

dobrze zrobiłem to w Jquery, co jest proste i szybkie. możesz spróbować.wystarczy użyć identyfikatora tagu wideo i swojej Przycisk odtwarzania/pauzy cieszyć

EDIT: w waniliowym JavaScript: wideo nie jest funkcją, ale część DOM stąd używać

video.play(); 

zamiast

video().play() **wrong** 

Answer 2

Z tego, co widzę, wideo nie jest funkcją, więc dlaczego masz nawiasy? To jest twój błąd.

Więc zamiast video() wystarczy użyć video

Answer 3

tego rodzaju prac (przy użyciu jQuery) dla mnie w Chrome V22, Firefox V15 i IE10:

$('video').on('click', function (e) { 
    if (this.get(0).paused) { 
     this.get(0).play(); 
    } 
    else { 
     this.get(0).pause(); 
    } 
    e.preventDefault(); 
}); 

preventDefault tutaj zatrzymał problem rama skoki ty zobacz, ale potem łamie inne przyciski w sekcji sterującej, takie jak pełny ekran itp.

Wygląda na to, że nie ma łatwego powodu, aby to zrobić? Wydaje mi się, że producenci domyślnie mieliby grać, wydaje się to logiczne. : |

Answer 4

$('#video-id').click(function() { 
    // jQuery sets this as the DOM element that triggered the event 
    // no need to wrap it in jQuery $(this) and unwrap it again $(this).get(0) 
    if (this.paused) { 
     this.play(); 
    } else { 
     this.pause(); 
    } 
}); 

Answer 5

to jest najprostszym rozwiązaniem

this.on("pause", function() { 
    $('.vjs-big-play-button').removeClass(
     'vjs-hidden' 
    ).css('display', 'block'); 
    this.one("play", function() { 
     $('.vjs-big-play-button').addClass(
      'vjs-hidden' 
     ).css('display', ''); 
    }); 
}); 

Answer 6

To jest, moim zdaniem, najprostszym i najłatwiejszym sposobem napisać co próbujesz osiągnąć:

var myVideo = document.getElementById('exampleVideo'); 

      $(myVideo).click(function toggleVideoState() { 
       if (myVideo.paused) { 
        myVideo.play(); 
        console.log('Video Playing'); 
       } else { 
        myVideo.pause(); 
        console.log('Video Paused'); 
       } 
       }); 

Logowanie do konsoli jest, oczywiście, tylko dla ilustracji.