H5小内容(二)
音视频处理
视频处理
基本内容
使用Flash技术处理HTML页面中的视频内容
包含音频、动画、网页游戏等
特点
浏览器原生不支持(IE浏览器要求安装ActiveX组件)
性能不好(不能过多地使用)
智能移动端并不支持Flash技术
命运
Flash的母公司Adobe公开宣布放弃
目前用于替代Flash技术最好的选择 - HTML5
几乎所有浏览器原生支持<video>元素
性能更高
智能移动端支持非常好
如何实现视频处理
<video>元素
如果当前浏览器不支持<video>元素
在<video>元素内编写提示内容
属性
src - 引入视频文件的路径
autoplay - 自动播放视频
使用<source>元素
<video>
<source src="一种视频格式" />
<source src="一种视频格式" />
<source src="一种视频格式" />
</video>
<video>支持的视频格式
MP4格式 - 目前比较主流
OGG格式 - 多用于移动端
WebM格式 - 目前唯一支持超高清格式
在HTML页面中支持超高清格式(HTML5)
由Google公司推出的
<video>元素的属性
src - 引入视频文件的路径
autoplay - 自动播放视频
controls - 提供控制面板
loop - 表示循环播放
poster - 设置播放之前显示的图片
width和height - 设置显示视频的宽度和高度
preload - 预加载
auto - (默认值)自动加载
none - 不加载
metadata - 只加载视频的基本信息(不含视频)
高级内容
方法
play() - 播放视频
pause() - 暂停视频
load() - 加载视频
canPlayType() - 判断当前浏览器是否支持指定视频格式
事件
play - 当视频播放时被触发
pause - 当视频暂停时被触发
ended - 当视频结束时被触发
error - 当视频错误时被触发
canplay - 不考虑整体情况下,只要能播放,就播放
canplaythrough - 考虑整体情况下,只要能播放,就播放
progress - 表示视频加载的进度
属性 - 用于判断
paused - 表示判断当前视频是否暂停
返回Boolean值,true表示暂停,false表示播放
ended - 表示判断当前视频是否播放完毕
返回Boolean值,true表示完毕
duration - 表示当前视频的时长
currentTime - 表示当前视频播放的位置
音频处理
<audio>元素
第一种 - 只支持一种音频格式
<audio src="音频文件的路径"></audio>
第二种 - 同时引入多个音频格式
<audio>
<source src="一种音频格式" />
<source src="一种音频格式" />
<source src="一种音频格式" />
</audio>
<audio>元素支持音频格式
MP3 - 目前最主流
OGG
WAV
H5小内容(二)的更多相关文章
- 从零开始开发一款H5小游戏(二) 创造游戏世界,启动发条
本系列文章对应游戏代码已开源 Sinuous game 上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API.这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果.这个过程更 ...
- H5小内容(四)
SVG 基本内容 SVG并不属于HTML5专有内容 HTML5提供有关SVG原生的内容 在HTML5出现之前,就有SVG内容 SVG,简单来说就是矢量图 ...
- H5小内容(一)
HTML5目前最新的规范(标准)是2014年10月推出 2005年左右出现HTML5版本(非标准) W3C组织(两个组织定义H5规范) 学习(研究)HTML5是学习未来(将来主流) ...
- H5小内容(六)
Web Worker 基本内容 单线程与多线程 Worker可以模拟多线程的效果 定义 - 运行在后台的javascript 注意 - 不能使用DOM ...
- H5小内容(五)
Geolocation(地理定位) 基本内容 地理定位 - 地球的经度和纬度的相交点 实现地理定位的方式 GPS - 美国的,依靠卫星定位 北斗定位 - 纯 ...
- H5小内容(三)
Canvas(画布) 基本内容 简单来说,HTML5提供的新元素<canvas> Canvas在HTML页面提供画布的功能 在画布中绘制各种图形 C ...
- Egret白鹭H5小游戏开发入门(二)
前言: 昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等. 整体概况: 根据上一篇 ...
- Egret白鹭H5小游戏开发入门(一)
前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js. ...
- 开发H5小游戏
Egret白鹭H5小游戏开发入门(一) 前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJ ...
随机推荐
- [微信小程序] 终于可以愉快的使用 async/await 啦
[小程序] 终于可以愉快的使用 async/await 啦 这篇文章主要是想说一下 怎么在微信小程序中使用async/await从而逃离回调地狱 背景 最近一直在搞微信小程序 用的语言是TypeScr ...
- zend studio-字体大小设置
在使用zend studio的过程中为了方便我们编码,很多时候需要设置编码的字体的大小,设置步骤如下: 选择[Windows]-[preference]-[general]-[appearance]- ...
- linux系统磁盘分区之parted
对于linux的分区通常可以使用fdisk命令工具和parted工具 对于分区表通常有MBR分区表和GPT分区表 对于磁盘大小小于2T的磁盘,我们可以使用fdisk和parted命令工具进行分区 对于 ...
- POJ 3670 , 3671 LIS
题意:两题意思差不多,都是给你一个序列,然后求最少需要改变多少个数字,使得成为一个最长不升,或者最长不降子序列. 当然3671是只能升序,所以更简单一点. 然后就没有什么了,用二分的方法求LIS即可. ...
- [React Native] Basic iOS Routing -- NavigatorIOS
Inside the app component, we use NavigatiorIOS to render the compoent: class githubnotetaker extends ...
- java list<string>组 传递到值js排列
方法一 后台: String sql = "select * from tree"; list = this.treeService.getTreeList(sql ...
- 基于x86架构的内核Demo的详细开发文档
http://hurlex.0xffffff.org/ 这里是hurlex这个基于x86架构的内核Demo的详细开发文档, 包含PDF文档和生成PDF的XeLaTex源码和文档每章节的阶段代码. 你可 ...
- SqlBulkCopy高效能批量插入SQL SERVER
what SqlBulkCopy是.NET提供的用来批量插入数据的一个类,特别是将内存中的数据一次性插入到数据库,目前只能插入到SQL SERVER数据库,数据源可以是DataTable.IDataR ...
- update 改写 merge into
update语句改写成merge into有时会提高运行速度 看两个案例 1.根据业务将两个嵌套子查询改写成max,速度有3min提升到3s UPDATE OPER_792.LL_SCB_YDKB_2 ...
- Android开发--UI之Bundle的使用
Android开发–UI之Bundle的使用 最近,把之前学过的东西大体的整理了以下,并且想把学过的心得分享给大家.我自己做了一个小小的demo,以便说明具体的应用. 这里的两个界面是通过第一个界面输 ...