Скрыть элемент после преобразования при наведении?

Question

• 1000 *

.video-block {
  display: flex;
}

.box-btns {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  bottom: 0;
  width: 100%;
  background-color: rgba(54, 91, 160, 0.56);
  z-index: 2;
  flex: 1;
  transform: translateY(100%);
  transition: transform 0.9s;
}

.video-block:hover {
  transform: translateY(0%);
  transition: transform 0.2s;
}

<div class="video-block">
  <video id="main-video" src="../css/abc.mp4"></video>
  <div class="media-box">
    <div class="box-btns">
      <button onclick="playVideo()" class="play-btn">
        <i class="ion-play"></i>
      </button>
      <button onclick="pauseVideo()" class="pause-btn">
        <i class="ion-pause"></i>
      </button>
    </div>
  </div>
</div>

Answer 1

Если я правильно предполагаю, вы хотите скрыть элементы управления после определенных секунд перемещения мыши, а не после игры. В противном случае вы не сможете приостановить воспроизведение видео.

Я собираюсь использовать для этого JavaScript. Прежде всего, добавлено событие mousemove, чтобы добавить и удалить класс, отвечающий за отображение элементов управления кнопки вместо использования CSS. Я добавляю класс box-btns--visible к элементам управления видео всякий раз, когда есть движение мыши по видео. Затем я создаю 3-секундный таймер, чтобы удалить класс box-btns--visible из элементов управления, но если я перемещаю мышь до окончания таймера, я сбрасываю таймер. Я добавил события воспроизведения и паузы и видео с открытым исходным кодом, чтобы вы могли поиграть. Вы можете посетить ссылки на эту документацию для лучшего понимания.

HTMLMediaElement Наведение курсора мыши Это не то же самое событие, но у него есть хороший пример, связанный с вариант использования

const playButton = document.querySelector('.play-btn');
const pauseButton = document.querySelector('.pause-btn');
const video = document.getElementById('main-video');
const controls = document.querySelector('.box-btns');

let timer;

function hideControls() {
  timer = setTimeout(() => controls.classList.remove('box-btns--visible'), 3000);
}

function preventHideControls() {
  clearTimeout(timer);
} 

video.addEventListener('mousemove', function(e) {
  controls.classList.add('box-btns--visible');  
  preventHideControls();
  hideControls();
});

playButton.addEventListener('click', async function(e) {
  try {
    await video.play();
    playButton.setAttribute('disabled', '');
    pauseButton.removeAttribute('disabled');

  } catch (err) {
    playButton.removeAttribute('disabled');
  }
});

pauseButton.addEventListener('click', async function(e) {
  try {
    await video.pause();
    pauseButton.setAttribute('disabled', '');
    playButton.removeAttribute('disabled');

  } catch (err) {
    pauseButton.removeAttribute('disabled');
  }
});

.video-block {
  display: flex;
  width: 300px;
  height: 100px;
  background-color: red;
  position: relative;
  overflow: hidden;
}

.box-btns {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  background-color: rgba(54, 91, 160, 0.56);
  z-index: 2;
  flex: 1;
  transform: translateY(100%);
  transition: all 0.9s ease;
}

.box-btns--visible {
  transform: translateY(0%);
  transition: transform 0.2s;
  opacity: 1;
}

.playing {
  background-color: black;
  color: white;
}

<div class="video-block">
  <video id="main-video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>
  <div class="media-box">
    <div class="box-btns">
      <button class="play-btn">
        Play
      </button>
      <button class="pause-btn" disabled>
        Pause
      </button>
    </div>
  </div>
</div>

Answer 2

Я покажу вам несколько примеров, чтобы вы могли получить Идею этого

---

Я использовал JQuery!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Эта часть показывает видео на веб-странице

<video width=640 muted src="CotswoldSequence1.mov" id="playvid" ontimeupdate="getvidtime(this)"></video>

Я использую эту часть для получить текущее время видео

ontimeupdate="getvidtime(this)"

Это показывает текущее время видео во время воспроизведения

    function getvidtime(event) {

        getCurrentTime = Math.trunc(event.currentTime);        

        document.getElementById("demo").innerHTML = getCurrentTime;
    }

Здесь отображается время, когда вы наводите курсор мыши на видео

$('#myvid').mouseenter(function(){
    $( ".demox" ).text(getCurrentTime);
});

Этот раздел, когда вы наведите указатель мыши на кнопку видео, будет отображаться, иначе оно будет скрыто

    $('#myvid').mouseenter(function(){
        $('#playbtn').show();
    });
    $('#myvid').mouseleave(function(){
        $('#playbtn').hide();
    });

В этом разделе при нажатии кнопки, если ID равен кнопке ID видео будет be play, и после 3se c кнопка скрыть, а также когда вы выводите мышь из видео, а затем перемещаете мышь по видео, вы можете увидеть, какая вторая мышь переместилась на видео "$ (" .demox ") .text (getCurrentTime); " и после 3se c скрыть кнопку

    $('#playbtn').click(function(){

        if(this.id == 'playbtn'){
            $('#playvid')[0].play();
                setTimeout(() => {
                    $('#playbtn').fadeOut();
                }, 3000);

             $('#myvid').mouseenter(function(){
               $( ".demox" ).text(getCurrentTime);
                   setTimeout(() => {
                      $('#playbtn').hide(); 
                   }, 3000);
                });
           }
    });

---

Вот полный код

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>

<div class = container style="max-width: 640px;" id="myvid">

        <video width=640 muted src="CotswoldSequence1.mov" id="playvid" ontimeupdate="getvidtime(this)"></video>
    <div>
        <button class=controls id="playbtn" style="position: fixed; top: 332px; left: 12px;">Play/pause</button> 
    </div>
        <p>Playback position: <span id="demo"></span></p>

        Mouseenter position: <p class="demox"></p>
</div>

    <script>

    var getCurrentTime;

    function getvidtime(event) {

        getCurrentTime = Math.trunc(event.currentTime);        

        document.getElementById("demo").innerHTML = getCurrentTime;
    }

        $(document).ready(function(){

            $('#myvid').mouseenter(function(){
                $('#playbtn').show();
            });
            $('#myvid').mouseleave(function(){
                $('#playbtn').hide();
            });

            $('#playbtn').click(function(){

                if(this.id == 'playbtn'){
                    $('#playvid')[0].play();
                        setTimeout(() => {
                            $('#playbtn').fadeOut();
                        }, 3000);

                    $('#myvid').mouseenter(function(){
                        $( ".demox" ).text(getCurrentTime);
                            setTimeout(() => {
                                $('#playbtn').hide(); 
                            }, 3000);
                    });
                }
            });
        });

    </script>

---

• Я использовал settimeout потому что он дает то же время для видео времени
• вы можете использовать свое собственное видео в src = "CotswoldSequence1.mov" здесь
• скопируйте этот код и пройдите к своему редактору и запустите, посмотрите, что происходит!
• Думаю, вы можете получить некоторое представление!