CSS Flash video background?

Discussion in 'Web Design and Development' started by stevey500, Jan 9, 2009.

  1. stevey500 macrumors 6502

    Joined:
    Sep 8, 2004
    Location:
    Huntington, Utah
    #1
    I've searched, maybe not correctly. I never find exactly what I'm looking for, and I'm no flash genius but wish to be!

    I'm making a website for my photography and video, I want to put a video in the background of the website, is there a CSS code for applying .flv video as my fixed background ? If anyone can help me with that I would I appreciate a lot. I seen toyota's scion website and just felt "gosh, i really want to do that"..
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    You can't apply it as a true CSS background, by which I mean the background property. You can give the effect though using layers, which is controlled via the z-index property. The only thing I'm unsure of is if other HTML content will be visible when placed over a Flash object. It also may only work in some browsers while not others. You can give it a go though.

    The essential steps will be that the flash object will be positioned absolutely and given a z-index of 0. Then the content over it will be given a z-index of 1 or greater. Depending on everything happening on the page you'll likely have to mess with other CSS properties, but this is the basis.
     
  3. snickelfritz macrumors 65816

    snickelfritz

    Joined:
    Oct 24, 2003
    Location:
    Tucson AZ
    #3
    The entire site is built using a Flash liquid GUI.
    Scaling while preserving aspect ratio is the tricky part.
    width property is used to set the video to the width of the browser window, along with a variable to set the height property.

    The following AS3 code centers the video vertically and horizontally in the browser window, and scales it to fit the width of the window.
    Keep the rest of the site construction simple:
    no large gradients, alpha transparency, or anti-alised fonts. (use pixel fonts)

    PHP:
    import flash.display.StageScaleMode;
    import flash.display.StageAlign;
    import flash.events.Event;

    stage.scaleMode StageScaleMode.NO_SCALE;
    stage.align StageAlign.TOP_LEFT;
    stage.addEventListener(Event.RESIZEresizeHandler);

    function 
    resizeHandler(event:Event=null):void
    {
        var 
    sw:Number stage.stageWidth;
        var 
    sh:Number stage.stageHeight;
        var 
    _yScale:Number stage.stageWidth/video.width;

        
    video.0;
        
    video.= (sh 5) - (video.height .5);
        
    video.width sw;
        
    video.height video.height _yScale;
        
    }

    resizeHandler(null);
     
  4. snickelfritz macrumors 65816

    snickelfritz

    Joined:
    Oct 24, 2003
    Location:
    Tucson AZ
    #4
    BTW, use a custom AS3 video object, rather than a Flash component video player.
    Here's the complete code including the actionscript video player:
    Here's the result:http://www.byrographics.com/AS3/fullwidthVideo/index.html
    PHP:
    import flash.display.StageScaleMode;
    import flash.display.StageAlign;
    import flash.events.Event;

    stage.scaleMode StageScaleMode.NO_SCALE;
    stage.align StageAlign.TOP_LEFT;
    stage.addEventListener(Event.RESIZEresizeHandler);

    var 
    vid:Video = new Video(360240);
    vid_mc.addChild(vid);

    var 
    nc:NetConnection = new NetConnection();
    nc.connect(null);

    var 
    ns:NetStream = new NetStream(nc);
    ns.addEventListener(NetStatusEvent.NET_STATUSonStatusEvent);

    function 
    onStatusEvent(stat:Object):void
    {
        
    trace(stat.info.code);
    }

    var 
    meta:Object = new Object();
    meta.onMetaData = function(meta:Object)
    {
        
    trace(meta.duration);
    };

    ns.client meta;

    vid.attachNetStream(ns);
    ns.play("paul_forms.flv");

    function 
    resizeHandler(event:Event=null):void
    {
        var 
    sw:Number stage.stageWidth;
        var 
    sh:Number stage.stageHeight;
        var 
    _yScale:Number stage.stageWidth/vid_mc.width;

        
    vid_mc.0;
        
    vid_mc.0;//adjust this set the vertical center of the video.
        
    vid_mc.width sw;
        
    vid_mc.height vid_mc.height _yScale;
        
    }
    resizeHandler(null);


     
  5. grendal121 macrumors newbie

    Joined:
    Feb 17, 2009
    #5
    How would l loop this flv with this code

    Love this but was wondering how to loop the flv?

     
  6. dannyabel macrumors newbie

    Joined:
    Sep 11, 2009
    #6
    Hi snickelfritz --- i know you posted this awhile ago, but i just unearthed it and am trying desperately to get it to work.

    I have never used a custom netstream video player before, so I am running into problems on two separate fronts.

    First, when I just use the code you provide for the video player it plays the first moment of the audio of the flv file over and over again and displays the following output in repeating fashion:

    NetStream.Play.Start
    NetStream.Play.Start
    140.473
    140.473
    NetStream.Play.Start
    140.473
    NetStream.Play.Start
    140.473
    NetStream.Play.Start
    140.473
    NetStream.Play.Start
    140.473
    NetStream.Buffer.Empty
    NetStream.Buffer.Full
    NetStream.Play.Start
    140.473

    When I paste the second half of the code into the actions panel I receive an error saying that vid_mc is an undefined property. Am I supposed to create a new movie symbol and give it an instance name of vid_mc and then embed the first piece of code within this movie?

    If you could give me any guidance on either of these two issues it would be greatly appreciated. There is probably a very simple answer for both things --- I'm sorry in advance if my questions are completely idiotic.

    Cheers!


     
  7. snickelfritz macrumors 65816

    snickelfritz

    Joined:
    Oct 24, 2003
    Location:
    Tucson AZ
    #7
    vid_mc is the instance name of a MovieClip on the stage, IIRC.
    You can instantiate the movieclip dynamically in your code like this, immediately prior to instantiating vid:
    Code:
    var vid_mc:MovieClip = new MovieClip();
    addChild(vid_mc);
    
    var vid:Video = new Video(360, 240); 
    vid_mc.addChild(vid);
    
     

Share This Page