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.
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.
on dirait que cette sourdine a cessé de fonctionner en chrome 64. fonctionne toujours en 63.
<video preload= "true" autoplay = "autoplay" loop = "loop" muted>
<source src = "video/Real-Estate.mp4" type = "video/mp4">
</video>
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:
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.
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);
});
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">
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.
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>