Entries RSS

Let Thickbox conquers Flash

2008 Aug 29

大家都知道我们无所不能的Thickbox竟然不能支持Flash的载入。虽然将SWF文件当作iFrame内容直接用Anchor引用,可以在 IE下正常显示flash内容,可惜在FF下无用。在Thickbox还没有做出更新的时候,我们该怎么在Thickbox里面显示Flash呢?曾经有 人提出过改版的Thickbox, 可以他没有继续更新。

今天突发奇想,干脆写个PHP页面,然后当iFrame引用吧!

我这里示范一下用Thickbox打开FLV播放器并播放指定文件的例子吧。(其实这个ELFVision里已经得到了使用)
这里使用的JW FLV播放器支持N多的参数和外部脚本,我们只订制了它播放文件、长度、宽度和自动播放,这四个非常基本的参数。如下是默认状态下的播放器代码:

<embed src="http://www.jeroenwijering.com/embed/player.swf" allowscriptaccess="always" allowfullscreen="true" flashvars="width=320&height=250&file=/upload/player.flv" width="320" height="250"></embed> 


接下来我们自己编写一个videoPlay.php页面来作为iFrame的内容,并在使用中向videoPlay.php传递参数。(小弟在写这 篇文章的时候特地花了几十分钟学PHP,对,就是几十分钟)在ELFVision中的videoPlay.php页面代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Video Player - ELFVision </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Robin">
<META NAME="Keywords" CONTENT="Video Playing">
<META NAME="Description" CONTENT="Playing">
<style>
* {
padding: 0;
margin: 0;
}
body {
overflow: hidden;
}
</style>
</HEAD>
<BODY>
<?php
$x=$_GET[’x'];
$y=$_GET[’y'];
$link=$_GET[’link’];
$autoplay=$_GET[’autop’];
echo ‘<embed src="http://www.elfvision.com/blog/wp-content/mediaplayer.swf" ‘;
echo ‘width="’.$x.’ "height="’.$y.’" ‘;
echo ‘allowscriptaccess="always" ‘;
echo ‘allowfullscreen="true" ‘;
echo ‘ flashvars="height=’.$y.’&width=’.$x.’&file=’.$link.’&screencolor=0xFFFFFF&autostart=’.$autoplay.’" />’;
?>
</BODY>
</HTML>

基本都是静态代码嘛……呵呵……

在正文中,可以像这样调用:

<a href="http://www.elfvision.com/movie/videoPlay.php?x=350&y=204&link=http://www.elfvision.com/movie/vitas_opera2.flv&autop=true&keepThis=true&TB_iframe=true&width=320&height=194" class="thickbox">查看该视频</a>

其中排开实现thickbox所传递的参数外,x代表宽度,y代表高度,link代表FLV文件的绝对地址,autop代表是否自动播放。之所以这样命名,是为了防止和thickbox的参数冲突。这样,Thickbox就成功调用了!

另外一个很奇怪的事情就是,调用WP内置的Thickbox来显示Flash,其窗口宽度和高度会无缘地增加30px和10px。目前为止笔者还不 知道原因,所以我在传递thickbox的width和height的时候分别用真实值减去了30和10,暂且算是解决方案吧。知道真相的同学记得告诉我 哦!

One Comment

  1. Posted 2008-Aug-29 at 6:10 am | Permalink

    测试一个评论!

Post a Comment

Your email is never shared. Required fields are marked *

*
*