Это слишком знакомое явление. Вы нажимаете на ссылку, чтобы посмотреть видео, и вместо этого вам необходимо просмотреть 15-секундное объявление, прежде чем оно будет воспроизведено. Хотя это крайний пример воспроизведения видеопоследовательности, техника точно такая же.
В этой статье я покажу вам способ воспроизведения последовательного видео через видеообъект и через компонент FLVPlayback во Flash.
Чтобы начать, я включил 3 телевизионных объявления (формат FLV) с первых дней телевидения. Эти рекламные объявления из архива Прелингера имеют продолжительность около 1 минуты и будут воспроизводиться одна за другой. Скачайте файлы и начнем:
Шаг 1: Новый документ
Откройте новый документ Flash ActionScript 3.0. Когда файл откроется, добавьте новый слой и назовите его «actions». Заблокируйте слой «действия».
Шаг 2: Видеообъект
Добавьте видеообъект в библиотеку. Теперь выберите «Новое видео» из всплывающего меню «Библиотека». Когда откроется диалоговое окно «Свойства видео», убедитесь, что выбрано «Видео (с помощью ActionScript)», и нажмите «ОК». Когда диалоговое окно закроется, вы увидите видео объект (он выглядит как видеокамера) в библиотеке.
Шаг 3: Добавить на сцену
Добавьте видеообъект на сцену, затем, выбрав видеообъект, перейдите на вкладку свойств и установите размер объекта: 320 пикселей в ширину и 240 пикселей в высоту. Кроме того, в свойстве Inspector присвойте выбранному видеообъекту имя экземпляра «myVideo».
Прежде чем мы перейдем к коду, давайте немного подумаем над тем, что нужно сделать. Во-первых, есть три FLV-файла, которые будут воспроизводиться через видеообъект (myVideo) на сцене. Так или иначе, Flash нужно будет узнать, какие видео будут воспроизводиться и в каком порядке.
Следующая вещь, которую Flash должен сделать, это настроить следующий видеоролик в очереди. Это говорит о том, что вам нужно следить за тем, сколько времени осталось в воспроизводимом в данный момент видео. Когда он достигнет конца или приблизится к нему, вам нужно будет убрать его из потока, поставить в очередь следующий в очереди и заставить его играть.
Вот как это сделать:
Шаг 4: ActionScript
Добавьте следующий код ActionScript:
|
1
2
3
4
5
6
|
import flash.events.NetStatusEvent;
var videos:Array = new Array(«Ad01.flv», «Ad02.flv», «Ad03.flv»);
var currentVideo:uint = 0;
var duration:uint = 0;
var ready:Boolean = true;
|
Ключ ко всему этому упражнению — ожидание окончания одного видео, а затем выстраивание следующего для воспроизведения. Подобные вещи связаны с событием, которое вызывается видео, которое в данный момент воспроизводится в NetStream. Именно в этой первой строке кода мы импортируем класс NetStatusEvent из пакета import flash.events .
Следующая строка кода выбрасывает FLV-файлы для воспроизведения в список. Помните, что порядок видео в этом списке будет соответствовать порядку их воспроизведения.
Пока мы находимся на предмете списка: «Да, это можно сделать с помощью XML-документа вместо жесткого подключения видео в SWF». В этом примере у нас всего три видео, поэтому управлять ими с помощью внешнего XML-документа действительно не нужно. Если XML-документ имеет решающее значение, это те ситуации, когда новые ролики постоянно чередуются по очереди или когда целая серия видеороликов, скажем, 10 для аргумента, должна воспроизводиться в определенном порядке.
Следующие две строки используют класс uint, чтобы убедиться, что мы всегда имеем дело с положительным числом при обращении к видео в списке или продолжительности его продолжительности.
Последняя строка устанавливает для логической переменной значение true . Мы будем использовать это очень скоро.
Шаг 5: больше ActionScript
Введите следующий код ActionScript:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
myVideo.attachNetStream(ns);
ns.play(videos[currentVideo]);
var listener:Object = new Object();
listener.onMetaData = function(evt:Object):void {
duration = evt.duration;
ready = true;
};
ns.client = listener;
|
Это стандартный код, используемый для воспроизведения видео через видеообъект. Первые две строки устанавливают NetConnection, а нулевой параметр во второй строке указывает Flash, что эти видео будут воспроизводиться с использованием прогрессивной загрузки, а не с потоковой передачей через Flash Media Server.
Следующий блок кода создает объект NetStream и передает ему параметр NetConnection — nc. Оттуда NetStream подается в видеообъект с именем myVideo, а Flash через метод play () сообщается, какое видео воспроизводить в видеообъекте.
Единственная функция слушателя — сбросить значение готовности на true . Погоди, разве мы не сделали это с переменной в строке 5? Да, мы сделали, но следующий блок кода делает причину этого сброса намного яснее.
Шаг 6: Слушай
Введите следующий код ActionScript:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
ns.addEventListener(NetStatusEvent.NET_STATUS,nsHandler );
function nsHandler(evt:NetStatusEvent):void {
if (ready && ns.time > 0 && ns.time >= (duration — 0.5)) {
ready = false;
currentVideo++;
if (currentVideo < videos.length) {
ns.play(videos[currentVideo]);
} else {
ns.removeEventListener(NetStatusEvent.NET_STATUS, nsHandler
);
}
}
};
|
Мы начинаем с использования слушателя, чтобы сказать Flash, чтобы он следил за тем, что происходит во время воспроизведения FLV. Flash ожидает NetStatusEvent, и эти события обычно отправляются всякий раз, когда видео выполняет что-то вроде запуска, остановки и т. Д. Всякий раз, когда это происходит, запускается функция nsHandler .
Функция nsHandler — вот где магия происходит в этом проекте. NetStatusEvent постоянно работает, и одной из проверяемых вещей является текущее время в видео. Каждое видео в этом проекте длится около 60 секунд. В этом случае мы хотим быть уверены, что текущее время где-то между 0 и 60 секундами. Если это так, функция игнорируется … вроде.
Помните эту готовую переменную в обработчике метаданных? Событие NET_STATUS происходит намного больше, чем когда достигнут конец видео. Готовая переменная гарантирует, что функция делает свое дело только один раз. Если этого не произойдет, есть хороший шанс, что он будет постоянно переходить к следующему видео в очереди, потому что оба условия выполняются. Это было бы не очень хорошо, поэтому, когда первые три условия — готовность, текущее время больше 0 и больше или равно длительности видео — встречаются, значение готовности устанавливается в false . Благодаря значению обработчика onMetadata значение готовности становится равным true , только при загрузке следующего видео.
Таким образом, баланс блока кода начинает фокусироваться. Если текущее время в потоке находится где-то между 59,5 и 60 секундами, видео, которое воспроизводится в данный момент, игнорируется — ready = false — и следующее видео в списке — currentVideo ++ — попадает в очередь. Конечно, прежде чем он начнет играть, он должен доказать, что он принадлежит линейке. Это делается путем проверки его положения в массиве — currentVideo <videos.length — и, если его личность проходит проверку, добавляется в поток и воспроизводится.
Шаг 7: сохранить и проверить
Сохраните фильм в папку загрузки, содержащую FLV и протестируйте фильм.
Привет! Как насчет компонента FLVPlayback?
Рад, что ты спросил. Вот как сделать то же самое, используя компонент FLVPlayback:
Шаг 8: Новый документ
Откройте новый документ Flash ActionScript 3.0. Когда документ откроется, добавьте новый слой на шкалу времени и назовите этот слой «действия». Заблокируйте слой действий.
Шаг 9: Компонент FLVPlayback
Добавьте компонент FLVPlayback на сцену.
Шаг 10: измени размер компонента
Откройте панели «Свойства» и установите его размеры 320 на 240. Затем присвойте компоненту имя экземпляра myVideo . Обычно вы не изменяете размер компонента вручную, потому что размер компонента соответствует размеру видео, если он выбран в Инспекторе компонентов. В нашем случае все будет зависеть от ActionScript, поэтому вам нужно это сделать.
Шаг 11: добавь скин
Это можно сделать, выбрав компонент на сцене и перейдя в «Окно»> «Инспектор компонентов».
Шаг 12: ActionScript
Добавьте следующий код ActionScript:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
var videos:Array = new Array(«Ad01.flv», «Ad02.flv»,»Ad03.flv»);
var currentVideo:uint = 0;
myVideo.mouseChildren = false;
function playCurrentVideo():void {
myVideo.source = videos[currentVideo];
myVideo.play();
}
playCurrentVideo();
myVideo.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(evt:Event):void {
currentVideo++;
if (currentVideo > 0) {
myVideo.mouseChildren = true;
}
if (currentVideo < videos.length) {
playCurrentVideo();
}
}
|
Мы начнем с создания массива и использования переменной currentVideo, чтобы отслеживать, какое видео в списке воспроизводится.
Третья строка необязательна, но отвечает «Как они это делают?» вопрос, который мне часто задают Заметили ли вы, как, когда вы попали на сайт, где видео заключено в скобки с рекламой, вы не можете получить контроль, чтобы пропустить рекламу? Эта линия, как это делается. Он просто отключает все кнопки в скине компонента.
Первая функция — playCurrentVideo () — сохраняет текущее свойство source экземпляра компонента и воспроизводит видео.
CompleteHandler () выглядит странно знакомым. В случае с компонентом FLVPlayback нет событий NET_STATUS, о которых следует беспокоиться. Единственное событие, которое нужно посмотреть, это событие COMPLETE, которое запускается, когда компонент достигает конца видео. Когда это событие обнаружено, следующее видео в массиве возвращается в очередь, и элементы управления воспроизведением размораживаются. Это происходит только в том случае, если видео может доказать, что оно является членом массива и еще не было воспроизведено.
Шаг 13: сохранить и проверить
Сохраните проект в той же папке, что и FLV, и протестируйте фильм.
Вывод:
В этом уроке я показал вам, как воспроизводить последовательность видео, используя либо видеообъект из библиотеки, либо компонент FLVPlayback. Теперь вы понимаете, как создать список воспроизведения и настроить его воспроизведение в установленном порядке. Вы также видели, как отключить элементы управления на обложке компонента, чтобы пользователи не могли изменять громкость, пропускать видео или даже приостанавливать первое видео в очереди.
Я надеюсь, что вы нашли это полезным, спасибо за чтение.