web-dev-qa-db-fra.com

Arrêt vidéo HTML5 onClose

J'utilise les outils jQuery pour une superposition. À l'intérieur de la superposition, j'ai une vidéo HTML5. Cependant, lorsque je ferme la superposition, la vidéo continue de jouer. Une idée de la façon dont je pourrais arrêter la vidéo lorsque je ferme la superposition? Voici le code que j'ai:

$("img[rel]").overlay({ onClose: function() { <stop the video somehow> }, mask: { color: '#000', opacity: 0.7 }});

J'ai essayé d'utiliser

$('video').pause();

Mais cela a également suspendu la superposition.

jqueryhtml5html5-video
17
HWD

Le problème peut être avec le sélecteur jquery que vous avez choisi $("video") n'est pas un sélecteur

Le sélecteur droit peut mettre un élément id pour la balise vidéo , c.-à-d.
Supposons que votre élément vidéo ressemble à ceci:

<video id="vid1" width="480" height="267" oster="example.jpg" durationHint="33"> 
    <source src="video1.ogv" /> 
    <source src="video2.ogv" /> 
</video>

Ensuite, vous pouvez le sélectionner via $("#vid1") avec marque de hachage (#), sélecteur d'ID dans jquery. Si un élément vidéo est exposé dans la fonction, vous avez accès à HtmlVideoElement (HtmlMediaElement) .Ces éléments contrôlent l'élément vidéo, dans votre cas, vous pouvez utilisez la méthode pause() pour votre élément vidéo.

Vérifiez la référence pour VideoElement ici .
Vérifiez également qu'il existe une référence de secours ici .

8
Myra

Si vous souhaitez arrêter la lecture de chaque balise de film de votre page, ce petit extrait de jQuery vous aidera à:

$("video").each(function () { this.pause() });
27
Ulrik H. Kold

Démarrage de la vidéo avec différents navigateurs

Pour Opera 12

window.navigator.getUserMedia(param, function(stream) {
                            video.src =window.URL.createObjectURL(stream);
                        }, videoError );

Pour Firefox Nightly 18.0

window.navigator.mozGetUserMedia(param, function(stream) {
                            video.mozSrcObject = stream;
                        }, videoError );

Pour Chrome 22

window.navigator.webkitGetUserMedia(param, function(stream) {
                            video.src =window.webkitURL.createObjectURL(stream);
                        },  videoError );

Arrêt de la vidéo avec différents navigateurs

Pour Opera 12

video.pause();
video.src=null;

Pour Firefox Nightly 18.0

video.pause();
video.mozSrcObject=null;

Pour Chrome 22

video.pause();
video.src="";
11
Alain Saurat

Ce qui suit fonctionne pour moi:

$('video')[0].pause();
9
jantoine

Quelqu'un a déjà la réponse.

$ ('video') renverra un tableau d'éléments vidéo. C'est totalement un sélecteur valide!

donc

$("video").each(function () { this.pause() });

marchera.

7
George

Pour une application JQM + PhoneGap, les éléments suivants ont fonctionné pour moi.

Ce qui suit était le minimum que je devais aller pour que cela fonctionne. Je rencontrais en fait un blocage en raison de la mise en mémoire tampon lors de la génération de demandes ajax lorsque l'utilisateur a appuyé sur le bouton de retour. Mettre la vidéo en pause dans Chrome et le navigateur Android la gardait en mémoire tampon. La demande ajax non asynchrone se bloquait en attendant la fin de la mise en mémoire tampon, ce qu'elle n'a jamais voudrais.

Le lier à l'événement beforepagehide l'a corrigé.

 $("#SOME_JQM_PAGE").live("pagebeforehide", function(event)
 {
           $("video").each(function () 
           { 
               logger.debug("PAUSE VIDEO");
               this.pause();
               this.src = "";
           });
 });

Cela effacera chaque balise vidéo de la page.

La partie importante est this.src = "";

3
Halsafar

D'après mon expérience avec Firefox, l'ajout de l'attribut 'id' à ​​un élément vidéo provoque un plantage complet de Firefox ... comme en vous demandant de soumettre un rapport de bogue. Supprimez l'élément id et cela fonctionne très bien. Je ne sais pas si cela est vrai pour tout le monde, mais j'ai pensé partager mon expérience au cas où cela aiderait.

2
Jase in ATL

Pour gagner des heures de codage, utilisez un plug-in jquery déjà optimisé pour les iframes vidéo intégrés.

J'ai passé quelques jours à essayer d'intégrer l'API moogaloop de Vimeo avec les outils jquery sans succès. Voir cette liste pour une poignée d'options plus faciles.

1
Matth

Essaye ça:

if ($.browser.msie)
{
   // Some other solution as applies to whatever IE compatible video player used.
}
else
{
   $('video')[0].pause();
}

Mais, considérez que $ .browser est obsolète, mais je n'ai pas trouvé de solution comparable.

0
DustyDigits