HTML5中添加多媒体支持(二)
来源:互联网 发布:网络好电视猫最近很卡 编辑:程序博客网 时间:2024/05/17 21:48
接下来我们介绍一下如何嵌入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格式;
好吧,这一段确实太乱了,实在搞不清楚的大家也别想太多了,凑活着过吧
- HTML5中添加多媒体支持(二)
- HTML5中添加多媒体支持(一)
- HTML5中添加多媒体支持(三)
- html5多媒体格式支持
- HTML5多媒体audio和video(二)
- 什么是HTML5(二):通信、离线&存储、多媒体
- html5中多媒体的应用
- 网页中添加多媒体元素
- (3)HTML5-多媒体应用
- 【html5多媒体】自定义播放器(弹幕,水印,甚至在视频开头添加封面)
- So Beautiful 旅程——HTML5的多媒体支持
- Android多媒体(二)
- HTML5 - 多媒体
- HTML5多媒体
- 多媒体支持
- 多媒体支持
- Android系统多媒体框架添加对.wma格式的支持
- Android系统多媒体框架添加对.wma格式的支持
- openfire XML 节的语法
- Zigbee协议
- Socket与TCP/IP的关系
- PRtools模式识别工具箱关于version运行出错
- Linux入门:计算机组件介绍
- HTML5中添加多媒体支持(二)
- CentOS6.2安装cacti远程监控服务器小纪
- Ubuntu12.04安装OracleJava7
- Apache+Tomcat负载均衡两种session共享方式的设置之二复制会话
- ubuntu下C编程,编译基础
- 一些计算机视觉的代码网址
- Android Instrumentation Testing
- Deepin Linux下eclipse
- VMwate+Ubuntu集群配置(不需要密码的SSH)