【HTML5】 Audio/Video全解(集合贴)
【HTML5】 Audio/Video全解(集合贴)
目录[-]
最近在整理博客和浏览器收藏夹中的教程,把一些自己比较了解的基础知识进行了汇总,并且加入自己开发中遇到的问题和理解。由于参考来源太多,所以做了个详细列表在下面,感谢这些作者的无私和伟大,呵呵! 来源参考:w3、w3school、来源一、来源二、来源三、来源四、来源五、QA 一、标签解读
<audio id="media" src="http://www.abc.com/test.mp3" controls></audio>
<video id="media" src="http://www.abc.com/test.mp4" controls width="400px" height="400px"> </video>
二、Media对象方法和属性
三、Media JS事件
事件详细说明: 四、浏览器对音视频格式支持说明 Audio
Video
再来张截图示意:(http://en.wikipedia.org/wiki/Html_video_tag) 五、疑难杂症1、mp4格式视频无法在chrome中播放Chrome浏览器支持HTML5,它支持原生播放部分的MP4格式(不用通过Flash等插件)。 为 什么是部分MP4呢?MP4有非常复杂的含义(见http://en.wikipedia.org/wiki/Mp4),普通人对MP4的理解是后缀 为.mp4的文件。但MP4本身不是一种简单的视频格式,它是一个包装了视频和音频格式的壳。至于里面的视频和音频使用什么编码格式是可变的。MP4的视频格式可以使用DivX也可使用H264,Chrome只支持H264。 然后,我猜测问题的原因是这样的:Chrome浏览器见到MP4后缀的文件,使用了原生HTML5视频播放起播放,但却发现视频格式无法解码。对于Firefox,它不支持原生播放MP4,于是使用了Flash,绝大部分的视频格式基本都可通过Flash播放。 这 篇2011年1月的消息提到Google将放弃对H264的支持:http://www.infoq.com/cn/news/2011/01 /chrome-h264。这篇是Google方面的描述:http://blog.chromium.org/2011/01/html-video- codec-support-in-chrome.html。如果Google不再支持在Chrome上原生播放MP4,那么会调用Flash播放器播 放,这样反而不会出现有些MP4文件播放不了的问题。 为什么Chrome不支持所有的视频编码格式?绝大部份的视频编码格式都是要付版权费的,Google已经为H264买了单,Firefox没有Google那么有钱不愿意买。 最后,我录制了一段教学视频,指导大家怎样把各种视频转换成兼容性比较好的MP4文件。视频中使用的软件是“格式工厂”(http://www.formatoz.com/CN/index.html),这个软件基本上只是做了一个界面,其核心调用了开源软件FFMPEG。由于它违反了FFMPEG的LGPL许可协议,备受指责。使用Linux的朋友可以直接使用FFMPEG命令进行视频格式转换,命令如下: ffmpeg -i infile.flv -vcodec libx264 o5.mp4 如果转换出的视频在某些设备还是无法播放,可以试试利用MediaCoder转换兼容性更好的MP4 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 <video id="player" width="480" height="320" webkit-playsinline> Obj-C webview.allowsInlineMediaPlayback = YES; 六、参考范例:音乐播放器在网上看到有人用JS写的播放器,木有仔细看,先贴过来。感觉让我自己写想不到这么周全,等后面要用再仔细寻更好方案。 原文地址:http://www.cnblogs.com/arby/archive/2012/04/07/2436352.html
|
【HTML5】 Audio/Video全解(集合贴)相关推荐
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
2019独角兽企业重金招聘Python工程师标准>>> <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放c ...
- The jQuery HTML5 Audio / Video Library
2019独角兽企业重金招聘Python工程师标准>>> http://jplayer.org/ 转载于:https://my.oschina.net/kisshua/blog/131 ...
- 直接修改html代码视频进度,HTML5实现video标签的自定义播放进度条
现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: HTML5-Video-Player .videoPlayer{ border: ...
- 用于播放视频的Html5元素是,HTML5多媒体播放video元素与audio元素详解
在HTML5问世之前,要在网络上展示视频.音频和动画,除了使用第三方自主开发的播放器外,使用得最多的工具应该是FLASH了,便它们都需要在浏览器中安装各种插件才能使用,而且有时速度很慢.HTML5的出 ...
- HTML中的camera标签,详解HTML5 使用video标签实现选择摄像头功能
详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // // Open WebCam Snap Photo 2. javascript El ...
- html5 摄像头 直播,详解HTML5 使用video标签实现选择摄像头功能
详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // // Open WebCam Snap Photo 2. javascript El ...
- html5 audio js控制进度,HTML5多媒体的之audio和video。JavaScript控制进度条播放进度
使用HTML5多媒体,audio和video两个元素可以让用户不必借助flash player插件即可播放音频和视频. 小知识:视频文件包含了音频轨道,视频轨道和其他一些元数据.当我们播放视频的时候, ...
- html5前端Video视频标签和audio音频标签的使用
html5前端Video视频标签和audio音频标签的使用 h5新特性中关于Video视频标签和audio音频标签的使用和浅谈 一.Video视频标签 video标签是h5新特性中用来播放视频的控件, ...
- html5相关介绍ppt,html5介绍全解.ppt
html5介绍全解 渐变 (Gradients) 线性渐变: background: linear-gradient(to right, red, orange, yellow, green, blu ...
最新文章
- 【Groovy】闭包 Closure ( 闭包参数列表规则 | 默认参数列表 | 不接收参数 | 接收自定义参数 )
- acid四大特性_深入理解MySQL的ACID四大特性原理
- 值得收藏的Python小技巧:这17个骚操作你都OK吗?
- JavaFX:TouchGesture内存泄漏?
- python默认数据转换_Python_数据类型转换
- vsftpd安装问题汇总(持续更新。。)
- 驱动框架1——什么是驱动框架?
- strtolower_PHP strtolower()函数与示例
- centos7远程桌面端口_CentOS7启用远程桌面连接
- vue获取编辑器纯文字_前端富文本编辑器 vue-html5-editor
- angular使用Md5加密
- 如何激活windows的远程终端
- ffmpeng编解码过程
- 旅游出行 APP 哪家强?
- 苹果鼠标右键怎么按_精选分享,你不了解的这些鼠标增强神器
- Web服务器配置管理
- android 获取默认字体,Android默认字体
- winhttp 与wininet的区别(一)
- ubuntu为软件设定图标
- 打造你的“私人空间”,玩客云详细评测
热门文章
- reverse函数—数组反转
- python django 糖尿病分析系统
- 华为云调用feign接口时出现java.io.IOException: too many bytes written
- 360遭下架,苹果商店封杀360手机应用
- voip语音质量测试国际电信联盟标准E-mode
- win7 和 linux双系统安装教程,win7和centos7双系统完美安装攻略
- Jmeter 参数化--4种方式
- python标识符最大可能长度_Opencv-Python学习笔记(二)
- 机器学习与数据挖掘,机器学习算法简介
- C#仿QQ皮肤-实现原理系列文章导航