目录[-]
一、标签解读 二、Media对象方法和属性 三、Media JS事件 四、浏览器对音视频格式支持说明 五、疑难杂症 1、mp4格式视频无法在chrome中播放 2、让服务器能正确识别多媒体的MIME类型 3、文件格式转换的问题 4、能否在MP4完整下载前进行播放? 5、避免用JS访问废除的属性 6、Firefox 11 以上版本的音量控制的问题 7、音视频播放是否完全脱离插件? 8、如何全屏视频?支持情况如何? 9、通过HTML5技术能否访问摄像头和麦克风? 10、autoplay在iphone/ipad中不能实现的问题 11、解决iPhone中,视频自动在新窗口打开问题 六、参考范例:音乐播放器
最近在整理博客和浏览器收藏夹中的教程,把一些自己比较了解的基础知识进行了汇总,并且加入自己开发中遇到的问题和理解。由于参考来源太多,所以做了个详细列表在下面,感谢这些作者的无私和伟大,呵呵! 来源参考:w3、w3school、来源一、来源二、来源三、来源四、来源五、QA 一、标签解读<audio id="media" src="http://www.abc.com/test.mp3" controls>audio> src:音乐的URL (source标签在src属性不存在时使用) <video id="media" src="http://www.abc.com/test.mp4" controls width="400px" height="400px"> video> src:视频的URL
二、Media对象方法和属性
三、Media JS事件
事件详细说明: 四、浏览器对音视频格式支持说明 Audio
Video
再来张截图示意:(http://en.wikipedia.org/wiki/Html_video_tag)
五、疑难杂症1、mp4格式视频无法在chrome中播放 Chrome浏览器支持HTML5,它支持原生播放部分的MP4格式(不用通过Flash等插件)。 2、让服务器能正确识别多媒体的MIME类型 即使对浏览器来说,已经设置了正确的媒体,但有可能是您的服务器并不能正确识别多媒体的MIME类型。MIME类型告诉服务器如何处理不同的文件类型。如果你使用Apache,则可以在.htaccess文件中添加下面的音频支持: 3、文件格式转换的问题 一种很常见的情况是,用户从客户端提交给服务端一个类型的媒体文件,并且尽管你已经从它的文件扩展名中确认了其MIME类型。但是,该文件没有 被正确解码。例如,它可以是一个完全有效的MP4文件,但由于某种原因,在一些浏览器中无法播放。如果发生这种情况,最好把用户上传的文件进行编码,比如 使用如Miro Video Coverter和Media Converter等编码器,可以确保正确的编码。 4、能否在MP4完整下载前进行播放? 一般情况下,HTML5的的音频和视频播放器将允许用户在完整下载文件前,就可以开始进行播放了,有时候,对于MP4文件来说却不能这样,要必须等待所有的视频下载完毕再播放,这主要是编码问题造成的 5、避免用JS访问废除的属性 这个问题看上去好像有点多余,但每次在Stack Overflow中,都会看到很多开发者发问,比如为什么某个方法不能运行,原因在于他们使用了不存在的属性。比如,在 6、Firefox 11 以上版本的音量控制的问题最近相信不少开发者会发现音量控制的操作在Firefox 11及以上的版本中被取消了。是的,静音和音量控制仍然是可以使用的,但要通过键盘上的上和向下键进行控制,其原因主要是发现了两个bug(请参 考:http://www.iandevlin.com/blog/2012/04/html5/html5-media-controls-and- firefox),这一点请开发者注意,估计firefox会很快修复这个问题。 7、音视频播放是否完全脱离插件? HTML5的音频和视频点的最大卖点之一就是不需要安装第三方插件-例如Flash 8、如何全屏视频?支持情况如何? HTML5 视频的其中一大威力在于其全屏播放的特性但HTML5 规范中,对这个居然没有任何提及,相反,在另外一个关于全屏幕播放的API中有定义,但还是在草稿阶段,在一些浏览器中开始有试验性的支持。 9、通过HTML5技术能否访问摄像头和麦克风? HTML 5的起草者们,一直都希望HTML 5能访问摄像头和麦克风,因此早期是使用标签的,但现在是被getUserMedia API所取代了(详见: http://dev.w3.org/2011/webrtc/editor/getusermedia.html)。 API本身是容易使用的 ,但目前浏览器支持相当有限。Opera是目前唯一个实现这些功能的浏览器,但只支持视频Internet Explorer 10也将对其进行部分支持,Firefox也会跟随。 10、autoplay在iphone/ipad中不能实现的问题
11、解决iPhone中,视频自动在新窗口打开问题HTML Obj-C webview.allowsInlineMediaPlayback = YES; 六、参考范例:音乐播放器在网上看到有人用JS写的播放器,木有仔细看,先贴过来。感觉让我自己写想不到这么周全,等后面要用再仔细寻更好方案。 原文地址:http://www.cnblogs.com/arby/archive/2012/04/07/2436352.html
|