web-dev-qa-db-fra.com

Vidéo HTML5 en sourdine mais en cours de lecture

Le titre dit à peu près tout. J'ai une vidéo qui commence automatiquement à jouer lorsque vous arrivez sur la page. 

Dans le code HTML, j'ai mis muet = "muet". Et voici la partie étrange. Lorsque vous regardez les commandes, il est clairement mis en sourdine, mais la musique continue de jouer et peut être entendue. Même lorsque j'ai regardé l'exemple de vidéo HTML5 sur W3Schools, il lit la musique en sourdine. 

Existe-t-il un moyen, par exemple avec jQuery, de contourner cela? J'ai une ligne jQuery dedans qui colle le son en sourdine à la vidéo mais cela n'a aucun effet. 

Voici le code HTML est utilisé: 

<video id="video" width="640px" height="350px" autoplay="autoplay" loop="loop" controls="controls" muted="muted">
            <source src="intouchables.f4v" type="video/mp4">
            Your browser does not support the video tag.
        </video>

J'espère que vous pourrez m'aider. La ligne jQuery est la suivante: 

$ ("video"). prop ('muet', vrai); 

Merci d'avance. 

html5google-chromevideo
18
Jan Haesen

Je ne suis pas tout à fait sûr de savoir pourquoi l'attribut muted fonctionne mal lorsqu'il est défini dans la balise video. Cependant, voici ce que vous pouvez faire:

Tout d'abord, supprimez l'attribut muted="muted" de la balise video. Gardez-le simplement comme:

<video id="video" width="640px" height="350px" autoplay="autoplay" loop="loop" controls="controls">
    <source src="intouchables.f4v" type="video/mp4">
    Your browser does not support the video tag.
</video>

Maintenant, définissez une fonction qui, lors du chargement de la page, coupe la vidéo en sourdine.

window.onload = function () {
    var element = document.getElementById('video');
    element.muted = "muted";
}

J'ai vérifié cela et ça marche.

24
Vishnu

on dirait que cette sourdine a cessé de fonctionner en chrome 64. fonctionne toujours en 63.

4
reco
<video preload= "true" autoplay = "autoplay" loop = "loop" muted>
    <source src = "video/Real-Estate.mp4" type = "video/mp4">
</video>
4
Tahmid

Ma réponse ne contient pas vraiment de nouvelles réponses - j'essaie simplement de mettre cette question à jour et d'éviter que les gens ne perdent une journée entière avec cela, comme je viens de le faire.

Autant que je sache (surtout que cette question est si ancienne) que muted a jamais fonctionné lorsque la vidéo est ajoutée dynamiquement à la page. Et comme muted ne fonctionne pas, alors muted autoplay ne fonctionnera pas non plus. 

Je pense que ce qui se passe est que le navigateur prend certaines décisions lors du chargement de la page, et pour une raison super étrange, une vidéo postérieure à la page ajoutée ne sera pas mise en sourdine même si elle possède la propriété muted. Je pense que cela est un bogue dans Chrome, qui ne se produit pas pour moi dans Safari - mais il semble que nous en soyons coincés pour le moment.

Le entrée de blog sur autoplay/mute de Google a seulement un an et fournit les informations suivantes:

Les règles de lecture automatique de Chrome sont simples:

  • La lecture automatique en sourdine est toujours autorisée. 
  • La lecture automatique avec son est autorisée si:
    • L'utilisateur a interagi avec le domaine (cliquez, appuyez sur, etc.). 
    • Sur le bureau, le seuil d'indice d'engagement du média de l'utilisateur a été dépassé, ce qui signifie que l'utilisateur a déjà lu une vidéo avec du son. 
    • Sur le mobile, l'utilisateur a ajouté le site à son écran d'accueil. 
  • Les cadres supérieurs peuvent déléguer à leurs iframes l'autorisation de lecture automatique afin d'autoriser la lecture automatique avec son.

Il manque juste une chose majeure! 

  • L'attribut HTML "muet" ne prend effet que lorsque la vidéo est présente dans le code HTML lors du chargement initial. Ceci s’applique également aux vidéos en lecture automatique.

Alors, quel est l'impact de ceci:

  • Si une vidéo sans son est lue par programme, elle doit d'abord être mise en sourdine. Par conséquent, si une vidéo dynamique est ajoutée à la page, vous devez définir explicitement video.muted = true après l'avoir ajoutée au DOM (ou juste avant de la lire).
  • Si vous essayez d'exécuter video.play() par programme (par exemple, lorsque quelqu'un fait défiler une vidéo en sourdine et que vous souhaitez la lire), la vidéo doit d'abord être en sourdine. 

Je me suis heurté à cela Angular et j'ai passé beaucoup trop de temps à supposer que cela était lié au fait que j'utilisais un modèle, ou quelque chose de ce type Angular.

J'ai créé une application de test sur StackBlitz. Vous devrez supprimer la mise en commentaire de la ligne // video.muted = true pour que celle-ci fonctionne correctement.

_ { https://stackblitz.com/edit/angular-ze4t9y } _

Les autres choses importantes à réaliser sont:

  • Même si une vidéo N'A PAS réellement de son, elle doit être mise en sourdine. Testez avec la vidéo ' lapin } _' si vous en avez besoin.
  • Les nouvelles règles d'engagement des médias décrites dans le blog peuvent vous déconcentrer lorsque vous testez une page, car vous aurez interagi avec celle-ci. Ce que vous devez faire, c'est fermer le navigateur ou ouvrir une nouvelle fenêtre en mode navigation privée - afin de réinitialiser cette règle d'engagement (voir l'entrée du blog).

L'erreur que vous verrez dans le navigateur si vous essayez de lire une vidéo non désactivée alors que l'utilisateur ne s'est pas "engagé" avec la page en premier est indiquée ci-dessous. Si vous ne voyez pas ce message pour une vidéo non désactivée, il est possible que Google Chrome ait autorisé la lecture de la vidéo, car vous avez interagi avec la page.

enter image description here

Et enfin, si vous utilisez Angular (où tout est ajouté dynamiquement), les actions suivantes permettent de mettre la vidéo en sourdine:

 @ViewChild('bunnyVideo', { read: ElementRef }) bunnyVideo: ElementRef;

Ensuite, quand vous voulez y jouer:

 const video: HTMLVideoElement = this.bunnyVideo.nativeElement;

 // explicitly mute it...
 video.muted = true;

 // ...before attempting to play
 video.play().catch((err) => {
    alert('video error ' + err);
 });
4
Simon_Weaver

Pour désactiver le son via HTML5 directement à la place de jQuery, vous pouvez également utiliser volume="0" dans la balise video, à savoir:

<video preload="true" autoplay="" volume="0" poster="img/example.jpg">
1
SM23

Assurez-vous que votre codec audio est réglé sur AAC lorsque vous produisez une vidéo. J'ai eu le même problème en utilisant OpenShot où le paramètre par défaut est AC3.

0
user3141094

Cela fonctionne bien pour moi.

<video oncanplay="this.muted=true" id="video" width="640px" height="350px" autoplay loop controls> <source src="intouchables.f4v" type="video/mp4"> Your browser does not support the video tag. </video>

0
SANA Abdoul Aziz