it-swarm.com.de

Klicken Sie auf das HTML 5-Videoelement, um das Video abzuspielen, anzuhalten und die Wiedergabe zu unterbrechen

Ich versuche, das Video so abzuspielen und anzuhalten, wie YouTube es tut.

<video width="600" height="409" id="videoPlayer" controls="controls">
 <!-- MP4 Video -->
 <source src="video.mp4" type="video/mp4">
</video>


<script>
    var videoPlayer = document.getElementById('videoPlayer');

    // Auto play, half volume.
    videoPlayer.play()
    videoPlayer.volume = 0.5;

    // Play / pause.
    videoPlayer.addEventListener('click', function () {
        if (videoPlayer.paused == false) {
            videoPlayer.pause();
            videoPlayer.firstChild.nodeValue = 'Play';
        } else {
            videoPlayer.play();
            videoPlayer.firstChild.nodeValue = 'Pause';
        }
    });
</script>

Haben Sie eine Idee, warum dies die Wiedergabe- und Pausensteuerung stören würde?

31
user2698522

Die einfachste Form ist die Verwendung des Listeners onclick:

<video height="auto" controls="controls" preload="none" onclick="this.play()">
 <source type="video/mp4" src="vid.mp4">
</video>

Kein jQuery oder komplizierter Javascript-Code erforderlich.

Play/Pause kann mit onclick="this.paused ? this.play() : this.pause();" gemacht werden.

84
oabarca

Ich wollte keinen alten Beitrag vorbringen, bin aber auf diese Frage gestoßen, als ich nach der gleichen Lösung gesucht habe. Am Ende habe ich mir etwas Eigenes ausgedacht. Dachte mir, ich würde dazu beitragen.

HTML:

<video class="video"><source src=""></video>

JAVASCRIPT: "JQUERY"

$('.video').click(function(){this.paused?this.play():this.pause();});
44
Mickey

Das Hinzufügen von return false; Hat bei mir funktioniert:

jQuery-Version:

$(document).on('click', '#video-id', function (e) {
    var video = $(this).get(0);
    if (video.paused === false) {
        video.pause();
    } else {
        video.play();
    }

    return false;
});

Vanille JavaScript Version:

var v = document.getElementById('videoid');
v.addEventListener(
    'play', 
    function() { 
        v.play();
    }, 
    false);

v.onclick = function() {
    if (v.paused) {
        v.play();
    } else {
        v.pause();
    }

    return false;
};
8
Roberts126

Ich hatte das gleiche Problem und löste es, indem ich zusätzlich zur Klick-Aktion einen Event-Handler für die Play-Aktion hinzufügte. Ich verstecke die Bedienelemente während des Spielens, um das Problem der Pausentaste zu vermeiden.

    var v = document.getElementById('videoID');
    v.addEventListener(
       'play', 
          function() { 
             v.play();
          }, 
        false);

    v.onclick = function() {
      if (v.paused) {
        v.play();
        v.controls=null;
      } else {
        v.pause();
        v.controls="controls";
      }
    };

Seeking wirkt zwar noch komisch, aber immerhin ist die Verwechslung mit der Spielsteuerung weg. Hoffe das hilft.

Hat jemand eine Lösung dafür?

3
jkrz

Ich hatte unzählige Probleme damit, fand aber schließlich eine Lösung, die funktioniert.

Grundsätzlich fügt der folgende Code dem Video einen Klick-Handler hinzu, ignoriert jedoch alle Klicks auf den unteren Teil (0,82 ist willkürlich, scheint aber bei allen Größen zu funktionieren).

    $("video").click(function(e){

        // get click position 
        var clickY = (e.pageY - $(this).offset().top);
        var height = parseFloat( $(this).height() );

        // avoids interference with controls
        if(y > 0.82*height) return;

        // toggles play / pause
        this.paused ? this.play() : this.pause();

    });
2
ios-lizard

Das Problem scheint ein internes Sprudeln innerhalb des Elements <video> Zu sein. Wenn Sie also auf die Schaltfläche "Play" klicken, wird der Code ausgelöst, und die Wiedergabetaste selbst wird ausgelöst :(

Ich konnte keinen einfachen (zuverlässigen) Weg finden, um das Sprudeln des Klicks zu stoppen (Logik sagt mir, dass es einen Weg geben sollte, aber ... es entgeht mir im Moment)

Wie auch immer, die Lösung, die ich gefunden habe, bestand darin, ein transparentes <div> Über das Video zu legen, damit es an die Stelle passt, an der die Steuerelemente angezeigt werden Der Benutzer klickt selbst auf die Steuerelemente und das Element <video> erledigt dies für Sie.

Das folgende Beispiel wurde für mein Video angepasst, sodass Sie möglicherweise die relativen <div> - Größen jonglieren müssen, aber es sollte Ihnen den Einstieg erleichtern

<div id="vOverlay" style="position:relative; width:600px; height:300px; z-index:2;"></div>
<video style="position:relative; top:-300px; z-index:1;width:600px;height:340px;" width="600" height="409" id=videoPlayer controls="controls">
<source src="video.mp4" type="video/mp4">
</video>

<script>
    var v = document.getElementById('videoPlayer');
    var vv = document.getElementById('vOverlay');
    <!-- Auto play, Half volume -->
    v.play()
    v.volume = 0.5;
    v.firstChild.nodeValue = "Play";

    <!-- Play, Pause -->
    vv.addEventListener('click',function(e){
        if (!v.paused) {
            console.log("pause playback");
            v.pause();
            v.firstChild.nodeValue = 'Pause';
        } else {
            console.log("start playback")
            v.play();
            v.firstChild.nodeValue = 'Play';
        }
      });
</script>
1
Offbeatmammal

Die Idee von ios-lizard weiterverfolgen:

Ich fand heraus, dass die Steuerelemente im Video etwa 35 Pixel sind. Das habe ich gemacht:

$(this).on("click", function(event) {
    console.log("clicked");
    var offset = $(this).offset();
    var height = $(this).height();
    var y = (event.pageY - offset.top - height) * -1;
    if (y > 35) {
        this.paused ? this.play() : this.pause();
    }
});

Grundsätzlich wird die Position des Klicks relativ zum Element ermittelt. Ich multiplizierte es mit -1, um es positiv zu machen. Wenn der Wert größer als 35 war (die Höhe der Steuerelemente), bedeutet dies, dass der Benutzer auf eine andere Stelle als die Steuerelemente klickt. Daher wird das Video angehalten oder abgespielt.

1
Nathan