web-dev-qa-db-fra.com

jouer pause vidéo html5 javascript

J'ai une fonction qui joue une vidéo lorsque je clique sur l'image affichée dans le lecteur et cela semble fonctionner:

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

Dans le tag vidéo html5, j'ai quelque chose comme: id = "player" onclick = "this.play ();"

le problème est que si j'appuie sur pause sur les commandes vidéo, cela fait effectivement une pause, ce qui est bien, mais si j'appuie sur le bouton de lecture des commandes vidéo, je peux voir le bouton changer pour mettre à nouveau en pause pendant une fraction de seconde, puis cela passe. Retour à être un bouton de lecture à nouveau. Donc, j'appuie sur play et il ne joue que pendant quelques images, puis revient à la pause. La seule façon de la relire consiste à cliquer sur la zone de visualisation de la vidéo.

Comment puis-je faire en sorte qu'il cesse de revenir en pause lorsque vous utilisez le bouton de lecture/pause de la barre de commande, et comment puis-je le faire faire une pause lorsque je clique sur la zone de visualisation vidéo?

J'ai essayé ce qui suit mais ça ne marche pas:

var video = document.getElementById('player');
video.addEventListener('click',function(){
    if(video.paused){
        video().play();
    }else{
        video.pause();
    }
},false);

La raison pour laquelle je souhaite lire la vidéo lorsque j'appuie sur la zone de visualisation réelle est qu'il est trop difficile de localiser le minuscule bouton de contrôle de la barre de contrôle sur Android, car il est si petit qu'il serait plus facile pour les utilisateurs d'appuyer simplement sur la zone de visualisation pour obtenir ça va. Dans Firefox, le lecteur vidéo est lu lorsque je clique sur la zone d'affichage ainsi que par des pauses, ce qui est exactement ce que je veux et c'est aussi possible sans javascript. Sous Android, la vidéo ne sera tout simplement pas lue lorsque j'appuie sur la zone de visualisation. J'essaie donc de forcer le navigateur Android à se comporter comme Firefox de manière native.

Des idées?

javascripthtml5video
25
Jizbo Jonez
$('#play-pause-button').click(function () {
   var mediaVideo = $("#media-video").get(0);
   if (mediaVideo.paused) {
       mediaVideo.play();
   } else {
       mediaVideo.pause();
  }
});

Je l'ai fait dans jQuery, qui est simple et rapide. Pour l'essayer, il vous suffit d'utiliser l'ID de la balise vidéo et votre bouton de lecture/pause.

EDIT: En Vanilla JavaScript: Une vidéo n'est pas une fonction mais une partie de DOM

 video.play();

Au lieu de 

video().play() **wrong**
41
sheelpriy

D'après ce que je vois, la vidéo n'est pas une fonction, alors pourquoi avez-vous des parenthèses? C'est ton erreur.

Donc, au lieu de video(), utilisez simplement video

9
user1076821

C'est la solution la plus simple 

this.on("pause", function () {
    $('.vjs-big-play-button').removeClass(
        'vjs-hidden'
    ).css('display', 'block');
    this.one("play", function () {
        $('.vjs-big-play-button').addClass(
            'vjs-hidden'
        ).css('display', '');
    });
});
3
Tahir Fazal

Ce type de travail (avec jquery) pour moi dans Chrome v22, Firefox v15 et IE10:

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

La preventDefault ici a arrêté le problème de saut d'image que vous voyez, mais ensuite, les autres boutons de la section de contrôle sont affichés, comme le plein écran, etc.

On dirait qu'il n'y a pas de solution facile, pourquoi le faire? J'aurais pensé que les vendeurs auraient eu le clic pour jouer par défaut, cela semble être la chose la plus logique à faire. : |

2
Sprintstar

C’est, à mon avis, le moyen le plus simple et le plus simple d’écrire ce que vous essayez d’atteindre:

var myVideo = document.getElementById('exampleVideo');

            $(myVideo).click(function toggleVideoState() {
                if (myVideo.paused) {
                  myVideo.play();
                  console.log('Video Playing');
                } else {
                  myVideo.pause();
                  console.log('Video Paused');
                }
              });

La connexion à la console est, bien sûr, juste pour illustration. 

0
Chris Bryant
$('#video-id').click(function() {
    // jQuery sets this as the DOM element that triggered the event
    // no need to wrap it in jQuery $(this) and unwrap it again $(this).get(0)
    if (this.paused) {
        this.play();
    } else {
        this.pause();
    }
});
0
Martin Quintana