音视频处理
   视频处理
     基本内容
       使用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小内容(二)的更多相关文章

  1. 从零开始开发一款H5小游戏(二) 创造游戏世界,启动发条

    本系列文章对应游戏代码已开源 Sinuous game 上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API.这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果.这个过程更 ...

  2. H5小内容(四)

    SVG   基本内容     SVG并不属于HTML5专有内容       HTML5提供有关SVG原生的内容     在HTML5出现之前,就有SVG内容     SVG,简单来说就是矢量图     ...

  3. H5小内容(一)

    HTML5目前最新的规范(标准)是2014年10月推出   2005年左右出现HTML5版本(非标准)     W3C组织(两个组织定义H5规范)   学习(研究)HTML5是学习未来(将来主流)   ...

  4. H5小内容(六)

    Web Worker   基本内容     单线程与多线程       Worker可以模拟多线程的效果     定义 - 运行在后台的javascript     注意 - 不能使用DOM      ...

  5. H5小内容(五)

    Geolocation(地理定位)   基本内容     地理定位 - 地球的经度和纬度的相交点     实现地理定位的方式       GPS - 美国的,依靠卫星定位       北斗定位 - 纯 ...

  6. H5小内容(三)

    Canvas(画布)   基本内容     简单来说,HTML5提供的新元素<canvas>     Canvas在HTML页面提供画布的功能       在画布中绘制各种图形     C ...

  7. Egret白鹭H5小游戏开发入门(二)

    前言: 昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等. 整体概况: 根据上一篇 ...

  8. Egret白鹭H5小游戏开发入门(一)

    前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js. ...

  9. 开发H5小游戏

    Egret白鹭H5小游戏开发入门(一)   前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJ ...

随机推荐

  1. APNs消息推送完整讲解

    在项目的AppDelegate中的didFinishLaunchingWithOptions方法中加入下面的代码: [[UIApplication sharedApplication] registe ...

  2. js 复制网页内容,兼容各浏览器

    因需要做一个js单击,复制当前网页url的功能.使用的是如下的方法,但是只能在ie浏览器下正常使用. 方法如下: function copyURL(){ var clipBoardContent=&q ...

  3. Java从设计模式[本场比赛状态转换武器]状态分析(State)模式

    如果我们正在做一个实时战略游戏.我们设计了一个武器,他制作只是当步兵,但他能够切换武器.第一个开关会变成弓箭手,第二个开关导通控股装甲盾牌,第三开关变成步兵--如何实现这一目标切换机构?我们开始思考, ...

  4. git 设置

    系统乱码 项目中的编码统一设置为UTF-8编码. 设置系统的语言设置为 zh_UTF-8,把 export LANG=zh_CN.UTF-8 保存到~/.profile文件里. $ env|grep ...

  5. 关于android应用--内存的优化

    以下内容为转载自网上,然后自己加工贴合到一块的: 原文地址:http://www.cnblogs.com/frydsh/archive/2012/12/09/2810601.html http://w ...

  6. How to create a PPPoE Server on Ubuntu? (Untested)

    How to create a PPPoE Server on Ubuntu? March 30, 2011 coder_commenter Leave a comment Go to comment ...

  7. 使用ExpandableListView实现一个时光轴

    在许多App上都能看到时光轴的效果,比如携程等等,那么我们今天就利用ExpandableListView来实现一个时光轴效果,先来看看效果图: 效果还是挺简单的,这里我们主要是采用Expandable ...

  8. Asp.Net分页存储过程

      SQL分页语句 一.比较万能的分页: sql代码: 1 2 3 select top 每页显示的记录数 * from topic where id not in  (select top (当前的 ...

  9. PHP 获取当前日期的上个月的日期

    获取当前日期的上个月的日期 <?php /** *参考有: *http://www.oschina.net/code/snippet_96541_4015 *http://stackoverfl ...

  10. html Js跨域提交数据方法,跨域提交数据后台获取不到数据

    MVC实现方式:(后台获取不到方法请参考下面js) [ActionAllowOrigin][HttpPost]public JsonResult Cooperation() { return json ...