一、如何使用HTML实现视频处理
-
video标签
如果当前浏览器不支持video，可以在veido里面编写提示内容 src - 引入视频文件的路径 autoplay - 自动播放视频 -
souce元素
<vedio> <source src="一种视频格式"/> <source src="一种视频格式"/> <source src="一种视频格式"/> </vedio> -
video支持的视频格式
MP4 - 目前比较主流 OGG - 多用于移动端 WebM - 目前唯一支持超高清格式 在HTML页面中支持超高清格式HTML5 由Google公司推出 -
video元素的属性
src - 视频路径 autoplay - 自动播放 controls属性 - 提供视频播放的控制面板，只有属性名，没有属性值 loop - 视频的循环播放 poster属性 - 在视频播放之前，显示一张图片 width/height - 设置显示视频的宽度和高度 preload - 预加载 auto-(默认值)自动加载 none-不加载 metadata-只加载视频的基本信息(不含视频) -
扩展- Web前端 - 移动端
移动智能终端 iPhone Android Window Mobile BlackBerry WebOS - 全键盘+触摸屏 塞班 - 诺基亚 MeeGo 移动跨平台 - HTML/CSS/JAVASCRIPT 一次编写，到处运行(phoneGap)
二、视频处理
-
方法
play() - 播放视频 pause() - 暂停视频 load() - 重新加载音频/视频元素 canPlayType() - 判断当前浏览器是否支持指定视频格式 -
事件
onplay - 当视频开始播放时调用 onpause - 当视频暂停时触发 onended - 当视频结束时被触发 onerror - 当视频错误时被触发 oncanplay - 当整个媒体可以顺利播放时，就会触发这个事件 oncanplaythrough - 不考虑整体状态，只要下载了一定的可放帧会会触发这个事件 onprogress - 用于更新媒体的下载进度，会周期性的触发 -
属性
paused - 表示判断当前是否暂停，true表示暂停 ended - 表示判断当前视频是否播放完毕，true表示播放完毕 duration - 表示当前视频的时长,单位为s currentTime - 表示当前视频播放的位置 -
video元素
当video视频全屏时，浏览器会把video放到最前端，图片是有显示的，但被视频覆盖了 利用video事件完成广告效果 bug: 不能全屏 解决方案： 等到HTML5更新 使用video元素提供的高级编程自己实现 使用目前封装好的video的JS库 video.js
播放带有字幕的视频：
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
//可切换中英文字幕kind="captions"
<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>
三、音频处理
-
audio元素
第一种：只支持一种音频格式
<audio src="音频文件路径"></audio>第二种： 同时引入多个音频格式
<audio> <source src="一种音频格式"> <source src="一种音频格式"> <source src="一种音频格式"> </audio> -
audio元素支持的音频格式
MP3 - 目前最主流 OGG WAV
