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面板的使用,素材的处理,类的说明,开始布局等等. 整体概况: 根据上一篇 ...
随机推荐
- STL的使用
Vector:不定长数组 Vector是C++里的不定长数组,相比传统数组vector主要更灵活,便于节省空间,邻接表的实现等.而且它在STL中时间效率也很高效:几乎与数组不相上下. #include ...
- 配置hadoop
1.$ tar -zxvf hadoop-1.0.3.tar.gz 2.添加hadoop到环境变量 root登陆: sudo su 修改环境变量:vi /etc/environment 添加: / ...
- mysql代码执行漏洞
mysql (5.7, 5.6, 和 5.5版本)的所有默认安装配置,包括最新的版本,攻击者可以远程和本地利用该漏洞.该漏洞需要认证访问MYSQL数据库(通过网络连接或者像phpMyAdmin的we ...
- 关于JSP中<body onload="fun()">body标签中onload中函数不执行问题
问题描述: 在一个页面中,我们经常会初始化一下数据,而且会在指定的DOM元素初始化数据,这时候我们就会使用<body onload="fun()">来加载我们的数据.o ...
- 我们平时是怎么写html和css的?
文章的起因,我只是为了回复一个帖子,http://bbs.csdn.net/topics/390908928?page=1 结果,一扯就根本停不下来.索性,一捅为快,反正是周末. 拿到效果图时,有这么 ...
- 【学习笔记】C语言之词法规则
一.字符 标准并没有规定C环境必须使用特定的字符集,但是它规定了字符集必须包含英语所有的大小写字母,数字0到9,以及下面的字符: ! # % ^ & * ( ) _ – + = / . ? ...
- permission denied to create extension "hstore"解决方案
首先 sudo -u postgres psql postgres 进入数据库后输入命令 ALTER USER mydb_user WITH SUPERUSER; (把某个用户设置为超级 ...
- python smtp 群发邮件
最近工作中遇到使用脚本处理问题并发送结果邮件,使用python的smtp模块很简单的完成了实现.今天遇到一个问题,根据脚本的测试结果需要群发邮件,但是发送邮件的py文件只有首个地址收到了邮件.仔细排查 ...
- 监视 Windows 剪切板
一.先看代码 import win32con,win32gui import win32clipboard as cb class MyWindow(): def __init__(self): #注 ...
- oracle遇到的锁异常,oralce record is locked by another user
由于我在前不久的一次项目调试的时候,将一条数据的ID与另一条数据的ID相同了,但不知为什么没有报错,当在页面发现问题时,删除这条数据时就报错了,oralce record is locked by a ...