LINUX.ORG.RU
Форум — Web-development  

Реклама в видео-контенте

 , , ,


0

1

У заказчика ограничен бюджет, хочет забацаць хостинг видео с предварительной рекламой (небольшой видеоролик), разумеется на лицензию готовых решений у него денег нет. Поэтому приходится извращаться самостоятельно.

Цель: перед каждым просмотром видео пускать видеоконтент с рекламой и чтобы в этот момент разумеется блокировались все элементы управления в плеере.
Можно ли подобное сделать в html5? Есть ли такие flash-плееры? Где нарыть готовые примеры? А то нигде ничего найти не могу :(
Есть одно решение, но оно весьма противоречивое. Пример: 

<video width="400" height="300" poster="1.jpg" autoplay=1>
<source src="ads.mp4" type='video/mp4; codecs="theora, vorbis"'>
<source src="1.mp4" type='video/mp4; codecs="theora, vorbis"'>
</vide>

Отсутствие controls убирает клавиши управления, autoplay=1 запускает автоматом. Но фигня в том, что контролс выключает вообще все элементы управления включая play и видео запустить невозможно, можно только автоплеем, а автоплей это не разу не тру

★★★★★

Можно, например, с помощью JS по событию окончания воспроизведения файла что нибудь выполнить, например изменить атрибуты <video>, добавив controls.

firestarter ★★★☆
()

video/mp4; codecs=«theora, vorbis

интересная комбинация

visual ★★★
()

Имхо, вот что мне надо: http://www.dejurka.ru/flash/11-html5-video-players/

А именно, например это:

VideoJS удивительный HTML5 видео плеер, с встроенным Javascript и CSS, что помогает детектировать кодеки. И исполняет резервную функцию поддержания Flash, если не поддерживается другое. Он использует новый элемент HTML — видео тег, который встроен в современных браузерах и JavaScript для добавления пользовательских элементов управления, новые функциональные возможности и исправляет ошибки кросс-браузера.

soko1 ★★★★★
() автор топика
Ответ на: комментарий от Quadmonster

У меня не воспроизвелось почему-то. Но по твоему описанию та ещё ржака)

soko1 ★★★★★
() автор топика

Накостыляй свою кнопку запуска через апи элемента.

Kalashnikov ★★★
()

Если вдруг кому интересно, то вот какой код написал:

<!DOCTYPE HTML>
<html>
<head>
<title>Пример видео с ads</title>
<link rel="stylesheet" href="theme/style.css" type="text/css" media="screen" />

<script type="text/javascript" src="jquery-1.7.2.min.js"></script> <!-- Load jquery -->
<script type="text/javascript" src="projekktor-1.2.30r272.min.js"></script> <!-- load projekktor -->
</head>
<body>

<!--
<div id="companionb" style="width:728px; height: 90px; margin: 5px; border: 1px solid #ccc">companion ad 790x90</div>
<div id="companionc" style="width:300px; height: 60px; margin: 5px; border: 1px solid #ccc">companion ad 300x60</div>
<div id="companiona" style="width:300px; height: 250px; margin: 5px; border: 1px solid #ccc; float: left;">companion ad 300x250</div> -->

<div id="player_a" syle="margin:0; float: right;" class="projekktor"></div>
<div style="clear: both;"></div>

<script type="text/javascript">
$(document).ready(function() {
//оставил на всякий случай
    function setCompanions() {
	$('#companionb').html('<img width="728" height="90" src="http://www.projekktor.com/content/demos/vast/imgadb.jpg">');
	$('#companionc').html('');
	$('#companiona').html('<img width="300" height="250" src="http://www.projekktor.com/content/demos/vast/imgad.jpg">');
	$('#companionb').click(function() {
	    window.location.href = 'http://www.google.com';
	})
	$('#companiona').click(function() {
	    window.location.href = 'http://www.google.com';
	})
    }    
    
    projekktor('#player_a', {
	debug: false,
	poster: 'media/intro.png',
	useYTIframeAPI: false, 
	width: 410,
	height: 267,
	controls: true,
	playlist: [
	    {
		0:{src:'media/1.mp4', type:"video/mp4"}, // рекламный ролик
		config: {
		    title: 'advertisement',
		    className: 'ad',
		    disallowSkip: true,
		    plugin_controlbar: {
			showOnStart: true,
			disableFade: true
		    },
		    plugin_display: {
			staticControls: false,
			displayPlayingClick: function() {
			    alert("Досмотрите ролик рекламодателя до конца!")
			}
		    }		    
		}
	    },
	    {
		0:{src:'media/2.mp4', type:"video/mp4"}, //основной видос
		config: {
		     className: 'postad',
		}
	    }
	]     
    }, function(player) {
	player.addListener('start', setCompanions)
    
    });
    
    
    
})
</script>

</body>
</html>

Вот сам плеер. Распаковывается, кидается туда эта хтмлка и в каталог media скидывается рекламный ролик и основной.

soko1 ★★★★★
() автор топика
Последнее исправление: soko1 (всего исправлений: 2)
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development