Question

我将视频播放器转换为在悬停时显示在视频底部。

即使在视频上方悬停了三秒钟，如何仍能隐藏div？

.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

我将向您展示一些示例，以便您可以从中获得一些想法

我使用了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的视频将被播放，则在单击按钮时隐藏按钮3秒后，以及将鼠标移出视频然后在视频上移动鼠标时您可以在视频“ $（“ .demox”）.text（getCurrentTime）;“上看到第二只鼠标移动并在3秒后隐藏臀部

    $('#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” 上使用自己的视频
将此代码复制并复制到您的编辑器中，然后运行以查看发生了什么！
我想你会有所想法的！

Answer 2

如果我假设很好，那么您想在移动鼠标几秒钟后而不是在播放后隐藏控件。否则，您将无法暂停视频。

我将为此使用JavaScript。首先，添加了mousemove事件，以添加和删除负责显示按钮控件而不是使用CSS的类。每当视频上有鼠标移动时，我就将box-btns--visible类添加到视频控件中。然后，我创建了一个3秒的计时器，以从控件中删除box-btns--visible类，但是如果我在计时器结束之前移动鼠标，则会重置计时器。我添加了播放和暂停事件以及一个开源视频供您播放。您可以访问此文档链接以更好地理解。

HTMLMediaElement Mouse over event 这不是同一件事，但是有一个与您的用例相关的很好的例子

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>

在悬停变换后隐藏元素？

2 个答案:

我将向您展示一些示例，以便您可以从中获得一些想法

这是完整的代码