web-dev-qa-db-fra.com

Cliquer sur l'élément HTML 5 Video pour lire, mettre la vidéo en pause, interrompre la lecture

J'essaie de faire en sorte que la vidéo puisse être lue et mise en pause comme YouTube

<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>

Avez-vous une idée pourquoi cela casserait le bouton de contrôle de lecture et de pause?

html5videoyoutube
31
user2698522

Le formulaire le plus simple consiste à utiliser le listener onclick:

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

Pas besoin de code Javascript compliqué ou jQuery.

La lecture/pause peut être faite avec onclick="this.paused ? this.play() : this.pause();".

84
oabarca

Je ne veux pas faire apparaître un ancien message, mais je me suis posé cette question à la recherche de la même solution. Je me suis retrouvé avec quelque chose à moi. Je pensais contribuer.

HTML:

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

JAVASCRIPT: "JQUERY"

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

Ajouter return false; a travaillé pour moi:

version jQuery:

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

    return false;
});

Vanilla 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

J'ai eu le même problème et je l'ai résolu en ajoutant un gestionnaire d'événements pour l'action de lecture en plus de l'action de clic. Je cache les commandes pendant la lecture pour éviter le problème du bouton de pause.

    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";
      }
    };

La recherche est toujours amusante, mais au moins, la confusion avec le contrôle du jeu a disparu. J'espère que cela t'aides.

Quelqu'un a une solution à cela?

3
jkrz

J'ai eu d'innombrables problèmes en faisant cela, 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){

        // 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

Le problème semble être interne à l'élément <video> ... de sorte que lorsque vous cliquez sur le bouton "Play", le code se déclenche et le bouton de lecture lui-même se déclenche :(

Je ne pouvais pas trouver un moyen simple (fiable) d'empêcher le clic de claquer (la logique me dit qu'il devrait y avoir un moyen, mais ... il m'échappe pour le moment)

Quoi qu’il en soit, la solution que j’ai trouvée consistait à placer un <div> Transparent sur la vidéo afin que la taille de la vidéo corresponde à celle où les contrôles apparaissent. l'utilisateur clique sur les contrôles eux-mêmes, puis l'élément <video> le gère pour vous.

L’échantillon ci-dessous a été dimensionné pour ma vidéo. Vous devrez peut-être jongler avec la taille du parent <div>, Mais vous devriez commencer.

<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

Suivi de l’idée de ios-lizard:

J'ai découvert que les commandes de la vidéo mesuraient environ 35 pixels. C'est ce que j'ai fait:

$(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();
    }
});

Fondamentalement, il trouve la position du clic par rapport à l'élément. Je l'ai multiplié par -1 pour le rendre positif. Si la valeur était supérieure à 35 (la hauteur des contrôles), cela signifie que l'utilisateur clique ailleurs que sur les contrôles. Par conséquent, nous mettons en pause ou lisons la vidéo.

1
Nathan