wake-up-neo.com

play Pause html5 Video Javascript

Ich habe eine Funktion, die ein Video abspielt, wenn ich auf das im Player angezeigte Posterbild klicke und es scheint zu funktionieren:

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

Im html5-Video-Tag habe ich etwas wie: id = "player" onclick = "this.play ();"

das Problem ist, wenn ich auf die Videosteuerung Pause drücke, macht es tatsächlich Pause, was gut ist, aber wenn ich jetzt die Wiedergabetaste auf der Videosteuerung drücke, kann ich sehen, dass die Taste für einen Bruchteil einer Sekunde wieder in Pause wechselt, dann geht es wieder ein Play-Button zu sein. Also drücke ich auf play und es wird nur ein paar Frames abgespielt und danach wieder angehalten. Die einzige Möglichkeit, es wieder abzuspielen, ist das Klicken auf den Videoanzeigebereich.

Wie kann ich bewirken, dass die Wiedergabe/Pause-Schaltfläche der Steuerungsleiste nicht mehr angehalten wird, und wie kann ich die Wiedergabe unterbrechen, wenn ich auf den Videoanzeigebereich klicke?

Ich habe folgendes versucht, aber es funktioniert nicht:

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

Der Grund, warum ich das Video abspielen möchte, wenn Sie auf den tatsächlichen Anzeigebereich drücken, ist es zu schwierig, den winzigen Steuerungsschaltflächen-Wiedergabebutton auf Android zu finden, da er so klein ist, dass es für Personen einfacher ist, einfach den Anzeigebereich zu drücken es geht los In Firefox wird der Videoplayer abgespielt, wenn ich auf den Anzeigebereich klicke sowie Pausen, was genau das ist, was ich tun möchte und dies auch ohne Javascript. In Android wird das Video überhaupt nicht abgespielt, wenn ich auf den Anzeigebereich drücke. Daher versuche ich grundsätzlich, den Android-Browser zu zwingen, sich so zu verhalten, wie es Firefox tut.

Irgendwelche Ideen?

javascripthtml5video
25
Jizbo Jonez
$('#play-pause-button').click(function () {
   var mediaVideo = $("#media-video").get(0);
   if (mediaVideo.paused) {
       mediaVideo.play();
   } else {
       mediaVideo.pause();
  }
});

Ich habe dies in jQuery gemacht, was einfach und schnell ist. Um es auszuprobieren, müssen Sie nur die ID des Video-Tags und Ihre Wiedergabe/Pause-Taste verwenden.

EDIT: In Vanilla JavaScript: Ein Video ist keine Funktion, sondern Teil von DOM

 video.play();

Anstatt 

video().play() **wrong**
41
sheelpriy

Soweit ich sehe, ist Video keine Funktion. Warum haben Sie Klammern? Das ist dein Fehler.

Verwenden Sie also anstelle von video() einfach video.

9
user1076821

Dies ist die einfachste Lösung 

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', '');
    });
});
3
Tahir Fazal

Diese Art von Arbeiten (mit Jquery) funktioniert für mich in Chrome v22, Firefox v15 und IE10:

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

Die Variable preventDefault hat das Bildsprungproblem gestoppt, das Sie sehen, aber dann werden die anderen Schaltflächen im Steuerungsbereich wie Vollbild usw. abgebrochen.

Es scheint, dass es nicht einfach ist, warum es so ist? Ich hätte gedacht, dass Vender standardmäßig per Klick gespielt hätten, es scheint logisch zu sein. : |

2
Sprintstar

Ich glaube, dies ist der einfachste und einfachste Weg, das zu schreiben, was Sie erreichen wollen:

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');
                }
              });

Die Anmeldung an der Konsole dient natürlich nur der Veranschaulichung. 

0
Chris Bryant
$('#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();
    }
});
0
Martin Quintana
            function myFunction(){ 
            var playVideo = document.getElementById('myVideo');
            var button = document.getElementById('myBtn');

            if (playVideo.paused) {
               playVideo.play();
                button.innerHTML= "pause";
            } else {
               button.innerHTML= "play";
               playVideo.pause();
            }
            };
0
manu