接下来我们介绍一下如何嵌入Flash和Video或Audio,并且介绍一些在线生成嵌入代码的工具:
生成嵌入Flash代码的工具如下:
http://www.osmf.org/configurator/fmp/
其中:
- Video Source输入嵌入的文件地址,可以输入视频文件的地址;
- 其余选项根据需要设置;
输入完毕后甚至可以预览代码,设置正确后嵌入对应的页面即可;
例子中我们使用的代码如下:
<video width="480" height="300" controls preload="auto" poster="../_video/podcast-poster.jpg">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<object width="480" height="300"> <param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"></param><param name="flashvars" value="src=http%3A%2F%2Fwww.explorecalifornia.org%2F_video%2Fpodcast.mp4&poster=http%3A%2F%2Fwww.explorecalifornia.org%2F_video%2Fpodcast-poster.jpg"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="300" flashvars="src=http%3A%2F%2Fwww.explorecalifornia.org%2F_video%2Fpodcast.mp4&poster=http%3A%2F%2Fwww.explorecalifornia.org%2F_video%2Fpodcast-poster.jpg"></embed></object>
</video>
音频的嵌入工具可以去 http://wpaudioplayer.com/standalone/下载js库并且参照对应的帮助设置即可。
为了支持视频的下载,我们可以使用<a>标签:
<video width="480" height="300" controls preload="auto" poster="../_video/podcast-poster.jpg">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<object width="480" height="300" type="application/x-shockwave-flash" data="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf">
<param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"></param>
<param name="flashvars" value="src=http%3A%2F%2Fwww.explorecalifornia.org%2F_video%2Fpodcast.mp4&poster=http%3A%2F%2Fwww.explorecalifornia.org%2F_video%2Fpodcast-poster.jpg"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<img src="../_video/podcast-poster.jpg" alt="No Video Support" title="No Video Support">
</object>
</video>
<p>
<strong>Download Video:</strong>
<a href="../_video/podcast.mp4">MP4</a>,
<a href="../_video/podcast.ogv">OGG</a>,
<a href="../_video/podcast.webm">WebM</a>
</p>
最后我们来介绍一个嵌入HTML5 video的在线工具: http://videojs.com/tag-builder/
HTML5规范中并没有强制定义一个标准的格式,主要原因就是阵营的不统一:
微软(IE)、苹果(Safari)、Adobe(Flash)都仅支持H.264(MPEG-4/AVC),但这个格式是有版权滴;
而Mozilla(Firefox)、google(Chrome)、Opera都支持OGG,这个格式是开放的,但目前支持的还是少数;
新版Mozilla(Firefox)、google(Chrome)、Opera还支持webm格式;
好吧,这一段确实太乱了,实在搞不清楚的大家也别想太多了,凑活着过吧