Lorsque vous jouez des vidéos sous le WeChat dans les téléphones iOS et Android, vous rencontrerez beaucoup de problèmes. .
Solution: ajoutez quelques attributs à la vidéo et appelez la vidéo native H5.<vidéo id = vidéo Src = vidéo / 01.mp4 poster = images / 1.jpg / * 视频封面 * / preload = auto webkit-playsinline = true / * 这个属性是 ios 10 中设置可以让视频在小窗内播放C'est-à-dire, est-ce une lecture à écran complet * / playSinline = true / * iOS WeChat Browser prend en charge la petite lecture de la fenêtre * / x -webkit-aair) WECHAT Android. La valeur est l'écran vertical * / style = objet-films: remplissage> </ vidéo>Poster = images / 1.jpg: l'image affichée lorsque l'attribut spécifie le téléchargement vidéo, ou l'image affichée devant l'utilisateur cliquez sur le bouton de lecture. Si cet attribut n'est pas défini, utilisez plutôt la première image de la vidéo. Preload = Auto: l'attribut spécifie la vidéo après le chargement de la page. Webkit-playsinline et playSinline: lecture locale pendant la lecture vidéo, ne quittez pas le flux de document. Mais cet attribut est plus spécial. En d'autres termes, si l'application n'est pas définie, cette étiquette n'est pas efficace sur votre page.
Il est nécessaire d'ajouter ici. Besoin parce que le plein écran est par défaut. Mais pour le moment, le plein écran a joué des contrôles, si vous définissez le contrôle si vous avez configuré. La diffusion en direct de la diffusion en direct peut être utilisée, mais le H5 à écran complet n'est pas nécessaire, donc le contrôle du contrôle pendant la lecture en plein écran nécessite les paramètres suivants: la même lecture de couche.
X-webkit-AirPlay = Pulser ne peut pas connaître son rôle exactement pour le moment, mais Xiaobian spécule que cet attribut devrait faire en sorte que cette vidéo prenne en charge la fonction AirPlay d'iOS. L'utilisation de AirPlay peut lire des vidéos, de la musique et des fichiers photo directement à partir de différents emplacements sur le dispositif d'iOS. La lecture prend également en charge les fonctions correspondantes. X5-video-player-Type: Activez le même lecteur H5 de couche, c'est-à-dire lorsque le plein écran de la vidéo, le div peut être présenté sur la couche vidéo, qui est également un attribut unique de la version WECHAT Android. Les alias de jeu sur la même couche sont également appelés lecture immersive. Le même joueur de niveau actuel ne prend effet que sur Android (y compris WeChat) et ne prend pas en charge iOS pour le moment. Quant à savoir pourquoi la même lecture de la couche est uniquement ouverte à Android, car Android ne peut pas être lu comme ISO, le plein écran par défaut entraînera une bloquer certaines opérations d'interface. La même couche à ce moment résout ce problème. Cependant, pendant le test, il a été constaté que différentes versions des effets ISO et Android étaient légèrement différentes. X5-Video-Orientation: Déclate la direction prise en charge par le joueur, écran horizontal du paysage à valeur facultative, décrivant l'écran vertical. La valeur par défaut représente. La diffusion en direct et le H5 complet sont généralement joués des écrans verticaux, mais cet attribut nécessite du type de jeu X5-video-player pour ouvrir le mode H5 X5-video-player-fullScreen: paramètres en plein écran. Il a deux autres valeurs d'attribut, Ture et False, True prend en charge la lecture complète, False ne prend pas en charge la lecture complète.En fait, le navigateur ISO WeChat est le cœur de Chrome, et les attributs associés sont pris en charge, et c'est pourquoi le X5 n'est pas pris en charge par la même couche. Le navigateur Android WeChat est le noyau X5.
Il y a aussi un problème.
Solution: Ajouter un objet: remplissage; attribut de style à la vidéo. S'il y a encore des bords noirs, la taille de la vidéo est inappropriée.<div id = videoBox> <video id = videoall src = mp4.mp4 poster = 1.jpg preload = auto webkit-playsInline = true playSinline = true = permettre x5-video-player-type = h5 x5- vidéo-player-fullscreen = True x5-video-orientation = portraint style = objet-fit: fill> </ video> <div id = playContr ()> </div> </div> <div id = videoend> <div id = encoretbtn onclick = PlayContr ()> </div> </div>
* {Bandinage: 0; marge: 0;} #videObox {Posity: Absolute; 100% 100%; ; Size de la taille: couverture; : -40.5px; 2. JPG); <Script> var videoall = document.getElementById ('Videoall'), VideoBox = document.getElementById ('VideoBox'), btn = d ('btn'), videond = document.getElementById ('vidéo'); .DocMeenteLement.ClientWidth; var ClientHeight = Document.DocumentEdEmplement.ClientHeight; EmptiserDefault ()}, false); .Indexof ('ADR')> -1; Fonction de terminal iOS PlayContr () {if (isAndroid) {videoall.style.width = window.screen. = Block; , Function () {videoLll .Pause ();Ce qui précède est la solution à la lecture de la lecture HTML5. Merci beaucoup pour votre soutien pour le site Web VEVB Wulin!