HTML5音频-视频处理demo
HTML5视频-音频处理(最后有demo)
* 基本内容
* 使用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 - 表示当前视频播放的位置
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>视频引入</title> 6 </head> 7 <body> 8 <!-- 9 <video>元素 － 处理视频 10 *使用 － 类似于<img src="">元素 11 *属性 12 * src - 引入视频的路径 13 --> 14 <video src="video/video/1.mp4" autoplay="autoplay" > 15 不好意思您们的浏览器不支持 16 </video> 17 </body> 18 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>多个视频引入</title> 6 </head> 7 <body> 8 <video src=""> 9 不好意思，您的浏览器不支持此视频 10 <!-- 11 12 使用<source>元素引入视频路径 13 *在<video>元素中允许包含多个<source>元素 14 --> 15 <source src="video/1.mp4" /> 16 <source src="video/1.mp4" /> 17 <source src="video/1.mp4" /> 18 </video> 19 </body> 20 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>03-video元素的属性</title> 6 </head> 7 <body> 8 <!-- 9 controls属性 - 提供视频播放的控制面板 10 * 只定义属性名，没有属性值 11 --> 12 <!--<video src="video/video/1.mp4" controls></video>--> 13 <!-- 14 loop属性 - 表示视频的循环播放 15 --> 16 <!--<video src="video/video/1.mp4" autoplay loop ></video>--> 17 18 <!-- 19 poster属性 - 在播放视频之前显示一张图片 20 --> 21 <!--<video src="video/video/1.mp4" controls poster="images/spjt.png"></video>--> 22 23 <!-- 24 修改显示视频的宽度和高度 25 * width - 设置宽度 26 * height - 设置高度 27 --> 28 <video src="video/video/1.mp4" controls poster="images/spjt.png" 29 width="600" height="400" style="background: black;" preload="auto"></video> 30 </body> 31 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>04-video元素的方法</title> 6 <style> 7 #adv { 8 display: none; 9 position: absolute; 10 top: 100px; 11 left: 200px; 12 } 13 </style> 14 </head> 15 <body> 16 <video id="video" src="video/video/1.mp4" controls></video> 17 <div id="adv"> 18 <img src="images/spjt.png" width="700"/> 19 </div> 20 <script> 21 //1. 获取HTML页面video元素 22 var video = document.getElementById("video"); 23 //2获取广告图片 24 var adv = document.getElementById("adv"); 25 //3. video元素的事件绑定 - play | pause 26 video.addEventListener("play",myplay); 27 video.addEventListener("pause",mypause); 28 //3. 定义事件对应的处理函数 29 function myplay() { 30 //视频播放 31 adv.style.display = "none"; 32 } 33 function mypause() { 34 //视频暂停 35 adv.style.display = "block"; 36 } 37 38 </script> 39 </body> 40 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>05 - video自定义控制面板</title> 6 </head> 7 <body> 8 <video id="mmedia" src="video/video/1.mp4"></video> 9 <br /> 10 <input type="button" value="paly" id="play" /> 11 <script type="text/javascript"> 12 //1. 获取button按钮 13 var btn = document.getElementById("play"); 14 var mmedia = document.getElementById("mmedia"); 15 //2. 为button按钮绑定click事件 16 btn.addEventListener("click",myplay); 17 //3. 定义处理函数 18 function myplay(){ 19 // 判断当前视频是否暂停 20 if(mmedia.paused){ 21 mmedia.play(); 22 btn.value = "pause"; 23 }else{ 24 mmedia.pause(); 25 btn.value = "play"; 26 } 27 } 28 </script> 29 30 </body> 31 </html>
*音频处理
* 第一种 - 只支持一种音频格式
<audio src="一种音频格式"></audio>
* 第二种 - 同时引入多个音频格式
<audio>
<source src="一种音频格式"/>
<source src="一种音频格式"/>
<source src="一种音频格式"/>
</audio>
* <audio>元素支持的视频格式
* MP3 - 目前最主流
* OGG
* WVA
* 属性和方法基本和音频处理一至
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>06-audio音频元素</title> 6 </head> 7 <body> 8 <audio src="video/video/yy.mp3" controls autoplay loop></audio> 9 </body> 10 </html>
* 扩展内容
* Web前端 - 移动端
* 移动智能终端
* iPhone - IOS系统 - Object-c|Swfit
* Android系统 - Java
* Windows Mobile系统 - .net平台
* BlackBerry系统 - 企业级应用 QNX
* WebOS系统 - 全键盘+触摸屏
* 塞班 - 诺基亚
* MeeGo - Inter和诺基亚
* 移动跨平台 - HTML|CSS|JAVASCRIPT
* 一次编写,到处运行(phoneGap)
