音视频处理
视频处理
基本内容
使用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小内容(二)
时间: 2024-10-03 14:03:26
H5小内容(二)的相关文章
H5小内容(四)
SVG 基本内容 SVG并不属于HTML5专有内容 HTML5提供有关SVG原生的内容 在HTML5出现之前,就有SVG内容 SVG,简单来说就是矢量图 SVG文件的扩展名为".svg" SVG使用的是XML语法 概念 SVG是一种使用XML技术描述二维图形的语言 SVG的特点 SVG绘制图形可以被搜索引擎抓取 SVG在图片质量不下降的情况下,被放大 SVG与Canvas的区别
H5小内容(三)
Canvas(画布) 基本内容 简单来说,HTML5提供的新元素<canvas> Canvas在HTML页面提供画布的功能 在画布中绘制各种图形 Canvas绘制的图形与HTML页面无关 无法通过DOM获取绘制的图形 无法为绘制的图形绑定DOM事件 只能使用Canvas提供的API Canvas用途 在HTML页面中绘制图表(例如柱状图.饼状图等) 网页游戏 - Flash技术
H5小内容(五)
Geolocation(地理定位) 基本内容 地理定位 - 地球的经度和纬度的相交点 实现地理定位的方式 GPS - 美国的,依靠卫星定位 北斗定位 - 纯国产,惯性定位技术和卫星定位 基站定位 - 移动运营商创建基站(提供信号源) 基于互联网 - IP地址(PC端和移动端) 目前很多浏览器都具有定位功能 HTML5中地理定位 地理定位功能并不是属于HTML5专有内容 HTML5的地理定位技术
小内容将成新主流,内容产业巨变再起?
前不久逻辑思维与papi酱分道扬镳,让很多人对自媒体内容创业开始产生了怀疑.不过papi酱给瑞士顶级奢侈品手表积家代言又重新点燃了大家对自媒体第二春到来的希望之火. 而就在前几日,在内容产业有个新词语--"小内容"却开始流行了起来.阿里巴巴文化娱乐集团 移动事业群总裁何小鹏在钛媒体2016T-ADGE年度盛典上提出"小内容"的说法,并由此引发了业内外人士对于小内容时代的高度关注.Papi酱与积家的深度合作,恰恰从侧面应证了小内容时代的价值. 在何小鹏看来:小内容正在
已被多次定制!!“模拟微信答题";的H5小游戏
今天推荐一款“模拟微信”答题的H5小游戏,这个也是涛舅舅这边客户定制的最多的一款游戏,曾经为现代汽车.万达.和<三妹>电视剧都作过定制! 以下是<三妹>定制的版本,推荐给大家! 扫一扫直接体验游戏 非vip会员:只接受定制,不出售源码,请联系涛舅舅报价 vip会员:可以购买源码,价格咨询涛舅舅
思科命令配置小技巧二:macro命令
在 思科命令配置小技巧一中,我们谈到,使用range命令可以简化我们的配置 但是如果我们经常对一组不连续的端口进行操作 比如 interface-range fa1/1 ,fa1/3 ,fa1/5 ,fa1/7 ,fa1/11 即使使用range命令也会显得很繁琐 我们总想越简单越好(命令敲再多,工资还是那个数,要是按命令字数算工资多好) 此时交换机的宏命令就派上用场了 suzhouxiaoniu(config)#define interface-range abc fa1/1 ,fa1/3
H5页面内容较少时如何让页面全屏在手机显示呢
解决方案1: 设置如下:html,body{ min-height:100vh; background-color:#fff; }这样高度首先不会写死,而且满足最小高度是满屏 解决方案2: 可以用vh和vw来布局.100vh和100vw就是你设备的高度和宽度.先把外面盒子固定下来,所有的盒子的高度加起来等于100vh刚好占满一屏这样就不会有空白.像你这种盒子比较少的可以用js获取设备的高度和宽度,然后用js设置盒子的高度,加起来等于你设备的高度就可以了.字体大小用rem表示.相对于根字体的大小.
Android Widget 小部件(二) 使用configure
在添加Widget之前需要做一些处理操作,可以使用 配置活动 在上一篇的实现基础上,加上配置活动(configure=activity).这时添加Widget时,会先打开一个Activity,进行配置操作, <appwidget-provider .... android:configure="com.stone.ui.AppWidgetConfigureActivity" > </appwidget-provider> 配置活动的实现: package com
H5端扫描二维码
一.背景介绍 前段时间做了个H5的webapp项目,由于目前所在的公司是做WMS.OMS.TMS相关的物流行业,昨天项目经理提了个需求:能否实现二维码扫描功能. 实现这个功能项目的价格可以加5万以上,所以项目经理很急切也很激进,迫切需要知道是否有技术可行,然后就轮到我来研究可行性,这就像建造一座桥梁时遇到技术难题一样的,首先要考虑有没有这样技术的,再来考虑可行性. H5端扫描二维码要解决两个问题:一是唤起摄像头扫描,二是扫描完成后解析.H5端扫描还存在一个问题,是用静态扫描还是实时扫描,静态就是