Float chat

Форум

1 ответ(ов) в теме
Admin
не в сети 8 часов
На сайте с 13.01.2015
149
Титул: Просвещённый
49%

10 тем на форуме

Достижение получено 02.06.2018

Рейтинг: 10

Баланс: 10

+10 рейтинга и 10 руб. за 10 тем на форуме

10 комментариев

Достижение получено 16.05.2018

Рейтинг: 20

Баланс: 20

+20 рейтинга и 20 руб. за 10 комментариев на сайте

50 ответов на форуме

Достижение получено 08.04.2018

Рейтинг: 20

Баланс: 20

+20 рейтинга и 20 руб. за 50 ответов на форуме
Тем 56
Сообщения 72

Объявление 

1
22:06

Видео в Интернет уже давно обрело большую популярность. Благодаря возросшей скорости соединения, вес передаваемых данных не имеет такого значения, как раньше. И это открывает великолепные возможности для самых эффективных рекламных компаний. Видеобаннер для сайта - это яркая интерактивная реклама, которая привлечёт клиентов для вашего бизнеса!

Основные задачи, которые выполняет видеобаннер:

Привлекает внимание;
Заинтересовывает товаром или услугой;
Подталкивает к переходу на сайт;
Побуждает к покупке товара или услуги.

Посмотреть пример можно здесь...

Стили - css:

Спойлер
#karcas {
	width: 200px;
    height: 300px;
    background-color: #130143;
	background-image: url(http://фоновое-изображение.jpg); // заливаем фон баннера
    border: #000000 2px solid;
    border-radius: 3px;
	}     
#video1 {
	width: 196px;
    border: #d1d0d0 2px solid;
    }
#trg-v-banner__controls-wrap {
    position: relative;
    bottom: 18px;
    text-align: left;
	}
#video1-play {
	background-color: #ffffff00;
    position: absolute;	
    bottom: -15px;
    left: 6;
    cursor: pointer;
    color: #ededed;
    border: none;
    outline: none; // удаляем обводку в браузерах
	}
#video1-mute {
	background-color: #ffffff00;
    position: absolute;
    bottom: -15px;
    right: 6;
    cursor: pointer;
    color: #ededed;
    border: none;
    outline: none; // удаляем обводку в браузерах
	}
#video1-current {
	background-color: #ffffff00;
    position: absolute;
    bottom: -16px;
    right: 105;
    cursor: pointer;
    color: #ededed;
	font-size: 13px;
	}
#video1-duration {
	background-color: #ffffff00;
    position: absolute;
    bottom: -16px;
    left: 105;
    cursor: pointer;
    color: #ededed;
	font-size: 13px;
	}

Вывод баннера - html:

Спойлер
<div id='karcas'>
	<video id='video1' src="http://ваше-рекламное-видео.mp4" loop></video>
	<div id="trg-v-banner__controls-wrap">
			<input type="button" id="video1-play" value="Play" />
			<input type="button" id="video1-mute" value="Mute" />
			<span id="video1-current">00:00</span>
			<span id="video1-duration">00:00</span>
	</div>
	<a href="https://ваша-рекламная-ссылка/" target="_blank"><div style="width: 200px; height: 185px;"></div></a>	
</div>

Если нужно вывести баннер через iframe:

Спойлер
<iframe src="http://ссылка-на-страницу-с-баннером.html" scrolling="no" width="205px" height="305" marginwidth="0" marginheight="0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Код на JavaScript:

Спойлер
<script>
// Обертываем код в функцию для защиты пространства имен
(function() {
// Find the DOM objects
var  video = document.getElementById("video1"),
  playBtn = document.getElementById("video1-play"),
  muteBtn = document.getElementById("video1-mute"),
  current = document.getElementById("video1-current"),
duration = document.getElementById("video1-duration");

// Переключаем состояние "старт/пауза"
playBtn.addEventListener("click", function() {
  if (video.paused || video.ended) {
    video.play();
    playBtn.value = "Pause";
  } else {
    video.pause();
    playBtn.value = "Play";
  }
}, false);

// Переключаем состояние "звук включен/выключен"
muteBtn.addEventListener("click", function() {
  if (video.muted) {
    video.muted = false;
    muteBtn.value = "Mute";
  } else {
    video.muted = true;
    muteBtn.value = "Unmute";
  }
}, false);

// Показываем длительность, когда это становится возможным
video.addEventListener("loadedmetadata", function() {
  duration.innerHTML = formatTime(video.duration);
}, false);

// Обновляем текущее время
video.addEventListener("timeupdate", function() {
  current.innerHTML = formatTime(video.currentTime);
}, false);

function formatTime(time) {
  var
    minutes = Math.floor(time / 60) % 60,
    seconds = Math.floor(time % 60);

  return   (minutes < 10 ? '0' + minutes : minutes) + ':' +
           (seconds < 10 ? '0' + seconds : seconds);
}

})();
</script>

0
Если возникли сложности, или есть вопросы - не стесняйтесь обращаться в приватный чат.
Вы не имеете права на публикацию сообщений в этой теме
Авторизация
*
*
Регистрация
*
*
*
Пароль не введен
Генерация пароля