Сделать видео видимым в определенном регионе, используя только CSS - PullRequest
Новая
       6

Сделать видео видимым в определенном регионе, используя только CSS

0 голосов
/ 26 мая 2020

Изображение страницы

Я пытаюсь включить воспроизведение видео в .content в качестве фона всякий раз, когда кто-то наводит курсор на кнопку «go to the site» .. .

И основной способ, которым я пытаюсь это сделать (резюмируя), заключается в том, что для воспроизведения CSS видео я установил видео как {visibility: hidden;}

и когда вы наводите курсор на кнопку, он превращается в {visibility: visible;} ... Для воздействия на видео при наведении курсора я добавил "+" в одну из моих CSS областей, например #myBtn: hover +. bottomvideo {}

Однако видео не появляется даже при наведении курсора на кнопку ...

Более того, когда я пытался проверить, включив видео видимым, оно появилось в очень небольшое пространство и не покрыл всю область .content, как должно было быть, в соответствии с CSS Вот как видно видео ...

Более того, видео не l oop несмотря на l oop, упомянутый в теге видео ...

Мой код: * 101 9 * 

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 30, 60, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
  height: 30%;
}
.maincontent{
  position: absolute;
  top: 0;
  left: 20px;
}

.bottomvideo{
  z-index: -1;
  visibility: hidden;
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0;
}


/* Style the button used to pause/play the video */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  background: #000;
  color: #fff;
  cursor: pointer;
  height: 140px;
  position: fixed;
  right: 10%;
  bottom: 0;
  border: 5px rgba(0,56,56,0.8);

}

#myBtn:hover {
  background: #ddd;
  color: black;
}

#myBtn:hover + .bottomvideo {
  visibility: visible;
}

.ontop{
  background-color: rgba(255,255,260,0.5);
  position: fixed;
  top: 30%;
  left: 32%;
  color: powderblue;
}

.ontop::before{
  content: "high";
  font-size: 70px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="decription" content="Potternoses is Indore's Only Major Large-Scale Collection of PotterHeads...">
    <title>PotterNoses Indore</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <video autoplay muted loop id="myVideo">
      <source src="videos\openpagbackgnd.mp4#t=5,62" type="video/mp4">
    </video>
    <div class="ontop">

    </div>

<!-- Optional: some overlay text to describe the video -->
    <div class="content">
      <video autoplay muted loop class="bottomvideo">
        <source src="videos\videoplayback.mp4#t=57,86" type="video/mp4">
      </video>
      <div class="maincontent"><br>
        <p class="heading">Heading</p>
        <p class="Bottomcontent">Lorem ipsum...</p>
      </div>
      <button id="myBtn">Go to the Site</button>
    </div>
  </body>
</html>

Пожалуйста, не полагайтесь на результат сниппета, так как туда не загружено видео

Нужна помощь по всем трем проблемам ...

1 Ответ

0 голосов
/ 26 мая 2020

Мне было интересно, почему бы вам не попробовать воспроизвести видео с помощью какого-нибудь JQuery, если вы делаете вид, что показываете видео при наведении курсора мыши на видео, вы должны просто добавить следующий код на свое тело: 

<script>
$(document).ready(function () {

//This creates a figure with two functions for the video (Hover and Hide)
var figure = $("#myVideo").hover( hoverVideo, hideVideo ); 

//Here you tell to the functions what they will do.
function hoverVideo(e) { $('video', this).get(0).play(); }
function hideVideo(e) { $('video', this).get(0).pause(); }

});
</script>

Если вы хотите, чтобы он находился на кнопке наведения, это должно быть примерно так: 

<script>

$(document).ready(function () {

//You catch if the button is hover
 $("#myBtn").hover(function () {
        $(this).children("video")[0].play();
    }, function () {
        var video = $(this).children("video")[0];
        video.pause();
        video.currentTime = 0;
    });
});
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...