Le contrôle de l'élément vidéo HTML ne s'affiche pas

Question

J'ai créé un élément vidéo et défini l'attribut de contrôle sur true, mais les contrôles ne s'affichent pas (même en survol)

if (!this._player) {
    this._player = document.createElement('video');
}

this._player.controls = true ;
this._player.src = xxxxx;
≪/pré>
Définissez également la largeur de l'élément vidéo sur 100 %
L'emplacement du conteneur est relatif
Que dois-je faire pour afficher les commandes vidéo par défaut
            

Answer 1

Ce code créera un élément vidéo avec des contrôles par défaut. L'élément vidéo sera positionné de manière absolue et remplira tout l'écran. Lorsque la lecture de la vidéo commence ou est mise en pause, l'écouteur d'événements enregistre un message sur la console.

// 获取视频元素
const video = document.querySelector("video");

// 为视频控件添加事件监听器
video.addEventListener("play", function() {
  console.log("视频开始播放");
});

video.addEventListener("pause", function() {
  console.log("视频暂停");
});

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<video controls> 
    <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4' />
</video>