音视频处理
   视频处理
     基本内容
       使用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. native与H5优缺点及H5测试

    一.native(原生)与H5优缺点介绍 native(原生)优点 1.运行速度快 2.可以应用到底层的API 3.便捷性与易用性 4.打开会比较节省流量 native(原生)缺点 1.不同操作系统需 ...

  2. Css--深入学习之三角形气泡窗

    本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想 一.三角形的实现 首先,先画了三角形,后面二.三都是根据这个 ...

  3. JQuery插件之图片轮播插件–slideBox

    来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...

  4. MUI开发记录

    最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~ HUuilder使用安卓模拟器 安卓模拟器有很多,我这里以夜神模 ...

  5. MUI开发大全

    最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~,写代码时HBuilder和VS混用,HBuilder的快捷键和代 ...

  6. 一.html介绍

    一.html1.就是一个文本文档,写标记语言,由浏览器软件进行渲染得到想要的网页效果2.版本:h4,h5 二.常用的h5标签1.块状标签: p:段落 div:块 span:同行块 h1-h6:6级标题 ...

  7. html2canvas - 项目中遇到的那些坑点汇总(更新中...)

    截图模糊    原理就是讲canvas画布的width和height放大两倍. 后来学习canvas的时候,才了解到这种写法不同于css的宽高设置, 因为css里的只是展示画布显示的大小,不像这样是c ...

  8. CSS基础和布局复习

    table布局 div布局优势   浏览器支持完善   表现和结构分离   样式设计控制功能强大   可以继承,层叠处理 Transitional // 松散过度型 Strict //严格型 Fram ...

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

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

随机推荐

  1. php 远程图片本地化

    /** * 把新浪的远程图片下载到自己服务器上 * * @access public * @param goods_desc $goods_desc 要处理的内容 * @return mix 如果成功 ...

  2. spring-mvc注解(mvc:annotation-driver,JSON,配置详解)

    一.DefaultAnnotationHandlerMapping 和 AnnotationMethodHandlerAdapter 的使用已经过时! spring 3.1 开始我们应该用 Reque ...

  3. 在UP Board 上搭建M——L服务器

    前言 原创文章,转载引用务必注明链接,水平有限,欢迎指正. 本文环境:ubilinux 3.0 on UP Board 初识免流 所谓免流,就是免除手机访问网络产生的流量费用.其原理在乌云网上有过报道 ...

  4. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

  5. Retrieving the COM class factory for component with CLSID {000209FF-0000-0000-C000-000000000046} failed due to the following error: 80070005 拒绝访问。

    这几天在写一个导出word的功能,使用 Microsoft.Vbe.Interop.dll和Office.dll 在本地都可以正常运行,但是上传到服务器后就报错,如下图: 对于此问题,也在网上查了一些 ...

  6. AssetBundle

    AssetBundle是Unity推荐的一种资源打包方式,与不使用AssetBundle相比,它有如下优点: 1.AssetBundle是经过LZMA压缩过的,所以体积更小. 2.可以将AssetBu ...

  7. 执行mvn 报错 source-1.5 中不支持 diamond运算符

    编译版本出现了问题 <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> < ...

  8. PL/SQL Developer不配置TNS直接登录

    如果只是临时登录,就没必要去配置一个TNS了,Database那里直接输入<IP>:<PORT>/<服务器SERVER_NAME> EBS的直接登录: http:/ ...

  9. 第3月第15天 afconvert lame

    1. //CAF 转换成MP3 (可以) afconvert -f mp4f -d aac -b 128000 /Users/amarishuyi/Desktop/sound1.caf/Users/a ...

  10. lua获取时间

    更多好的文章就在 blog.haoitsoft.com,请大家多多支持! local getTime = os.date("%c"); 其中的%c可以是以下的一种:(注意大小写) ...