Использование кнопки воспроизведения («Нажмите меня») поверх видео-постера по умолчанию не работает - PullRequest
Новая
       12

Использование кнопки воспроизведения («Нажмите меня») поверх видео-постера по умолчанию не работает

1 голос
/ 28 мая 2019

У меня есть видео.Я поместил текст «Click Me» в центре видео.

Мое требование - при нажатии на «Click Me» или любую часть видео, видео должно воспроизводиться и «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", доза не исчезает

Ответы [ 3 ]

1 голос
/ 28 мая 2019

Добавить (click) событие к .video-banner и к video и play() к видео в функции ...

Также добавить класс к click me по клику, чтобы скрыть его как [ngClass]="{'hide': isClicked}"

Здесь работает стек-блиц

HTML 

<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>

TS 

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

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

CSS 

.hide{
display:none;
}
1 голос
/ 28 мая 2019

Поскольку вы используете angular, вы можете использовать * 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>
0 голосов
/ 28 мая 2019

Море эта кнопка работает одним щелчком мыши, есть 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...