Une brève discussion pour combler les pièges de la vidéo html5 sur les terminaux mobiles

Cet article présente le terminal mobile vidéo html5 en comblant les pièges et le partage avec tout le monde. Les détails sont les suivants :

 <video id=video style=object-fit:fill autoplay webkit-playsinlineplaysinline x5-video-player-type=h5 x5-video-player-fullscreen=true x5-video-orientation=portraint src=video.mp4 />< /video><!-- object-fit: fill Le contenu vidéo remplit tout le conteneur vidéo poster:img.jpg Lecture automatique de la couverture vidéo : Lecture automatique automatique - Charger la vidéo entière lorsque la page charge les méta - Charger uniquement les métadonnées lorsque la page n'en charge aucune - Ne pas charger la vidéo lorsque la page se charge en sourdine : Lorsque cet attribut est défini, il spécifie que la sortie audio de la vidéo doit être désactivée. webkit -playsinline playinline : Lecture en ligne x5-video-player-type=h5 : Activer le lecteur x5 core H5 x5-video-player-fullscreen=true paramètre plein écran. Les paramètres true et false conduiront à des mises en page différentes. x5-video-orientation=portraint : déclare la direction prise en charge par le lecteur. Les valeurs facultatives sont l'écran horizontal paysage et l'écran vertical portrait. Portrait de valeur par défaut. Qu'il s'agisse d'une diffusion en direct ou d'un H5 plein écran, il est généralement lu verticalement, mais cet attribut nécessite un type de lecteur vidéo x5 pour activer le mode H5 -->

 <lecture automatique de la vidéo></vidéo>

Cependant, dans de nombreux navigateurs mobiles, l'opération réelle de l'utilisateur (événements standard tels que les événements touchend, click, doubleclick ou keydown) est requise pour déclencher l'appel à video.play() afin de lire automatiquement l'audio et la vidéo.

 dom.addEventListener('clic', function () { video.play()})

Video.play() peut également être déclenché dans wx.ready()

 wx.ready(function () { video.play()})

Définir la propriété webkit-playsinline

 <video id=video webkit-playsinline playinline /></video>

Lors de la lecture de vidéos dans iOS Safari et certains navigateurs Android, la vidéo ne peut pas être lue sur la page h5 et le système reprendra automatiquement la vidéo.

Si vous devez lire une vidéo dans une page h5, vous devez ajouter webkit-playsinline à la balise vidéo. Après iOS 10, vous devez ajouterplaysinline. Il est recommandé d'ajouter ces deux attributs en même temps. L'application doit également prendre en charge ce mode.

 webview.allowsInlineMediaPlayback = OUI ;

iOS Mobile QQ et WeChat prennent en charge ce mode, mais Android WeChat raccroche.

Le navigateur intégré d'Android WeChat utilise le noyau Tencent X5 et ne suit pas la norme X5web. L'un d'eux est la vidéo forcée en plein écran. Une fois la vidéo jouée, les propres recommandations vidéo de QQ apparaîtront.

On dit qu'il a une liste blanche et que les ressources vidéo de la liste blanche ne seront pas en plein écran. Mais Tencent ne peut plus ajouter de contenu à la liste blanche. Urinaire, pas de solution. . . . . .

Il existe actuellement une solution qui consiste à utiliser le canevas h5 pour lire une vidéo.

Pièges rencontrés lors de l'utilisation de canvas : la vidéo doit ajouter l'attribut x5-video-player-type=h5, sinon, la vidéo sera bloquée sur le terminal mobile et ne pourra pas être lue. Personnellement, je pense que c'est parce que la vidéo est reprise.

 <div class=wrapper> <video id=video style=display : aucun autoplay src=video.mp4 x5-video-player-type=h5></video> <canvas id=canvas></canvas></div> <script> var video = document.querySelector('#video') var canvas = document.querySelector('#canvas') var wrapper = canvas.parentNode var width = wrapper.offsetWidth var height = wrapper.offsetHeight var ctx = c.getContext('2d') var time = null canvas.width = largeur canvas.height = hauteur canvas.addEventListener('click', function () { video.play( ) }) video.addEventListener('play', function () { time = window.setInterval(function () { ctx.drawImage(v, 0, 0, largeur, hauteur }, 20); false); video.addEventListener('pause', function () { window.clearInterval(time); }, false); , function () { window.clearInterval(time }, false);</script>

Enfin, il a été découvert que même si Canvas est utilisé pour lire des vidéos, les vidéos recommandées après la lecture vidéo en plein écran peuvent être bloquées dans Android WeChat. Mais il n'existe aucun moyen de désactiver le problème du plein écran lors de la lecture de vidéos. Obtenez toujours la liste blanche des méchants. Déposez des plaintes. . . . . . . . . . . . . . . .

Ce qui est encore plus ennuyeux, c'est que je n'ai pas trouvé de moyen de déclencher la sortie plein écran via js.

Lors de la lecture d'une vidéo sur iOS, un écran noir apparaîtra brièvement puis s'affichera normalement.

Solution:

Ajoutez un div au-dessus de la vidéo et remplissez-le avec une image pour créer l'illusion de chargement avant de jouer. Écoutez ensuite l'événement timeupdate et supprimez ce bloc div lors de la lecture de la vidéo.

 video.addEventListener('timeupdate', function(){ if(video.currentTime > 0.1){ posterImg.hidden(); }})

HTMLVideoElement et HTMLAudioElement héritent tous deux de HTMLMediaElement

 //Erreur média MediaObj.error; //null : normal MediaObj.error.code; //1. Terminaison de l'utilisateur 2. Erreur réseau 3. Erreur de décodage 4. URL invalide //L'état actuel du média MediaObj.currentSrc; /Retour à la ressource actuelle URLMediaObj.src = value; //Renvoie ou définit la ressource actuelle URLMediaObj.canPlayType(type); //Si les ressources dans un certain format peuvent être lues MediaObj.networkState; //0. Cet élément n'est pas initialisé 1. Normal mais n'utilise pas le réseau 2. Les données sont en cours de téléchargement 3. La ressource MediaObj.load() n'est pas trouvée ; //Recharge la ressource spécifiée par src MediaObj.buffered; Retournez à la zone tampon, TimeRangesMediaObj.preload; //none : ne préchargez pas les métadonnées : préchargez les informations sur les ressources auto://ready state MediaObj.readyState ; //2:HAVE_METADATA //3.HAVE_CURRENT_DATA //4.HAVE_FUTURE_DATA //5.HAVE_ENOUGH_DATAMediaObj.seeking; //Qu'il recherche//Statut de lecture MediaObj.currentTime = value //La position de lecture actuelle, l'affectation peut modifier la positionner MediaObj .startTime ; //Généralement 0, s'il s'agit d'un streaming multimédia ou d'une ressource qui ne démarre pas à 0, ce n'est pas 0MediaObj.duration; //Le flux de longueur de ressource actuelle renvoie une valeur infinie MediaObj.paused; //S'il faut mettre en pause MediaObj.defaultPlaybackRate = value; ; //Par défaut Pour la vitesse de lecture, vous pouvez définir MediaObj.playbackRate = value; //Vitesse de lecture actuelle, modifiez-la immédiatement après avoir défini MediaObj.played; //Renvoie la zone qui a été lue, TimeRanges, voir ci-dessous pour cet objet MediaObj.seekable; //Renvoie la zone qui peut être recherchée TimeRangesMediaObj.ended; //S'il faut terminer MediaObj.autoPlay; //S'il faut lire automatiquement MediaObj; .loop; //Oui Lecture en boucle MediaObj.play(); //Jouer MediaObj.pause(); //Pause//Contrôle vidéo MediaObj.controls;//S'il existe une barre de contrôle par défaut MediaObj.volume = value; //Volume MediaObj.muted = value; //Mute//TimeRanges (région) objet TimeRanges.length; /Region Nombre de segments TimeRanges.start(index) //Position de début de la zone du segment d'index TimeRanges.end(index) //La position de fin de la section d'index //[★★★**Événements associés**★★★]//Distribution des événements var eventTester = function(e){ Media.addEventListener(e, function(){ console.log ((new Date()).getTime(),e) },false);}//Surveillance des événements eventTester(loadstart); //Le client commence à demander des données eventTester(progress); //Le client demande des données eventTester(suspend); //Téléchargement retardé eventTester(abort); //Le client termine activement le téléchargement (non causé par une erreur) eventTester(loadstart); //Le client commence à demander des données eventTester( progress) ; //Le client demande des données eventTester(suspend); //Téléchargement retardé eventTester(abort); //Le client termine activement le téléchargement (pas à cause d'une erreur), eventTester(error); //Une erreur a été rencontrée lors de la demande de données eventTester(stalled); //La vitesse du réseau est bloquée eventTester(play); //EventTester(pause) est déclenché lorsque play() et autoplay commencent à jouer ; //pause() déclenche eventTester(loadedmetadata) ); //Longueur de la ressource obtenue avec succès eventTester(loadeddata); //eventTester(waiting); //En attente de données, pas d'erreur eventTester(playing); //Démarrer la lecture eventTester(canplay); //Peut être lu, mais peut être mis en pause en raison du chargement eventTester(canplaythrough); //Peut jouer, toutes les chansons ont été chargées eventTester(seeking); /Recherche eventTester(timeupdate); //Temps de lecture modifié eventTester(ended); //Lecture terminée eventTester(ratechange); //Taux de lecture modifié eventTester(durationchange); //La longueur de la ressource change eventTester(volumechange); //Changements de volume

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.