PageTalks » code http://pagetalks.com Pure Web Development & Design Ideas Thu, 19 Jan 2012 12:06:33 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Let Thickbox conquers Flash http://pagetalks.com/2008/08/29/let-thickbox-conquers-flash.html http://pagetalks.com/2008/08/29/let-thickbox-conquers-flash.html#comments Fri, 29 Aug 2008 09:08:37 +0000 Robin http://pagetalks.com/?p=61 大家都知道我们无所不能的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，暂且算是解决方案吧。知道真相的同学记得告诉我 哦！

]]> http://pagetalks.com/2008/08/29/let-thickbox-conquers-flash.html/feed 1