web-dev-qa-db-fra.com

vidéo autoplay html5 dans un appareil mobile

La lecture automatique ne fonctionne pas sans l'attribut muted lorsque j'essaie d'ouvrir l'URL dans le périphérique mobile. Comment lire une vidéo sans utiliser l'attribut muted? J'ai besoin de volume sans cliquer sur le bouton en sourdine et une chose importante est que tout fonctionnera sans JS et Jquery.  enter image description here

htmlhtml5
10
Sawan mishra

Vous ne pourrez pas réaliser cela dans iOS sans piratage. À partir de la documentation officielle Apple WebKit:

À partir de iOS 10, WebKit assouplit ses stratégies en ligne et en lecture automatique en rendre ces présentations possibles, tout en gardant à l’esprit les sites » la bande passante et les batteries des utilisateurs.

Par défaut, WebKit aura les stratégies suivantes:

  • les éléments vidéo seront autorisés à se lire automatiquement sans geste de l'utilisateur si leur média source ne contient aucune piste audio. 
  • Les éléments video en sourdine seront également autorisés à se lire automatiquement sans geste de l'utilisateur. Si un élément gagne une piste audio ou devient muet sans un geste de l'utilisateur, la lecture s'interrompt. 

https://webkit.org/blog/6784/new-video-policies-for-ios/

En ce qui concerne Mobile Chrome (Android):

La lecture automatique en sourdine de la vidéo est prise en charge par Chrome pour Android à partir de version 53. La lecture commence automatiquement pour un élément vidéo une fois il apparaît si la lecture automatique et le muet sont tous deux réglés sur, et la lecture de Les vidéos en sourdine peuvent être lancées progressivement avec play (). Précédemment, la lecture sur mobile devait être lancée par un geste de l'utilisateur, peu importe de l'état coupé.

https://developers.google.com/web/updates/2016/07/autoplay

21
Dan H

Incluez simplement defaultMuted en ligne avec votre vidéo pour activer le son lors de la lecture automatique. Par exemple,

 <video id="myVideo" defaultMuted autoplay controls>
     <source src="myVideo.mp4" type="video/mp4">
 </video>

Référence: http://www.w3schools.com/tags/av_prop_defaultmuted.asp

5
bowl0stu

Je ne peux vraiment pas en comprendre le sens, mais cela a fonctionné sous iOS Safari et Firefox (n'ayant pas encore testé Android):

<video playsinline autoplay muted loop id="DemoReel2018">
<source src="resources/AgsVision_backgroundMovie.mp4" type="video/mp4">
</video>

... le problème est que cela ne fonctionne qu'après que j'ai défini la fenêtre:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Si quelqu'un peut réellement expliquer pourquoi c'est arrivé, je voudrais vraiment savoir. Sinon ... restez à l'écoute pour plus de trucs farfelus :))

1
Nelu

Peut-être que cela fonctionnera pour vous

<video  autoplay="autoplay" loop="loop" muted defaultMuted playsinline>
0
Hiren Pipariya

Vous essayez ce lien un ils ont également fournir plus d'informations sur Pourquoi le changement ?:

https://developers.google.com/web/updates/2016/07/autoplay

0
swap
<video autoplay="autoplay" loop="loop" muted defaultMuted playsinline  oncontextmenu="return false;"  preload="auto"  id="myVideo">
        <source src="assets/video/1.mp4" type="video/mp4">
        </video>

Ce code a fonctionné pour moi sur Ios et téléphone Android

0
Tugrul Yildirim

C'est simple voir le code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example movie autoplay</title>
    <meta charset="UTF-8">                
</head>
<body>
    <video autoplay muted>
        <source src="midia/video.mp4" type="video/mp4">
        <source src="midia/video.webm" type="video/webm">
    </video>
</body>
</html>

Vous devez vérifier les navigateurs et les formats pris en charge.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Browser_compatibility

https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

0
Alessandro Gonçalves