html5 video完美兼容浏览器和video格式mp4|webm|ogv|flv转换工具下载

Filed under: html5 | 6 Comments »
Posted on 01月 28th, 2011 作者： o仔

这里我贴出了两种解决方案，只是ie下的flash播放器插件不同，一个用的是 jwplayer 一个是 flowplay 两种的定制性都很强,我在里面都贴了官方的地址，需要定制可以自己去看文档，两种免费版都有logo

html5出来之前，炒得沸沸扬扬，说html5要取代 flash？不敢苟同，只有用过之后才知道。就像现在的video 标签，可以直接支持视频音频播放了，但是各个浏览器巨头标准不统一，导致1个视频需要转3种格式，这里我还转成4种格式，跟windows下的服务器有关，后面会把我使用过程中遇到的问题跟解决方法给罗列出来，希望对有需要用到html5的网友有用。

第1种解决方案

	<video width="800" height="600" autoplay>
		<!-- MP4 must be first for iPad Safari! -->
		<source src="http://models.pm.fabriqate.com/wp-content/themes/photoshot/01.mp4"  type="video/mp4"  /><!-- WebKit video -->
		<source src="http://models.pm.fabriqate.com/wp-content/themes/photoshot/01.webm" type="video/webm" /><!-- WebM/VP8/Vorbis -->
		<source src="http://models.pm.fabriqate.com/wp-content/themes/photoshot/01.ogv"  type="video/ogg"  /><!-- Firefox / Opera -->
		<!-- fallback to Flash:jwplayer support type flv mp4,more config see the doucument http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5 -->
		<object width="800" height="600" type="application/x-shockwave-flash" data="http://models.pm.fabriqate.com/wp-content/themes/photoshot/js/player.swf">
			<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
			<param name="movie" value="http://models.pm.fabriqate.com/wp-content/themes/photoshot/js/player.swf" />
			<!-- controlbar have three option : false|over -->
			<param name="flashvars" value="autostart=true&amp;controlbar=false&amp;image=http://models.pm.fabriqate.com/wp-content/themes/photoshot/images/videoscreen.jpg&amp;file=http://models.pm.fabriqate.com/wp-content/themes/photoshot/01.flv" />
			<!-- fallback image -->
			<img src="http://models.pm.fabriqate.com/wp-content/themes/photoshot/images/videoscreen.jpg" width="800" height="600" alt="Big Buck Bunny" title="No video playback capabilities, please download the video below" />
		</object>
	</video>

Read the rest of this entry »

Tags : , , , , ,

解决ie下页面空白Bug详解

Filed under: 应用体验 | No Comments »
Posted on 12月 26th, 2010 作者： o仔

ie出现空白的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>标题</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
内容
</body>
</html>

这段代码咋看没有什么问题，但是在ie却出现了空白，内容两个字无法显示，原因就是 Title 如果是中文字符，必须在 Meta编码声明后面，我做了几种假设来验证这个答案：

如果Title是英文字符，那内容就可以正常解析；
如果Title是中文字符，那内容就不能显示；
Read the rest of this entry »

Tags : , ,

Iframe内容自适应两种方法

Filed under: Javascript | No Comments »
Posted on 09月 20th, 2010 作者： o仔

第1种，都在同一个页面，通过脚本写在当前页面控制加载内容的自适应，这种方法很不错，不过不能兼容apple safari 浏览器。 在safari浏览器的第一次加载是可以正常的，如果里面有链接的target也是指向这个iframe ，那么内容就不能自适应，会以第一次加载的高度为准。
Read the rest of this entry »

Tags : ,

让wordpress显示首页index.html

Filed under: 应用体验 | 2 Comments »
Posted on 09月 3rd, 2010 作者： o仔

假设我有一个网站放在跟wordpress同个目录，需要第一个是显示 index.html 而不是 index.php 这个时候，下面的方法就派得上用场了。如果你的wordpress不介意在二级目录就没这样的烦恼了。

原因：wordpress的index.php 会一直循环调用，如果更改了.htaccess 文件为 index.html 那么日志就会循环调用不出来。

修改首页为.html 需要注意：

1.在wordpress 后台修改永久链接(Permalink Settings)， 把default 改为 下面哪个都行，根据自己需要（有部分风格会用博客的根目录，这样首页更改了，日志链接就点击不进去了，所以需要修改永久链接）。

会在根目录生成一个.htaccess 文件

Read the rest of this entry »

Tags :

让页面绝对水平垂直居中–jquery例子

Filed under: Jquery | 1 Comment »
Posted on 08月 23rd, 2010 作者： o仔


例子的大概的示意图，以例子为准，截得不够绝对居中。

也许你也会用到的一个例子,让页面垂直居中。。如果你的分辨率够高的话，你就会发现很多页面如果不够长，就会全在上面那么一点，下面留了很多空白。。这时候就需要用到垂直居中了。原理很简单，里面都有注释了，就不废话了。。需要就拿去用。。还可以继续扩展下去。。
兼容 firefox ie6以上 chrome opera
Read the rest of this entry »

Tags : , ,