возникающее окно с видео в браузере

Я разрабатываю веб-страницу и есть просьба, которая у меня есть со стороны клиента и не очень хорошо, как осуществлять ее.

Моя идея состоит, в том, чтобы сразу после того как входит в index, появилось видео в возникающем окне (рекламе), и в том, чтобы, когда это видео закончится, окно исчезло.

Есть какой-то способ это делать? и контролирования, когда он заканчивает видео?

Идея была бы через рукописный шрифт языка сценариев JavaScript, но мне это не совсем ясно.

Спасибо.

Я ИЗДАЮ:

С уже почти этой помощью Хорди Флореса:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#myVideo {
  display: none;
}
</style>

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="http://fancyapps.com/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>



<script type="text/javascript">
$(document).ready(function() 
        {
$("#openVideo").fancybox({
 'closeBtn':false,
 'openEffect': 'fade',
 helpers   : { 
overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox 
}
});

//simulamos click y abrimos fancybox
$("#openVideo").eq(0).trigger("click");

//forzamos play
document.getElementById('myvideo').play();      
});

document.getElementById('myvideo').addEventListener('ended',myHandler, false);
function myHandler(e) {
console.log("el video se ha acabado!!")
$.fancybox.close();
}

</script>


</head>
<body>




<!--Boton para abrir video, solo para test  -->
<a href="#myVideo" id="openVideo">open video</a>

<div id="myVideo" >
   <div id="videoWrapper">
      <video id="myvideo" autoplay>
           <source src="008.mp4" type="video/mp4">
            Your browser does not support html5 videos
      </video>
   </div>
</div>





</body>
</html>

Хотя сейчас видео не закрывается, и если я помещаю один, помещенный в моем персональном компьютере, он это не воспроизводит.

3
задан 27.10.2016, 17:46
3 ответа

AquГ - ты можешь видеть полный пример:

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

$(document).ready(function() 
                  {
		 $("#openVideo").fancybox({
           'closeBtn':false,
           'openEffect': 'fade',
           helpers   : { 
   overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox 
  }
         });
        
        //simulamos click y abrimos fancybox
        $("#openVideo").eq(0).trigger("click");
  
        //forzamos play
        document.getElementById('myvideo').play();      
	});

document.getElementById('myvideo').addEventListener('ended',myHandler, false);
    function myHandler(e) {
     console.log("el video se ha acabado!!")
     $.fancybox.close();
    }
#myVideo {
  display: none;
}
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="http://fancyapps.com/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


<!--Boton para abrir video, solo para test  -->
<a href="#myVideo" id="openVideo">open video</a>

<div id="myVideo" >
   <div id="videoWrapper">
      <video id="myvideo" autoplay>
           <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
           <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
            Your browser does not support html5 videos
      </video>
   </div>
</div>
3
ответ дан 24.11.2019, 12:53
  • 1
    Видеть snippet на полном экране, чтобы мочь видеть контроль видео –  Jordi Flores 27.10.2016, 17:14
  • 2
    Хорди это гениален, но вопрос, какой-то способ есть, что видео открылось автоматически и работало? не давая видео ни play ни open? –  Sergio Cv 27.10.2016, 17:16
  • 3
    Если @SergioCv в принципе помещая property autoplay в tag видео, я думаю, что в моем примере оно не функционирует, потому что est и # 225; грузя streaming, но позволь мне смотреть это. S и # 233; что функционирует, потому что это у меня есть функционируя autoplay в другом aplicaci и # 243; n. –  Jordi Flores 27.10.2016, 17:27
  • 4
    Я только что обновил код, сейчас открывается автоматически fancybox и размножается видео. @SergioCv –  Jordi Flores 27.10.2016, 17:35
  • 5
    функционируй в тысячу чудес извини, единственная проблема, которая не закрывается, закончив оживление –  Sergio Cv 27.10.2016, 17:41

Я нашел несколько ответов, которые возможно, что они подают тебя, совсем с и я попробовал это разработать лучшее, что я смог, но не закончил оставлять это "красивым". Я надеюсь, что кто-то это издает, или когда я прибуду в дом это harГ© с лучшего компьютера.

, Чтобы создавать PopUp
Первый Пример в†ђStackOverflow InglГ©s
Второй Пример

Para вводить видео с Html5
w3Schools с примерами

.box {
  width: 20%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: visible;
  opacity: 1;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 999;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}
.popup {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  /* Animación que durará 2 segundos*/
  -webkit-animation: autopopup 2s;
  -moz-animation: autopopup 2s;
  animation: autopopup 2s;
}
.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: orange;
}
.popup .content {
  position: relative;
  margin: 7% auto;
  padding: 30px 50px;
  background-color: #fafafa;
  color: #333;
  border-radius: 3px;
  width: 50%;
}
a.popup-cerrar {
  position: absolute;
  top: 3px;
  right: 3px;
  background-color: #333;
  padding: 7px 10px;
  font-size: 20px;
  text-decoration: none;
  line-height: 1;
  color: #fff;
}
to {
  opacity: 1;
}
}
@keyframes autopopup {
  from {
    opacity: 0;
    margin-top: -200px;
  }
  to {
    opacity: 1;
  }
}
<html>

<body>
  <div class="popup1" class="overlay">
    <div class="popup">
      <video width="320" height="240" controls>
        <a class="close" href="#popup1">X</a>
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
          Your browser does not support the video tag.
      </video>
    </div>
  </div>


</body>

</html>
2
ответ дан 24.11.2019, 12:53
  • 1
    @rnd я не знаю, если ты реализовал downvote, но если он был из-за факта s и # 243; это, - соединения, уже не эксперт и # 237;;) –  Miquel Coll 28.10.2016, 13:10

В событии OnLoad index ты должен открывать страницу (window.open();), в которой estГ© видео и depuГ©s воспроизводить

var video = document.getElementById("video");   
video.load();
video.play(); 

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

video.addEventListener('ended',myHandler,false);
    function myHandler(e) {
        window.close();
    }
1
ответ дан 24.11.2019, 12:53

Теги

Похожие вопросы