Javascript 如何仅在第一次单击后显示html视频控件?
我有一个页面,上面有我编码的视频部分。我想隐藏视频控件(下面带有播放按钮的水平条和进度条),直到单击视频。它应该是隐藏的,只有在点击视频后才会显示。我该怎么做?谢谢Javascript 如何仅在第一次单击后显示html视频控件?,javascript,html,angular,Javascript,Html,Angular,我有一个页面,上面有我编码的视频部分。我想隐藏视频控件(下面带有播放按钮的水平条和进度条),直到单击视频。它应该是隐藏的,只有在点击视频后才会显示。我该怎么做?谢谢 <section class="video-background text-center pb-0 mt-9"> <div class="container px-0"> <h2 class="mt-5 mb-4">Tak
<section class="video-background text-center pb-0 mt-9">
<div class="container px-0">
<h2 class="mt-5 mb-4">Take a look at our video!</h2>
<p class="mb-5 font-weight-normal">One click away</p>
<div class="position-relative mx-auto px-0 mb-6"
>
<div class="mx-auto" [ngClass] = "{ 'darken' : !btnHide }" (click)="isPlayed ? pauseVideo() : playVideo();" >
<video #videoEl id="videoPlayer" class="videoDimension py-0 vid-shadow"
src="https://www.youtube.com/watch?v=LXb3EKWsInQ"
allowfullscreen controls></video>
</div>
<button (click)="playVideo();" *ngIf="!btnHide" class="btn btn-primary btn-lg pl-5 pr-2 py-2 play-button">Watch video<i class="ml-4 fa fa-caret-right" aria-hidden="true"></i></button>
</div></div>
</section>
看看我们的视频!
一次点击即可
观看视频
从视频元素中删除controls属性,然后在onclick listener中为视频元素设置属性(“controls”、“true”)