Je ne trouve nulle part de réponse à ce problème.
J'utilise une balise HTML5 standard pour intégrer une vidéo dans la page:
<video controls>
<source src="video/intro-video.mp4" type="video/mp4"/>
</video>
Cependant, dans les commandes par défaut de Chrome sur la droite, trois points apparaissent (options), cependant, lorsque vous cliquez dessus, cela passe à un écran vide et il n'y a aucun moyen de sortir si cela sauf pour actualiser la page entière.
Comment pouvez-vous faire disparaître les options ou empêcher un écran vide?
Merci .
4 Réponses :
si vous désactivez les options, en utilisant les exclusions pertinentes de la liste ci-dessous, les points devraient disparaître:
<video controls controlsList="nofullscreen nodownload noremoteplayback"> </video>
Voir ControlsList pour plus de détails
Ok, compris! Il semble que le bouton "Options" se comporte différemment en fonction de la façon dont l'élément vidéo a été incorporé dans la page. Essentiellement, il offre des fonctionnalités de téléchargement ou "Picture-in-Picture" ou les deux, ce qui, si la page est un site à défilement large avec un contenu généré dynamiquement, provoquait un écran vide lors d'un clic, ce qui était mon problème. Je peux résoudre ce problème de deux manières:
Incorporer la vidéo dans un conteneur fixe distinct (comme une fenêtre contextuelle modale)
Utilisez un attribut disablePictureInPicture pour éliminer complètement la fonction Picture-in-Picture. https://wicg.github.io/picture-in-picture / # dom-htmlvideoelement-disablepictureinpicture
Je sais qu'il est trop tard mais cela peut être utile pour les autres, vous pouvez ajouter "nodownload" dans la liste des contrôles qui masquera l'option de téléchargement de la vidéo et ajoutera "disablepictureinpicture" dans la balise vidéo qui masquera l'option image dans l'image et de cette manière les trois points sont cachés
<video width="100%" controls disablepictureinpicture controlslist="nodownload">
Merci pour l'explication. Pouvez-vous ajouter du code comme exemple
Merci pour cela - cela a également fonctionné pour les commandes audio
Ce problème semble se produire lorsque l'un des éléments ancêtres de l'élément vidéo a le style css transform: translate (0,0) ou transform: translate3d (0,0,0 ) appliqué.
Le supprimer de cet élément résout le problème de l'écran vide.
Je rencontre le même problème
Pour moi, ça ne fait rien quand je clique sur ces trois points. Même si j'ai ajouté
controlsList = "téléchargement plein écran à distance"Après m'être débarrassé de
react-slickdans lequel ma vidéo était enveloppée, cela a commencé à fonctionner comme prévu.