Comment puis-je ajouter le click-to-play à mes vidéos HTML5 sans interférer avec les contrôles natifs?

J'utilise le code suivant pour ajouter click-to-play de la fonctionnalité vidéo HTML5:

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

Il fonctionne ok sauf qu'il interfère avec le navigateur natif du contrôle: c'est, il saisit lorsqu'un utilisateur clique sur le bouton pause/play, immédiatement inverser leur sélection et leur rendu le bouton pause/play inefficace.

Est-il un moyen pour sélectionner juste la partie vidéo dans les DOM, ou, à défaut, un moyen de capturer les clics de la contrôles partie de la vidéo conteneur, afin que je puisse ignorer/inverser le click-to-play lorsqu'un utilisateur appuie sur le bouton pause/play?

source d'informationauteur

html5-video javascript

Vous pouvez ajouter une couche au-dessus de la vidéo qui capture l'événement click. Puis cacher que la couche alors que la vidéo est en cours de lecture.

L' (simplifié) balisage:

<div id="container">
    <div id="videocover">&nbsp;</div>
    <video id="myvideo" />
</div>

Le script:

$("#videocover").click(function() {
    var video = $("#myvideo").get(0);
    video.play();

    $(this).css("visibility", "hidden");
    return false;
});

$("#myvideo").bind("pause ended", function() {
    $("#videocover").css("visibility", "visible");
});

Le CSS:

#container {
    position: relative;
}

/*
    covers the whole container
    the video itself will actually stretch
    the container to the desired size
*/
#videocover {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

4

Je sais que c'est une vieille question, mais j'ai rencontré le même problème et trouvé une autre solution!
La lecture de la vidéo sur clic et aussi le mettre en pause lors d'un clic. Mais comme le posteur d'origine, j'ai couru dans des problèmes avec les contrôles. A résolu le problème avec jquery comme ceci:
```
$("video").click(function (e) {
    if(e.offsetY < ($(this).height() - 36)) //Check to see if controls where clicked
    {
        if(this.paused)
            this.play();
        else
            this.pause();
    }
});
```
- Je vérifier le décalage dans le clic et si c'est sur le contrôle de mes fonctions de lecture/pause ne fait rien.
3

Vous pouvez essayer de l'événement.stopPropagation et voir si cela fonctionne. Bien que je pense que ce serait d'arrêter les contrôles natifs de travail, ou tout simplement ne rien faire.
```
$('video').click(function(event) {
  event.stopPropagation();
  if ($(this).get(0).paused) {
    $(this).get(0).play();
  }
  else {
    $(this).get(0).pause();
  }
});
```
Si le navigateur considère les contrôles natifs et vidéo tous partie de la même élément (et je crois qu'ils le font), vous êtes probablement hors de la chance. jQuery événement.la cible ne serait pas vous permettre de faire la différence entre un clic sur la vidéo et cliquez sur le contrôle.

Donc je pense que votre meilleure option est de construire vos propres contrôles (ancien tutoriel, encore assez simple). Ou demander au navigateur de devs à faire un clic sur la vidéo, lecture/pause lorsque des contrôles sont activés. Semble comme il devrait le faire par défaut.

De grandes réponses ici. Merci pour ces. Voici un truc que j'ai trouvé pour rendre les contrôles cliquable, tous les jQuery.

$('#video_player').click(function(e){

    var y = e.pageY - this.offsetTop;

    //Subtract how much control space you need in y-pixels.
    if(y < $(this).height() - 40) 
    {
        //$(this).get(0).play();
        //... what else?
    }

});

0

Torsten Walter solution fonctionne bien et c'est un assez élégant solution au problème, et c'est probablement la meilleure façon de le gérer, même si elle ne gère pas de clic en pause. Cependant, cette solution m'a fait penser à un hacky façon de le faire, et j'ai trouvé ceci:

Balisage
```
<div id="container">
    <div id="videocover">&nbsp;</div>
    <video id="myvideo" />
</div>
```
JavaScript
```
$('#videocover').click(function(event) {
  var video = $('#myvideo')[0];
  if (video.paused) {
    video.play();
  }
  else {
    video.pause();
  }
  return false;
});
```
CSS
```
#container {
  position: relative;
}

#videocover {
  position: absolute;
  z-index: 1;
  height: 290px; /* Change to size of video container - 25pxish */
  top: 0;
  right: 0;
  bottom: 0;
  left;
}
```
Fondamentalement, il garde le cliquables couvrir tous les temps pour gérer le click-to-play/click-to-pause de fonctionnalités, mais permet de s'assurer que le couvercle ne se chevauchent pas avec les commandes au bas de la vidéo.

C'est, bien sûr, une bidouille, c':
- assume tous les navigateurs place les contrôles dans la même région, et que les contrôles sont de la même hauteur
- nécessite de spécifier la hauteur du conteneur vidéo en CSS
- empêche les contrôles apparaissent lorsque la souris passe sur la vidéo
Mais j'ai pensé que je l'avais mis là-bas.

Vous devez vous connecter pour publier un commentaire.

Balisage

JavaScript

CSS