• 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 - 表示当前视频播放的位置
    * 音频处理
    * <audio>元素
    * 第一种 - 只支持一种音频格式
    <audio src="音频文件的路径"></audio>
    * 第二种 - 同时引入多个音频格式
    <audio>
    <source src="一种音频格式" />
    <source src="一种音频格式" />
    <source src="一种音频格式" />
    </audio>
    * <audio>元素支持音频格式
    * MP3 - 目前最主流
    * OGG
    * WAV

    -----------------------------------------------------------------------小二给我来二两轮子!
  • 相关阅读:
    分享10个超棒的jQuery/javascript表单插件
    分享一个超棒的在线jQuery mobile原型设计开发工具 codiqa
    分享5个超酷flash样式的jQuery导航和菜单
    jQuery类库新手使用指南之AJAX方法 第二部分
    分享5个最佳的Javascript日期处理类库
    分享一个快速开发动态互动HTML5可视化图形效果的Javascript类库 Envision.js
    了解CSS3的文字阴影效果 Text Shadow effects
    使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表
    分享30个带给你灵感的书法作品
    超酷HTML5和CSS3实现的登录及其注册功能表单
  • 原文地址:https://www.cnblogs.com/-walker/p/4996249.html
Copyright © 2020-2023  润新知