H5(二)
音视频处理
视频处理
基本内容
使用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(二)的更多相关文章
- native与H5优缺点及H5测试
一.native(原生)与H5优缺点介绍 native(原生)优点 1.运行速度快 2.可以应用到底层的API 3.便捷性与易用性 4.打开会比较节省流量 native(原生)缺点 1.不同操作系统需 ...
- Css--深入学习之三角形气泡窗
本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想 一.三角形的实现 首先,先画了三角形,后面二.三都是根据这个 ...
- JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
- MUI开发记录
最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~ HUuilder使用安卓模拟器 安卓模拟器有很多,我这里以夜神模 ...
- MUI开发大全
最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~,写代码时HBuilder和VS混用,HBuilder的快捷键和代 ...
- 一.html介绍
一.html1.就是一个文本文档,写标记语言,由浏览器软件进行渲染得到想要的网页效果2.版本:h4,h5 二.常用的h5标签1.块状标签: p:段落 div:块 span:同行块 h1-h6:6级标题 ...
- html2canvas - 项目中遇到的那些坑点汇总(更新中...)
截图模糊 原理就是讲canvas画布的width和height放大两倍. 后来学习canvas的时候,才了解到这种写法不同于css的宽高设置, 因为css里的只是展示画布显示的大小,不像这样是c ...
- CSS基础和布局复习
table布局 div布局优势 浏览器支持完善 表现和结构分离 样式设计控制功能强大 可以继承,层叠处理 Transitional // 松散过度型 Strict //严格型 Fram ...
- Egret白鹭H5小游戏开发入门(二)
前言: 昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等. 整体概况: 根据上一篇 ...
随机推荐
- Généralement c'est un mélange qui me devient personnellement
Parmi mes plus grands problèmes personnels avec maisons de rue conventionnelles est en fait ils sont ...
- Mysql 查看、创建、更改 数据库和表
一.一探究竟 我想看看有多少个数据库,有多少个表,以及表里有啥东西.那么你可以这样: 图形界面: 命令: 查看多少个数据库:注意 后面带s #查看 SHOW DATABASES; #查看表 USE b ...
- python api
import requests #查询手机好归属地API def phone(tel): url = 'http://op.juhe.cn/onebox/phone/query' appkey = ' ...
- Apache Shiro 学习记录2
写完上篇随笔以后(链接).....我也想自己尝试一下写一个Strategy.....Shiro自带了3个Strategy,教程(链接)里作者也给了2个.....我想写个都不一样的策略.....看来看去 ...
- vi 的使用
Vi 分三种模式:一般模式,编辑模式,和命令模式 一般模式: 光标移动,搜索与替换,删除,复制,粘贴 编辑模式:插入或者替换文本 命令模式:读取.保存文件 一般模式 光标移动: h(左), j(下), ...
- 对于C语言复杂指针类型的分析
转载自:http://www.slyar.com/blog/complicated-point-type.html int p; p是一个普通的整型变量. int *p; 1.p与*结合,说明p是一个 ...
- bzoj2928: [Poi1999]飞弹
惨啊…… 被卡常是一种什么感受&…… 很明显的分治. 我们首先可以找到所有点中的最低点,然后对所有点进行一次极角排序,选取一个点使得他各侧飞弹和地堡一样多,并对两侧继续进行分治. 很容易证明这 ...
- 【splay】文艺平衡树 BZOJ 3223
Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 ...
- CapsLock与ctrl的键位修改
windows下修改方式: linux下修改方式: 在用户目录下新建文档命名为keychange.sh 编辑以下内容: remove Lock = Caps_Lock remove Control = ...
- bootStrap树形目录组件
需求描述 产品添加页面,需要选择车型.在bootStrap的modal上弹出子modal来使用.车型一共有4级目录.要使用目录树.然后分活动和商品两种,需要能够通过不通参数来调用该组件.车型品牌要使用 ...