HTML5--关于音频和视频

 

 * 音视频处理

   * 视频处理

     * 基本内容

       * 使用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 - 表示当前视频播放的位置

   * 音频处理

 *

 * 扩展内容

   * Web前端 - 移动端

     * 移动智能终端

       * iPhone - IOS系统 - Object-c|Swfit

       * Android系统 - Java

       * Windows Mobile系统 - .net平台

       * BlackBerry系统 - 企业级应用 QNX

       * WebOS系统 - 全键盘+触摸屏

       * 塞班 - 诺基亚

       * MeeGo - Inter和诺基亚

     * 移动跨平台 - HTML|CSS|JAVASCRIPT

       * 一次编写,到处运行(phoneGap)

   *

posted @ 2015-12-13 15:34  白艳风  阅读(161)  评论(0编辑  收藏  举报