音视频处理
   视频处理
     基本内容
       使用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. oracle--逻辑对象--bai

    1 序列 sequence oracle特有.实现"自增"或"自减"的逻辑对象. 2 同义词 synonym 对表取别名,该别名被永久存储. 比视图更省资源. ...

  2. Python Day13

    堡垒机 权限管理 当你公司的服务器变的越来越多后,需要操作这些服务器的人就肯定不只是一个运维人员,同时也可能包括多个开发人员,那么这么多的人操作业务系统,如果权限分配不当就会存在很大的安全风险,举几个 ...

  3. Dubbo项目demo搭建

    项目参考: http://dubbo.io/User+Guide-zh.htm https://my.oschina.net/superman158/blog/466637 项目使用 maven+id ...

  4. EasyPusher应用

    转自https://github.com/EasyDarwin/EasyPusher 本文仅实际体验一下demo,分析一下如何应用. 1)EasyPusher框图预览 2) EasyPusher应用实 ...

  5. juery学习总结(一)——juery选择器

    juery在工作中经常使用,遇到不会的问题往往百度一下,事后就忘.使用到现在也感觉不到有什么提高,为了每天进步一点点,从今天起抽时间记录下对juery的学习. 学习之前,首先要了解什么是网页元素,网页 ...

  6. 【10-26】java调试技术学习笔记

    调试工具 jdk自带的工具 jmap jconsole VisualVM jmap jmap -histo:live pid 列出该进程的所有活动实例统计信息 jmap -dump:live,file ...

  7. Shell脚本学习第二课·

    Shell文件包含 shell也可以包含外部脚本,语法格式如下: . filename 或 source filename 例如创建两个shell脚本. 脚本1:test1.sh url = &quo ...

  8. 安装出现了error launching installer

    安装geany时,出现问题: 两种解决方法: 解决的办法是: 在控制面板中寻找"区域.语言设置"--管理--更改系统区域设置--中文(简体.中国),确定退出即可! 但是....我不 ...

  9. R语言:ggplot2精细化绘图——以实用商业化图表绘图为例

    本文版权归http://www.cnblogs.com/weibaar 本文旨在介绍R语言中ggplot2包的一些精细化操作,主要适用于对R画图有一定了解,需要更精细化作图的人,尤其是那些刚从exce ...

  10. java 解 poj 1000

    import java.util.Scanner; public class A1000 { public static void main(String[] args) { Scanner sc=n ...