视频正成为互联网上越来越重要的元素，国外的YouTube，国内的土豆，优酷，6间房发展的都是红红火火。 如何给自己的网站上加上视频功能了，flowplayer提供了一个十分简便的方式，flowplayer的宣传口号就是做自己的Youtube。 flowplayer是一个flash播放器，支持播放flv,mp4,swf,jpg等格式，并且提供了比较多的播放界面选项。 如何给视频加上广告呢？比如在视频的开始和结束加上图片或者flash的广告，在视频的播放中加上一个半透明的flash等。 可以考虑的有两种方式。一种是通过网页上的内容重叠，即在视频播放器上面悬浮一个图层，控制图层的显隐来加入广告。第二种是利用flowplayer的播放列表功能。 先说第一种，要保证广告的位置，可以将播放器和作为广告的flash，和作为广告的图片，flash放入一个固定大小相对定位的div中。 因为广告的大小一般比视频播放界面要小，对广告文件采用绝对定位的方式，能够精准的控制位置。通过css滤镜可以实现flahs和图片文件的半透明效果。 控制时间的过程如下 单击播放按钮，调用begin()函数，其中隐藏播放按钮和视频截图，并开始显示视频引导广告，setTimeout定时3~5s后隐藏引导广告并播放视频， 视频播放开始将触发onPlay()事件。在事件句柄函数中播放半透明的伴随广告，伴随广告可以加上关闭按钮供用户选择关闭。 视频结束后触发onClipDone事件。在此事件句柄中，隐藏伴随广告并播放回音广告。回音广告结束后，显示重播按钮以及需要的图片，如视频推荐列表等。 这种方式需要注意一些地方，因为其中有多个图层，需要定义好z-index，避免链接的混乱。因为广告等独立于视频播放器，比较难于做更多的控制。 第二种方式是播放列表。 playList:[ {name: 'guild_ad', url:'/image/myself32.jpg',duration:3,overlay:'/image/redheart.jpg'}, {name: 'main_video', url: '/upload/forum_video/14/14934.flv'}, {name: 'echo_ad', url:'/flash/2465362_22_163006.jpg',linkUrl:'http://www.sohu.com',linkWindow:'_blank',duration:50}, ] 可以将引导广告，视频，以及回音广告做成一个列表。不过伴随广告，仍需要使用上面的层叠实现。这里需要利用好几个事件。 onClipChanged,onClipDone这两个事件对播放列表中的每个剪辑都会触发。onPlay只在播放列表开始时触发一次。单击播放或者重播按钮时调用showVideo函数。开始播放后隐藏一些静态画面， 剪辑切换时根据情况显示或者隐藏伴随广告，剪辑结束时如果是最后一个剪辑则显示最终画面

   
<script> 
function showVideo() { 
 $('#flow_player')[0].DoPlay(); 
}
function onPlay(clip) {  $("#flow_cover,#flow_button,#flow_list").hide(); } function onClipChanged(clip) {
  switch(clip.name){
   case 'main_video':
    $('#accompany_ad').show();
    break;
   case 'echo_ad':
    $('#accompany_ad').hide();
    break;
   default:
    break;  
} 
} 
function onClipDone(clip) {
  if(clip.name=='echo_ad'){
   $("#accompany_ad").hide();
   $('#flow_list').show();
   }
 }   
</script> 

根据需要还可通过addCuePoint(time,name,params)方法定时加入标签，到达标签式触发onCuePoint(cuePoint)事件，这时做一些事情