web-dev-qa-db-fra.com

Cliquez sur l'image affichée par la vidéo HTML5.

J'ai une vidéo HTML5 avec un attribut affiche. J'aimerais en quelque sorte le configurer pour que vous puissiez cliquer n'importe où sur l'élément vidéo (la zone de l'image de l'affiche) pour que l'événement play soit lancé et que la vidéo démarre? Je pense que c'est une pratique assez courante, mais je ne peux pas trouver un moyen de le faire sans flash. Toute aide serait très appréciée.

jqueryhtml5video
29
Andrew

Cela fonctionne pour moi Andrew.

Dans votre tête html, ajoutez ce petit morceau de js:

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

Ou bien, ajoutez simplement un attribut onlick directement à votre élément html:

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

Posté ceci ici aussi mais cela s'applique aussi à ce fil.

Cela me posait d'innombrables problèmes, mais j'ai finalement trouvé une solution qui fonctionne.

Fondamentalement, le code ci-dessous ajoute un gestionnaire de clics à la vidéo mais ignore tous les clics de la partie inférieure (0.82 est arbitraire mais semble fonctionner sur toutes les tailles).

$("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

L'utilisation de l'attribut poster ne modifie pas le comportement. Il montre simplement cette image lors du chargement de la vidéo. Si vous voulez que la vidéo démarre automatiquement (si l'implémentation du navigateur ne le fait pas), vous devez faire quelque chose comme:

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

en javascript en utilisant jquery:

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

J'espère que ça aide

6
tiagoboldt

Oui, cela sonne comme une fonctionnalité habituelle que les concepteurs de navigateurs ou les rédacteurs de spécifications HTML ont juste "oublié".

J'ai écrit quelques solutions mais aucune d'entre elles n'est vraiment multi-navigateur ou 100% solide. Inclure les problèmes de clic sur les commandes vidéo a pour conséquence involontaire d’arrêter la vidéo. Au lieu de cela, je vous recommanderais d'utiliser une solution éprouvée telle que VideoJS: http://videojs.com/

4
deepwell

Je faisais cela dans réagir et es6. Voici une version moderne que j'ai faite après avoir lu la solution de Daniel Golden: 

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

Utiliser get (0) fonctionne aussi 

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