Question

我有一个视频。我在视频的中心放置了一个文本“ Click Me”。

我的要求是-单击“点击我”或视频的任何部分时，视频应播放并且“点击我”消失。

.banner-description{
    position: absolute;
    font-weight: bold;
    top : 50%;
    left: 50%;
    background: rebeccapurple;
}
.video-banner{
    position: relative;
}


<body>

    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis laudantium nobis laboriosam quaerat. Quo, veritatis harum nemo eligendi sed dicta fugiat ad. Voluptas ea maxime qui nostrum blanditiis facere natus!
    </div>

    <div class="video-banner">
        <video controls>
            <source src="011-video-files.mp4">
        </video>
        <div class="banner-description">
            <p>Click Me</p>
        </div>
    </div>

    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde explicabo repellat minima magnam totam, temporibus nemo saepe praesentium ipsam a quidem. Mollitia vero impedit architecto quod ex voluptates neque eveniet!
    </div>



</body>

问题是：单击“单击我”时，什么也没有发生。并且，在点击视频的其他部分时，尽管视频开始显示“ Click Me”，但它不会消失

Answer 1

向!important和(click)和.video-banner视频功能中添加video事件...

还将类添加到play() onclick上以将其隐藏为click me

Here is working stackblitz

HTML

[ngClass]="{'hide': isClicked}"

TS

<div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis laudantium nobis laboriosam quaerat. Quo, veritatis harum nemo eligendi sed dicta fugiat ad. Voluptas ea maxime qui nostrum blanditiis facere natus!
</div>

<div class="video-banner" (click)="play()">
    <video controls #videoPlayer>
        <source src="011-video-files.mp4">
    </video>
    <div class="banner-description" (click)="play()" [ngClass]="{'hide': isClicked}">
        <p>Click Me</p>
    </div>
</div>

<div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde explicabo repellat minima magnam totam, temporibus nemo saepe praesentium ipsam a quidem. Mollitia vero impedit architecto quod ex voluptates neque eveniet!
</div>

CSS

@ViewChild('videoPlayer') videoplayer: ElementRef;
isClicked=false;

play() {
    this.videoplayer.nativeElement.play();
    this.isClicked=true;
}

Answer 2

由于使用了角度，因此可以使用* ngIf或* ngShow，并可以通过（单击）事件来触发它

    <div (click)="showDescription = !showDescription" class="video-banner">
        <video controls>
            <source src="011-video-files.mp4">
        </video>
        <div *ngIf="showDescription" class="banner-description">
            <p>Click Me</p>
        </div>
    </div>

Answer 3

这个“一键点击我”按钮在起作用，有一个jQuery可以起作用，请检查一下，我认为这对您有用

document.getElementById("banner-description").addEventListener("click", changeBackground);

// OTHER FUN STUFF WE CAN DO:
    function changeBackground() {
      var randomColor = Math.floor(Math.random()*16777215).toString(16);
      document.body.style.background = '#' + randomColor;
    };

#banner-description{
    position: absolute;
    font-weight: bold;
    top : 50%;
    left: 50%;
    background: rebeccapurple;
}
.video-banner{
    position: relative;
}

<body>

    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis laudantium nobis laboriosam quaerat. Quo, veritatis harum nemo eligendi sed dicta fugiat ad. Voluptas ea maxime qui nostrum blanditiis facere natus!
    </div>

    <div class="video-banner">
        <video controls>
            <source src="011-video-files.mp4">
        </video>
        <div id="banner-description">
            <p>Click Me</p>
        </div>
    </div>

    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde explicabo repellat minima magnam totam, temporibus nemo saepe praesentium ipsam a quidem. Mollitia vero impedit architecto quod ex voluptates neque eveniet!
    </div>



</body>

在默认视频海报上使用播放按钮（“点击我”）无效

3 个答案: