Que dois-je faire si la balise vidéo en HTML5 ne peut pas être lue ?

Solution au problème selon lequel la balise vidéo HTML5 ne peut pas être lue : 1. Utilisez la capture d'écran vidéo pour créer un bouton de lecture et occuper la position d'origine de la vidéo ; 2. Surveillez l'événement de clic du bouton occupant et utilisez "vidéo" .play()"; 3. Masquez simplement l'image d'espace réservé et le chargement.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur DELL G3

Que dois-je faire si la balise vidéo de html5 ne peut pas être lue ?

La balise vidéo IOS-HTML5 ne peut pas être lue

La balise vidéo h5 ne peut pas être lue dans UIwebview, Safari le peut,

Certains téléphones le peuvent, certains téléphones ne le peuvent pas

C'est cohérent avec video.js, ne le faites pas je ne l'aime plus Introduisez un package de compatibilité. Si vous souhaitez avoir une meilleure expérience, il est recommandé d'utiliser https://videojs.com/

Si vous souhaitez expérimenter le principe vous-même, vous pouvez copier le code de démonstration à la fin. de l'article et exécutez-le.

La méthode traditionnelle consiste à écrire des vidéos en HTML. Les balises peuvent être cliquées pour lire

<video src="xxx.mp4" controls poster="url?vframe/jpg/offset/5" preload="load"></video>
// ?vframe/jpg/offset/5  这个是七牛接口，取截图用的，5就是第5秒截图

MAIS, écrites comme ceci ne fonctionneront pas sur IOS 10.3.2/3 11.x.x. et d'autres machines de test, mais il peut être utilisé sur des téléphones mobiles personnels, et certains téléphones portables peuvent le faire. Certains téléphones portables ne fonctionnent pas.

Après modification :

Étape 1 : Utilisez la capture d'écran vidéo pour créer un bouton de lecture pour occuper la position d'origine de la vidéo

Étape 2 : Surveillez l'événement de clic du bouton d'espace réservé, utilisez video.play(), et vous pouvez regarder Il y a une demande pour la vidéo et elle est en cours de chargement

Étape 3 : Il y a une promesse pour le chargement de la vidéo, puis cachez simplement l'image d'espace réservé et le chargement

conseils :

Différents téléphones mobiles / Le système aura différentes plages de requêtes, généralement divisées en 3 à 5 206 requêtes.
console.time("loading milliseconds"); Vous pouvez voir le temps de chargement, qui est fondamentalement le même que celui capturé par Charles.
Les différents téléphones/systèmes mobiles auront également des performances différentes. Certains seront renvoyés dès un clic, et certains devront attendre que la vidéo soit complètement chargée avant de revenir.
Les attributs de la vidéo. DOM peut obtenir combien est actuellement chargé et quel est le montant total, divisé par un est le pourcentage, les attributs spécifiques peuvent être vus> https://developer.mozilla.org/zh-CN/docs/Web/HTML/. Element/video
Adresse en ligne : http://m.soyoung ...

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!