Using DIV tag as the player container Installation - Demo 4 / 5
Introduction
Most of our demos use anchor tag (A) as the player container. The reasoning for that has been described in the container section of the installation document. The use of anchor tag as the container is by no means nessessary and you can use any tag you want. Following example uses DIV tag.
Benefits of the DIV tag
It's sole purpose is to act as a container element. It can contain any other HTML tags inside it. The A tag, for example, is not designed to contain other A- tags inside it. In technical terms it is a block-level element.
Disadvantages of DIV tag
It does not natively support href- attribute, which Flowplayer uses as reference to the video file being played. However you can use href- attribute for DIV and everything will work perfectly in JavaScript enabled browsers but non-JavaScript browsers cannot understand the DIV/href combination and this breaks the rule of "progressive enhancement".
If you use href- attribute on the DIV the element is not a valid HTML markup and tools such as W3C validator will throw you an error.
Note: Remember to set height property for the DIV tag, otherwise your player won't be visible because by default the DIV tag's height is zero.
Installation
Here is the HTML setup for the demo. The DIV element need not be defined as a block element explicitly. The clip being played is not supplied in href attribute and is supplied as the third argument for the flowplayer function.
<!-- player container. display:block not needed-->
<div style="width:425px;height:300px;" id="player"></div>
<!-- this script block will install Flowplayer inside previous DIV tag -->
<script language="JavaScript">
flowplayer(
"player",
"http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf",
"http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
);
</script>