To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.


(Flex) Flex (2011 год)

Реклама в видеоплеере (возможности объектного программирования ActionScript).

Cуществует множество способов наложить рекламу на видео. Например создать на уровне HTML абсолютно-позицонированный DIV, который будет располагаться перед видеоплеером - и крутить рекламу в нем. Или создать собственно медиапоток FLV уже с рекламой - например как я описывал в заметке Опыт видео-конвертации.

Но на этой страничке бы я хотел дать небольшой урок обьектного программирования на ActionScript 3. Для этого я возьму мой TextBannerRotator - простой ротатор текстовых баннеров с эффектом BLUR и прокручу этим же баннерным ротатором рекламу не просто на страничке, а внутри флексового ВидеоПлеера.

Когда мой баннерный ротатор (extends Sprite) запускается средой на html-страничке или в AIR-приложении, то среда командой super создает экземпляр класса TextBannerRotator, вызывается конструктор класса (метод с тем же именем, что и метод класса) - в этом методе среда уже есть экземпляр обьекта stage (сцены). И на этой сцене начинает проигрываться реклама.

А чтобы вызвать мой баннерный ротатор внутри видео-плеера, нужно самому создать экземпляр баннерного ротатора TextBannerRotator и передать экземпляру ссылку на сцену видеоплеера. Для этого придется создать новый класс TextBannerRotator1 (extends TextBannerRotator) и переопределить в нем функцию InitBannerRotator (override), которая получит ссылку на сцену не из среды запуска обьекта унаследованного от Sprite (extends Sprite), а на сцену среды запуска Flex-приложения (на ту сцену, в которой работает VideoPlayer). И самому командой super в производном классе создать экземпляр базового класса.

Бытовые слова получаются очень путаными и каждому разговорному слову можно придать любую смысловую нагрузку, лучше взгляните на код ActionScript 3.0 - изложенная выше простая мысль сформулирована в недвусмысленных языковых конструкциях:


   1:  package
   2:  {
   3:      public class TextBannerRotator1 extends TextBannerRotator
   4:      {
   5:          private var Container1:Object;
   6:          
   7:          function TextBannerRotator1(container1:Object):void
   8:          {
   9:              Container1=container1;
  10:              super();
  11:          }
  12:          
  13:          protected override function InitBannerRotator():void
  14:          {
  15:              PrepareStage(Container1);
  16:          }
  17:      }
  18:  }

И вот как выглядит Flex-код плеера с передачей ссылки на сцену:


   1:  <?xml version="1.0" encoding="utf-8"?>
   2:  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
   3:                 xmlns:s="library://ns.adobe.com/flex/spark" 
   4:                 xmlns:mx="library://ns.adobe.com/flex/mx"  applicationComplete="application1_applicationCompleteHandler(event)" minWidth="500" minHeight="300">
   5:      <fx:Script>
   6:          <![CDATA[
   7:              import mx.events.FlexEvent;
   8:              import mx.events.ResizeEvent;
   9:   
  10:              private var timer:Timer;
  11:              private var textBannerRotator:TextBannerRotator1;
  12:              private var title:TextField;
  13:              protected function application1_applicationCompleteHandler(event:FlexEvent):void
  14:              {
  15:                  textBannerRotator=new TextBannerRotator1(stage);
  16:                  textBannerRotator.width=this.width;
  17:                  
  18:                  stage.addChild(textBannerRotator);
  19:                  textBannerRotator.x=100;
  20:                  textBannerRotator.y=100;
  21:                  title=new TextField();
  22:                  title.text="Мой любимый идиот";
  23:                  var TitleFormat:TextFormat= new TextFormat()
  24:                  TitleFormat.size=30;
  25:                  TitleFormat.color=0xFFFFFF;
  26:                  title.setTextFormat(TitleFormat);
  27:                  stage.addChild(title);
  28:                  title.x=250;
  29:                  title.y=this.height-70;
  30:                  title.height=50;
  31:                  title.width=this.width;
  32:                  title.mouseEnabled=false;
  33:                  //это код для довавления простого логотипа
  34:                  //Canvas1.addChild(title);
  35:                  //LogoImage1.width=this.width;
  36:                  //LogoImage1.height=this.height;
  37:                  Player1.minWidth=this.width;
  38:                  Player1.minHeight=this.height;
  39:                  Player1.play();
  40:                  Player1.addEventListener(ResizeEvent.RESIZE, Player1_resizeHandler);
  41:                  timer=new Timer(3000,1);
  42:                  timer.addEventListener(TimerEvent.TIMER_COMPLETE, completeHandler);
  43:                  timer.start();
  44:              }
  45:   
  46:              private function completeHandler(e:TimerEvent):void {
  47:                  //это для прокрутки рекламы перед роликом
  48:                  //LogoImage1.width=50;
  49:                  //LogoImage1.height=50;
  50:                  //Player1.play();    
  51:              }
  52:              protected function Player1_resizeHandler(event:ResizeEvent):void
  53:              {
  54:                  textBannerRotator.WIDTH=Player1.width;
  55:                  title.x=250;
  56:                  title.y=this.height-70;
  57:                  title.width=this.width;
  58:              }
  59:          ]]>
  60:      </fx:Script>
  61:      <fx:Declarations>
  62:          <!-- Place non-visual elements (e.g., services, value objects) here -->
  63:      </fx:Declarations>    
  64:              
  65:              <s:VideoPlayer width="100%" height="100%" autoPlay="false"  
  66:              id="Player1" source="http://asp-net.ru/flex6/mer.flv" loop="true" scaleMode="stretch"  x="0" y="0"/>
  67:      
  68:              <mx:Canvas  width="100%" height="100%"  id="Canvas1" x="0" y="0">    
  69:              <!--<mx:Image x="10" y="10" id="LogoImage1" source="votpusk.gif" width="50" height="50"/>-->    
  70:              </mx:Canvas>
  71:      
  72:  </s:Application>

Как видите, хотя ActionScript конечно же далеко не бейсик (и не имеет наверное и 10% от обьектных возможностей бейсика - Практическое применение наследования, полиморфизма, интерфейсов, дженериков и делегатов на примерах в Visual Basic .NET) - но все ж таки кое-какие обьектные возможности в ActionScript имеются. И пользоваться ими полезно и приятно.

Еще один впечатляющий пример обьектного программирования на ActionScript вы можете посмотреть на этой страничке - Сокеты во Flash.


Если вас интересует детальная работа с видео, работа с каждым из видеопотоков: Camera Live Video, OnDemand HTTP Dynamic Streaming, Live HTTP Dynamic Streaming, RTMP Stream from the Flash Media Server, работа через NetStream в режиме прогресивного и потокового видео, RTMFP peer-to-peer - то почти все базовые сведения, чтобы двигаться дальше, я описал в этой заметке - Видео-камеры, видео-чаты и Flash-медиасервера (работающие по RTMP и самописным протоколам).

А вообще, видео - это активно развивающаяся техногия и у Adobe надавно появилась и совсем новая технология - "on-demand and live adaptive bitrate video streaming of standards-based MP4 media over regular HTTP connections" - все конечно невозможно охватить в рамках одной заметки. К тому же (хотя и достаточно долго работаю с видео вообще - Опыт видео-конвертации), но в тонкие детали технологий компании Adobe я пока только вникаю (менее года). И возможно, существуют лучшие варианты решений, чем те, что я нащупал и описываю в своих заметках.



Comments ( )
Link to this page: //www.vb-net.com/FlexVideoPlayer/index.htm
< THANKS ME>