音视频处理
   视频处理
     基本内容
       使用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. STL的使用

    Vector:不定长数组 Vector是C++里的不定长数组,相比传统数组vector主要更灵活,便于节省空间,邻接表的实现等.而且它在STL中时间效率也很高效:几乎与数组不相上下. #include ...

  2. 配置hadoop

    1.$ tar -zxvf  hadoop-1.0.3.tar.gz 2.添加hadoop到环境变量 root登陆: sudo su 修改环境变量:vi  /etc/environment 添加: / ...

  3. mysql代码执行漏洞

    mysql  (5.7, 5.6, 和 5.5版本)的所有默认安装配置,包括最新的版本,攻击者可以远程和本地利用该漏洞.该漏洞需要认证访问MYSQL数据库(通过网络连接或者像phpMyAdmin的we ...

  4. 关于JSP中<body onload="fun()">body标签中onload中函数不执行问题

    问题描述: 在一个页面中,我们经常会初始化一下数据,而且会在指定的DOM元素初始化数据,这时候我们就会使用<body onload="fun()">来加载我们的数据.o ...

  5. 我们平时是怎么写html和css的?

    文章的起因,我只是为了回复一个帖子,http://bbs.csdn.net/topics/390908928?page=1 结果,一扯就根本停不下来.索性,一捅为快,反正是周末. 拿到效果图时,有这么 ...

  6. 【学习笔记】C语言之词法规则

    一.字符 标准并没有规定C环境必须使用特定的字符集,但是它规定了字符集必须包含英语所有的大小写字母,数字0到9,以及下面的字符: ! # % ^ & * ( ) _ – + =  / . ? ...

  7. permission denied to create extension "hstore"解决方案

    首先 sudo -u postgres psql postgres 进入数据库后输入命令 ALTER USER mydb_user WITH SUPERUSER;        (把某个用户设置为超级 ...

  8. python smtp 群发邮件

    最近工作中遇到使用脚本处理问题并发送结果邮件,使用python的smtp模块很简单的完成了实现.今天遇到一个问题,根据脚本的测试结果需要群发邮件,但是发送邮件的py文件只有首个地址收到了邮件.仔细排查 ...

  9. 监视 Windows 剪切板

    一.先看代码 import win32con,win32gui import win32clipboard as cb class MyWindow(): def __init__(self): #注 ...

  10. oracle遇到的锁异常,oralce record is locked by another user

    由于我在前不久的一次项目调试的时候,将一条数据的ID与另一条数据的ID相同了,但不知为什么没有报错,当在页面发现问题时,删除这条数据时就报错了,oralce record is locked by a ...