Problèmes et solutions rencontrés dans le développement vidéo H5

Récemment, j'ai réalisé quelques activités pour intégrer des vidéos et j'ai accumulé de l'expérience dans les vidéos parsemées. Ci-dessous, j'enregistre les pièges que d'autres et moi-même avons rencontrés et les solutions correspondantes.
1. Problèmes et solutions rencontrés
1.1. La vidéo lue sur la page Web iOS est par défaut en plein écran (cliquer sur la vidéo fera apparaître le lecteur pour une lecture en plein écran).
Pour résoudre le problème de ne pas jouer en plein écran, vous pouvez ajouter les attributs suivants webkit-playsinline='true' et Playsinline='true'. Si la définition des attributs ci-dessus n'a aucun effet, vous pouvez essayer avec. le plug-in suivant. iphone-inline-video
Remarque : lors de l'ouverture d'une page Web dans Weibo pour lire une vidéo sous iOS, un lecteur apparaîtra pour lire la vidéo. La définition de l'attribut Playsinline n'est pas valide. Vous devez également utiliser le plug-in ci-dessus. Le test personnel est efficace.
1.2. Les vidéos recommandées sont affichées après la lecture de la vidéo dans Android
L'élément vidéo dans les navigateurs mobiles est assez spécial. Au début, il était utilisé à la fois dans les navigateurs iOS et Android. au niveau supérieur de la page et ne peut pas être couvert. Plus tard, ce problème a été résolu sous iOS, mais le problème est resté avec les navigateurs Android. X5 est un moteur de rendu développé par Tencent basé sur Webkit. Il fournit un élément vidéo spécial appelé « lecteur même couche » pour résoudre le problème de couverture. En définissant

x5-video-player-type="h5" 可以开启同层播放器，来避免播放后显示推荐视频的问题。
x5-video-player-fullscreen="true" //视频全屏播放
x5-video-orientation="portrait"//视频竖屏模式播放

1.3, adaptation vidéo
Actuellement, les concepteurs conçoivent généralement des vidéos selon les standards de l'iphone5 ou de l'iphone7, et elles peuvent généralement être lues avec une largeur de 100 % et hauteur de la vidéo, si vous constatez que la vidéo ne fonctionne toujours pas, vous devez définir l'attribut d'ajustement de l'objet en fonction de la situation réelle pour résoudre le problème. Pour plus de détails, consultez une compréhension semi-approfondie des attributs CSS3 object-position/object-fit
Remarque : sous le navigateur du noyau du kit Web, la valeur par défaut est object-fit:contain.
1.4. JS contrôle la lecture des vidéos
Dans iOS, les vidéos et les audios ne sont généralement pas lus activement à moins que l'utilisateur ne clique activement, il est donc nécessaire de surveiller l'interaction de l'interface via js pour contrôler la vidéo de lecture.
La lecture et la pause de vidéos impliquent principalement d'appeler les méthodes de lecture et de pause. Si une interaction de l'utilisateur est requise pendant la lecture vidéo, la durée de lecture actuelle est principalement surveillée via la méthode timeupdate. Jetez un œil à un morceau de code :

var isStop = false;
    videoElem.on('timeupdate', function () {
        var curTime = parseInt(videoElem[0].currentTime);
        if (curTime == 152) {//该时间点展示交互蒙层
            $('.js_first_stop').removeClass('hide');
        } else if (curTime > 152 && curTime == 153) {
            if (!isStop) {//解决ios暂停后再次点击播放不了问题，因为该处触发了多次，但是andriod没有该问题。
                isStop = true;
                videoElem[0].pause();
            }
        } else if (curTime == 248) {
            $('.js_second_stop').removeClass('hide');
        }
    });

Il doit être introduit lors de la surveillance de l'événement timeupdate. et mettre la vidéo en pause dans iOS. Une variable globale isStop, sinon il n'y aura pas de réponse la prochaine fois que vous cliquerez pour continuer la lecture (plusieurs pauses sont déclenchées lors de la mise à jour), mais Android n'a pas ce problème. Pour déterminer la fin de la vidéo, vous pouvez écouter l'événement terminé de la vidéo

videoElem.on('ended',function(){});

ou surveiller l'événement timeupdate de la vidéo, puis déterminer l'attribut terminé. Si c'est vrai, cela signifie qu'elle est terminée, et si c’est faux, c’est que ce n’est pas fini.

videoElem.on('timeupdate',function(){
   if(videoElem[0].ended){
    //播放结束
   }
}

De plus, le même lecteur de couche est activé du côté Android, et le côté WeChat fournit également 2 événements de surveillance pour entrer et sortir du même lecteur de couche. Entrez l'événement de lecteur du même calque (commencez la lecture de la vidéo).

videoElem.on("x5videoenterfullscreen", function(){}

Cliquez sur le bouton de retour dans le coin supérieur gauche pour quitter le lecteur sur le même calque.

videoElem.on('x5videoexitfullscreen',function(){}

La dernière chose à noter est qu'après avoir lu la vidéo sur Android, elle ne quittera pas automatiquement le lecteur du même calque. S'il y a une interface d'affichage dans le futur, elle sera également affichée dans le lecteur, ce qui semble très bizarre. Cela peut être résolu par saut de lien.
1.5, Canvas lit la vidéo
Canvas peut lire la vidéo, mais sur certaines machines Android, vous verrez un alias sérieux, et certains navigateurs Android n'ont que du son mais pas d'images lors de la lecture.
1.6. Encodage vidéo
La vidéo au format mp4 nécessite un encodage h.264, sinon certains ios n'auront que du son mais pas d'image.
Enfin, une configuration vidéo complète est la suivante, à titre de référence uniquement

<video class="js_video" style="object-fit: cover; width: 100%; height: 100%;" preload="load" 
playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"
 x5-video-orientation="portrait"src="https://video.mdcdn.cn/friend2018.mp4"></video>

Recommandations associées :

Exemple de partage d'accès au lecteur vidéo H5 de même couche

Comment mettre à niveau l'application de développement hybride H5

Problèmes et solutions audio et vidéo HTML5

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!