Borders on a FLV video

  • Soraia-99
  • Newbie
  • Newbie
  • Soraia-99
  • Posts: 6

Post 3+ Months Ago

Hi all,

I have created a FLV video using after effects. When I add the video into a web page using Dreamweaver, it comes out with a blank space on the top and bottom. Does anyone know how to get ride of that black space? Thanks

Regards

Soraia
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

Sounds like it is letter boxing it. Possible causes are After effects rendered the video with the letter boxing because the video was not the same size as the one you rendered. Its been a while since i played with AE.

Example: Your video is a is a 4:3 aspect ratio and you rendered a 16:9 (widescreen) 4:3 aspect ratio.

Or the player size created in dream weaver does not match the size of your video

Check the size of your video and the size of the player as well as try to play the FLV with an FLV player program instead of a webpage/dreamweaver
  • Soraia-99
  • Newbie
  • Newbie
  • Soraia-99
  • Posts: 6

Post 3+ Months Ago

Hi ScottG,

I have check the rendering options of AE and they are the same size as the created video (800x500). When I open the video by itself I can't see any white line anywhere. Can it be the dreamweaver code? Where can I look for it??

Regards

Soraia
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

in my version of dream weaver dragging the video into the the design mode brings up a box with in that box you can set the width and height of the player or click on the detect size button. I'm not sure if this will be the same for you or not.


But ii you click on the tab/button/link (depending on the version of dreamweaver) "Code" or "Split" and switch into the code view or Split view mode you should see some code that looks like

In both of the object tags there is a width and height variable make sure that matches your video size
HTML Code: [ Select ]
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="440" height="330" id="FLVPlayer">
  <param name="movie" value="FLVPlayer_Progressive.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="scale" value="noscale" />
  <param name="salign" value="lt" />
  <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=videoplayer_prt1/hancock-tsr2_h480p&amp;autoPlay=false&amp;autoRewind=false" />
  <param name="swfversion" value="8,0,0,0" />
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  <param name="expressinstall" value="Scripts/expressInstall.swf" />
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="440" height="330">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="scale" value="noscale" />
    <param name="salign" value="lt" />
    <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=videoplayer_prt1/hancock-tsr2_h480p&amp;autoPlay=false&amp;autoRewind=false" />
    <param name="swfversion" value="8,0,0,0" />
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<script type="text/javascript">
swfobject.registerObject("FLVPlayer");
</script>
 
  1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="440" height="330" id="FLVPlayer">
  2.   <param name="movie" value="FLVPlayer_Progressive.swf" />
  3.   <param name="quality" value="high" />
  4.   <param name="wmode" value="opaque" />
  5.   <param name="scale" value="noscale" />
  6.   <param name="salign" value="lt" />
  7.   <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=videoplayer_prt1/hancock-tsr2_h480p&amp;autoPlay=false&amp;autoRewind=false" />
  8.   <param name="swfversion" value="8,0,0,0" />
  9.   <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  10.   <param name="expressinstall" value="Scripts/expressInstall.swf" />
  11.   <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  12.   <!--[if !IE]>-->
  13.   <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="440" height="330">
  14.     <!--<![endif]-->
  15.     <param name="quality" value="high" />
  16.     <param name="wmode" value="opaque" />
  17.     <param name="scale" value="noscale" />
  18.     <param name="salign" value="lt" />
  19.     <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=videoplayer_prt1/hancock-tsr2_h480p&amp;autoPlay=false&amp;autoRewind=false" />
  20.     <param name="swfversion" value="8,0,0,0" />
  21.     <param name="expressinstall" value="Scripts/expressInstall.swf" />
  22.     <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
  23.     <div>
  24.       <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
  25.       <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
  26.     </div>
  27.     <!--[if !IE]>-->
  28.   </object>
  29.   <!--<![endif]-->
  30. </object>
  31. <script type="text/javascript">
  32. swfobject.registerObject("FLVPlayer");
  33. </script>
  34.  
  • Soraia-99
  • Newbie
  • Newbie
  • Soraia-99
  • Posts: 6

Post 3+ Months Ago

I ScottG,

I found it! it looks like when putting the video with Dreamweaver the size of the box box bigger than the 800x500 size of the video so the program was adding white border to make it to the size. Thanks a lot for you help.
Also, do you know how to remove the play menu from the video?? I only what to see the video when I enter to the webpage without play, stop.... menu.

Thanks

Soraia
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

With importing into dreamweaver there is no way to remove the controls.

It is doable but you either need to build your own Flash video player OR completely ditch flash and use other video formats and go with a HTML5 video player
  • Soraia-99
  • Newbie
  • Newbie
  • Soraia-99
  • Posts: 6

Post 3+ Months Ago

I have never used HTML5. Could you please help me??

Regards

Soraia
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

Here is something to get you started http://www.html5rocks.com/en/tutorials/video/basics/

But its a simple process they state that two different types of video are needed but in all of the test I've done I've gotten many platforms and browsers to work with a well formatted mp4 file

Mac safari
Mac chrome
Mac firefox with flash fallback

Ipod
Ipad
Iphone

Android

Win older IE with flash fall back
Win IE
Win Safari
Win chrome
Win firefox

HTML Code: [ Select ]
<video autoplay="autoplay" onclick="play(this);">
   <source src="SomeVideo.mp4" type='video/mp4'/>
   <div>
    This is a fallback add flash code here or and message to use another browser
    </div>
</video>
 
  1. <video autoplay="autoplay" onclick="play(this);">
  2.    <source src="SomeVideo.mp4" type='video/mp4'/>
  3.    <div>
  4.     This is a fallback add flash code here or and message to use another browser
  5.     </div>
  6. </video>
  7.  


Now some browsers (mobile) do not allow for auto play and since you wanting to hide the controls you could add some code to control it

JAVASCRIPT Code: [ Select ]
 
var play = function(element) {
    (element.paused) ? element.play() : element.paused();
};
 
 
  1.  
  2. var play = function(element) {
  3.     (element.paused) ? element.play() : element.paused();
  4. };
  5.  
  6.  


or something like that
  • Soraia-99
  • Newbie
  • Newbie
  • Soraia-99
  • Posts: 6

Post 3+ Months Ago

Thans a lot ScottG,

I will have a go and I'll let you know how it goes ;)

Thanks

Soraia
  • Soraia-99
  • Newbie
  • Newbie
  • Soraia-99
  • Posts: 6

Post 3+ Months Ago

Is this means that the video has to be mp4 or webm? Is it not possible with the format flv??

Soraia
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

With html5 yes it does if your using a flash fallback flash will play an Mp4

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 38 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.