web-dev-qa-db-fra.com

Lecture automatique de vidéos HTML5 sur navigateur mobile

J'utilise le code HTML5 et JQuery suivant pour lire une liste de lecture de vidéos dont les URL sont dans un tableau URLArray [].

function NextFrag(){

 if (index < URLArray.length)
 {
   $("#VideoContainer").html('<video  id="video1" controls autoplay width="95%"> "<source src= "'+ URLArray[index]+ '" type="video/mp4"></source> </video>' );
   index++;
   $("#video1").bind( "ended", NextFrag);
 }
}

Comme nous savons que la fonction de lecture automatique de HTML5 est désactivée sur tous les téléphones mobiles, je dois donc lire manuellement chaque clip vidéo sur le téléphone mobile. c'est définitivement ce que je ne veux pas.

Je veux vraiment connaître l'alternative à cela. Je suis vraiment intéressé par le segment de code que je peux inclure pour faire comme la lecture automatique sans impliquer l'utilisateur pour interagir.

Est-il possible de convertir cela en une application Android pour fonctionner. J'ai vraiment besoin de le faire fonctionner comme une liste de lecture, et je n'ai aucune inquiétude sur la façon dont, j'ai juste besoin de cette fonctionnalité.

Veuillez aider.

jqueryhtml5html5-video
27
SotonJ

Depuis la sortie d'iOS 10 Apple a autorisé la lecture automatique des vidéos en sourdine: https://webkit.org/blog/6784/new-video-policies-for-ios/ =

Chrome 53 sur Android permettant également la lecture automatique des vidéos en sourdine: https://developers.google.com/web/updates/2016/07/autoplay

36
Rihards

MISE À JOUR - Janvier 2017: Étant donné que cette réponse continue de me faire repérer, j'encourage fortement tous ceux qui lisent ceci à consulter la réponse de Rihards et à lui donner de l'amour . Les références de Rihards sont plus modernes que cette réponse et devraient vous aider si vous avez besoin de la lecture automatique dans le navigateur.

La limitation de lecture automatique dans les navigateurs mobiles est une limitation intentionnelle introduite par les développeurs du système d'exploitation. À ma connaissance, il n'y a absolument aucun moyen de lire automatiquement du contenu dans un navigateur mobile, car l'événement qui est nécessaire pour déclencher la lecture de contenu est un événement OS/Phone, un événement sur lequel le navigateur lui-même n'a aucun contrôle ni interaction avec.

Facebook a mis en œuvre une fonctionnalité de lecture automatique de vidéo dans son arsenal publicitaire, mais uniquement via son application native. Même le puissant FB doit abandonner sa volonté au pouvoir des dieux du téléphone.

J'ai trouvé un article sur cette nouvelle technique de présentation d'annonces FB dans laquelle certains utilisateurs de la section commentaires se plaignaient d'un moyen de désactiver la lecture automatique dans les navigateurs comme vous le pouvez avec l'application FB native:

Facebook pour ajouter une vidéo de lecture automatique à NewsFeed pour tous les utilisateurs mobiles

Mais c'est évidemment une plainte hypothétique et une plaisanterie parce que les commentaires ont été faits avant que FB ne lance complètement cette fonctionnalité.

Ma conclusion: Si vous avez absolument besoin du jeu automatique, vous allez devoir devenir "natif" (ha ... voyez ce que j'ai fait là-bas?) .

35
Ryan McCoy

Sur mobile Chrome J'avais activé l'option d'enregistrement des données, qui désactive par défaut la lecture automatique des vidéos en sourdine, auquel cas les GIF sont une solution partielle de faible qualité + bande passante élevée).

2
DavidTaubmann

J'avais des problèmes lors de la lecture automatique de vidéos sur iOS 11. Android et iOS 10.3 fonctionnaient bien avec une solution égale à celles fournies par Pointi et Rihards.

Le Mobile Safari sur iOS 11 semble à nouveau être un peu plus une diva. Veuillez vous assurer d'ajouter également l'attribut préfixé (webkit-playsinline).

<video playsinline webkit-playsinline autoplay muted loop>
  <source src="./video.mp4" type="video/mp4">
</video>

Cette solution fonctionne dans tous les navigateurs de bureau populaires ainsi que sur Android Chrome et iOS 10/11 Safari/Chrome. Elle fonctionne même dans la plupart des navigateurs en ligne) comme par exemple dans l'application Facebook (testé sur iOS 11).

Le découvrir m'a coûté des heures, donc j'espère que je pourrai être une aide au moins pour vous.

2
Malte Peters

Ce qui me manquait dans presque toutes les réponses que j'ai trouvées sur ce sujet, c'est que j'avais besoin de l'attribut playsinline pour fonctionner correctement dans les navigateurs mobiles (ne jouez pas en plein écran, au lieu de l'intégrer au contenu du site Web)

Mon exemple complet serait donc:

<video width="100%" height="auto" autoplay muted loop playsinline id="my_video">
  <source data-src="/video.mp4" type="video/mp4">
</video>
2
Pointi