Здравствуйте!
Есть такой чудесный медиаплеер под названием JW Player. Он появился в далеком 2005 году. Понятно, что за это время он претерпел значительные изменения. И чем же он хорош? А прежде всего тем, что позволяет обрабатывать события. Я покажу, как обрабатывать событие по времени при просмотре видео. Использовать такую обработку событий при просмотре видео удобно при различных презентациях.
Переходим к делу. Сначала я Вам покажу пример, как это все работает и к чему мы будем идти. Нажмите кнопку Play и следите за временем. На 10-й секунде появится картинка - кнопка с надписью "Получить подарок". У меня она никак не обрабатывается, но Вы можете повесить на нее, например, переход на другой сайт.
Работает JW Player
Необходимые материалы примера Вы можете скачать здесь
Адрес сайта разработчика: JW Player
Ну что, Вы все посмотрели, а сейчас я немного расскажу, как это делается.
Сразу скажу, что запустить пример просто на локальном компьютере не получится - JW Player обязательно должен находиться на сервере(можно и локальном - я так отлаживался).
Архив с примером Вы можете скачать по ссылке, которую я Вам дал. Последнюю версию JW Player Вы можете скачать на сайте разработчика. Только Вам придется взять в моем архиве файл jquery-1.7.2.min.js(если, конечно, он уже у Вас где-то не вызывается). Файл Readme.html нужно заменить(или взять из моего архива) следующим кодом.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About the JW Player 5</title>
<style type="text/css">
body { background-color: #fff; padding: 0 20px; color:#000; font: 13px/18px Arial, sans-serif; }
a { color: #360; }
h3 { padding-top: 20px; }
ol { margin:5px 0 15px 16px; padding:0; list-style-type:square; }
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<!-- START OF THE PLAYER EMBEDDING TO COPY-PASTE -->
<div id="mediaplayer">
Работает JW Player</div>
<script type="text/javascript" src="jwplayer.js">
</script>
<script type="text/javascript">
var timeShow = 10; // Время появления кнопки(секунды)
// переменная-функция появления кнопки
var buttonMinisite = function(){
$('#fb').fadeIn(500);
}
jwplayer("mediaplayer").setup({
flashplayer: "player.swf",
file: "Strip.mp4",
image: "JW_image.jpg",
width: 600,
height: 400,
// Код, вызывающий действие(показ кнопки) в определенный
// момент времени
events: {
onTime: function(event) {
if(event.position > timeShow && event.position < timeShow+1) {
buttonMinisite();
}
}
}
});
</script>
<!-- END OF THE PLAYER EMBEDDING -->
<form id="fb" action="" style="display: none;">
<input type="image" src="Button.png" />
</form>
<!-- Уничтожаю JW Player и следы его деятельности -->
<script type="text/javascript">
jwplayer("mediaplayer").remove();
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About the JW Player 5</title>
<style type="text/css">
body { background-color: #fff; padding: 0 20px; color:#000; font: 13px/18px Arial, sans-serif; }
a { color: #360; }
h3 { padding-top: 20px; }
ol { margin:5px 0 15px 16px; padding:0; list-style-type:square; }
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<!-- START OF THE PLAYER EMBEDDING TO COPY-PASTE -->
<div id="mediaplayer">
Работает JW Player</div>
<script type="text/javascript" src="jwplayer.js">
</script>
<script type="text/javascript">
var timeShow = 10; // Время появления кнопки(секунды)
// переменная-функция появления кнопки
var buttonMinisite = function(){
$('#fb').fadeIn(500);
}
jwplayer("mediaplayer").setup({
flashplayer: "player.swf",
file: "Strip.mp4",
image: "JW_image.jpg",
width: 600,
height: 400,
// Код, вызывающий действие(показ кнопки) в определенный
// момент времени
events: {
onTime: function(event) {
if(event.position > timeShow && event.position < timeShow+1) {
buttonMinisite();
}
}
}
});
</script>
<!-- END OF THE PLAYER EMBEDDING -->
<form id="fb" action="" style="display: none;">
<input type="image" src="Button.png" />
</form>
<!-- Уничтожаю JW Player и следы его деятельности -->
<script type="text/javascript">
jwplayer("mediaplayer").remove();
</script>
</body>
</html>
Расскажу немного о некоторых параметрах.
timeShow - время, через которое появляется кнопка(в секундах)
buttonMinisite - переменная-функция появления кнопки. Здесь #fb - код вызываемой формы, а fadeIn(500) - время прорисовки кнопки(у меня это полсекунды).
file: - наименование проигрываемого ролика
Роликов может быть несколько, можно сделать плейлист - это Вы можете посмотреть на сайте разработчика.
image: - заставка ролика(необязательный параметр)
width: - ширина видео
height: - высота видео
Button.png - изображение нашей кнопки в форме
P.S. При желании можно сделать так, чтобы кнопка не появлялась, а наоборот пропадала во время просмотра видео. Только в этом я не вижу большого смысла, поэтому рассказывать об этом не буду.
Удачи!
