Делаем видео-заставку

Перейти вниз

Делаем видео-заставку

Сообщение автор Pyro338 в Чт Янв 11, 2018 4:17 pm

С появлением HTML5, помимо прочего, в инструментах разработчика, появился такой замечательный тэг, как "video". И например с помощью него можно без особого геморроя вставлять видео-вставки в свои игры. В базовом варианте заставка для игры может выглядеть например вот так:

Код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Video intro test</title>
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="bin/jquery.min.js"></script>
</head>
<body>
<video width="800" height="450" id="video">
  <source src="video/intro.mp4" type="video/mp4">
</video>
<script>
  var introWrapper = $('#video');
  var intro = introWrapper[0];
  introWrapper.show();
  intro.play();
  intro.addEventListener('ended', function () {
    console.log('пора бы запустить игру');
  }, false);
</script>
</body>
</html>

Давайте попробуем прикрутить это всё к Point JS. В HTML у нас будет что-нибудь наподобии

Код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My game</title>
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
  <div class="loading"></div>
</div>
<video width="800" height="450" id="video">
  <source src="video/intro.mp4" type="video/mp4">
</video>
<script type="text/javascript" src="bin/jquery.min.js"></script>
<script type="text/javascript" src="bin/point.min.js"></script>
<script type="text/javascript" src="bin/game.js"></script>
</body>
</html>

в CSS пока скроем наш контейнер с видео

Код:

video{
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}

ну и в game.js, в момент, когда нам нужно показать нашу заставку, вызываем

Код:

game.setLoop('intro');

var introWrapper = $('#video');//Наш DOM элемент
var intro = introWrapper[0];//Само видео

game.newLoopFromConstructor('intro', function(){
  this.entry = function(){
    introWrapper.show();//Показываем контейнер
    intro.play();//Запускаем видео
    intro.addEventListener('ended', function () {
      game.setLoop('myGame');//Добавляем слушатель события: если видео закончилось - запускаем игровой цикл
    }, false);
    soundState();//Ну это функция проверки настроек - включен ли звук. если надо - покажу что внутри
    if(musicOn != 1){//Если в настройках музыка выключена,
      intro.volume = 0;//делаем громкость ролика на ноль,
    }else{
      intro.volume = 1;//иначе делаем на всю
    }
  };
  this.update = function(){
    menuMusic.stop();//Если до этого играла музыка в меню, остановим ее
    if(key.isPress('SPACE') || key.isPress('ESC')){//Если нажали на пробел или Эскейп,
      intro.pause();//останавливаем ролик,
      introWrapper.hide()//скрываем его
      game.setLoop('myGame');//и запускаем игровой цикл
    }
  }
});

вы великолепны!
avatar
Pyro338
Админ

Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 33
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Делаем видео-заставку

Сообщение автор raingo в Чт Янв 11, 2018 6:21 pm

Пиро пишет:вы великолепны!
Наконец признал! Красава. Ты тоже не дурен.

А еще видеовставки можно юзать для рекламы типа. ХЗ только как.

raingo
Отдел прокрастинации

Сообщения : 756
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Делаем видео-заставку

Сообщение автор Pyro338 в Чт Янв 11, 2018 6:36 pm

Ты тоже не дурен.
это мягко сказано

А еще видеовставки можно юзать для рекламы типа. ХЗ только как.

ну ты можешь например в <source src="video/intro.mp4" type="video/mp4"> динамически отправлять видео то какое тебе надо и когда надо

avatar
Pyro338
Админ

Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 33
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Делаем видео-заставку

Сообщение автор Спонсируемый контент


Спонсируемый контент


Вернуться к началу Перейти вниз

Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения