ФорумДелаем видео-заставку
Участников: 2
Страница 1 из 1
Делаем видео-заставку
автор Pyro338 Чт Янв 11, 2018 4:17 pm
С появлением HTML5, помимо прочего, в инструментах разработчика, появился такой замечательный тэг, как "video". И например с помощью него можно без особого геморроя вставлять видео-вставки в свои игры. В базовом варианте заставка для игры может выглядеть например вот так:
Давайте попробуем прикрутить это всё к Point JS. В HTML у нас будет что-нибудь наподобии
в CSS пока скроем наш контейнер с видео
ну и в game.js, в момент, когда нам нужно показать нашу заставку, вызываем
вы великолепны!
- Код:
<!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');//и запускаем игровой цикл
}
}
});
вы великолепны!
Pyro338- Админ
- Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 39
Откуда : Ставрополь -
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"> динамически отправлять видео то какое тебе надо и когда надо
Pyro338- Админ
- Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 39
Откуда : Ставрополь -
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения