HTML5中添加多媒体支持(二)

来源:互联网 发布:网络好电视猫最近很卡 编辑:程序博客网 时间:2024/05/17 21:48

接下来我们介绍一下如何嵌入Flash和Video或Audio,并且介绍一些在线生成嵌入代码的工具:


生成嵌入Flash代码的工具如下:

http://www.osmf.org/configurator/fmp/

其中:

  1. Video Source输入嵌入的文件地址,可以输入视频文件的地址;
  2. 其余选项根据需要设置;

输入完毕后甚至可以预览代码,设置正确后嵌入对应的页面即可;

例子中我们使用的代码如下:

   <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格式;


好吧,这一段确实太乱了,实在搞不清楚的大家也别想太多了,凑活着过吧微笑







原创粉丝点击