it-swarm.com.de

Klicken Sie auf das Posterbild des HTML5-Videos.

Ich habe ein HTML5-Video mit einem Poster-Attribut. Ich möchte es irgendwie einrichten, so dass Sie irgendwo auf das Videoelement (den Bereich des Posterbilds) klicken können und das Play-Event ausgelöst und das Video gestartet wird? Ich habe das Gefühl, dass dies ziemlich üblich ist, aber ich kann keinen Weg finden, dies ohne Flash zu tun. Jede Hilfe wäre sehr dankbar.

29
Andrew

Das arbeitet für mich, Andrew.

Fügen Sie in Ihrem HTML-Kopf dieses kleine Stück js hinzu:

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

Oder fügen Sie einfach ein Onlick-Attribut direkt zu Ihrem HTML-Element hinzu:

<video src="your_video" width="250" height="50" poster="your_image" onclick="this.play();"/>
63
emags

Here gepostet, dies gilt jedoch auch für diesen Thread.

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

Der folgende Code fügt im Wesentlichen einen Click-Handler zum Video hinzu, ignoriert jedoch alle Klicks im unteren Bereich (0,82 ist willkürlich, scheint aber bei allen Größen zu funktionieren).

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

    // handle click if not Firefox (Firefox supports this feature natively)
    if (typeof InstallTrigger === 'undefined') {

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

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

        // toggles play / pause
        this.paused ? this.play() : this.pause();
    }
});
14
ios-lizard

Die Verwendung des Poster-Attributs ändert das Verhalten nicht. Es zeigt nur dieses Bild, während das Video geladen wird. Wenn das Video automatisch gestartet wird (wenn die Browserimplementierung dies nicht tut), müssen Sie Folgendes tun

<video id="video" ...></video>

in Javascript mit Javascript:

$('#video').click(function(){
   document.getElementById('video').play();
});

Ich hoffe es hilft

6
tiagoboldt

Ja, das klingt wie ein normales Feature, das die Browser-Ersteller oder HTML-Spezifikationsschreiber einfach "vergessen" haben.

Ich habe ein paar Lösungen geschrieben, aber keine davon ist wirklich Cross-Browser oder 100% solide. Das Hinzufügen von Problemen beim Klicken auf die Videosteuerelemente hat die unbeabsichtigte Folge, dass das Video angehalten wird. Stattdessen würde ich empfehlen, eine bewährte Lösung wie VideoJS zu verwenden: http://videojs.com/

4
deepwell

Ich habe dies in reagieren und es6 getan. Hier ist eine moderne Version, die ich gemacht habe, nachdem ich Daniel Goldens Lösung gelesen hatte: 

const Video = ({videoSources, poster}) => {
  return (
    <video
      controls
      poster={poster}
      onClick={({target: video}) => video.paused ? video.play() : video.pause()}
    >
      {_.map(videoSources, ({url, type}, i) =>
        <source key={i} src={url} type={type} />
      )}
    </video>
  )
}
0
William Frazier

Die Verwendung von get (0) funktioniert ebenfalls 

    var play = $('.playbutton');
    var video = $('#video');
    play.click(function(){
        video.get(0).play();
    })
0
Jry