目录
1. html5 media-video
2. html5 media-audio
3. 拖拽操作
4. 获取位置信息
5. 使用google 地图获取位置信息
多媒体是互联网中的最重要的一部分，无论访问的是哪种类型的网页，视频或音频触手可及，在之前实现这些功能对开发人员来说可能非常痛苦，必须依赖object 标签，调用第三方软件来加载，如flash等，如果有些设备不支持flash，我们对此就束手无策了。但是html5的出现让多媒体网页开发变得异常简单，也形成了新的标准。
1. 使用video 元素。
在本节中学习如何在html5中使用video 元素
1.准备视频资源
2. 创建html 页面
新建html ，并命名为“media.html”,输入以下内容：
可以观察到的是video 标签中包含“controls”,添加该标签可以使得播放器工具栏可见。control bar 和我们平常所见到的一样，非常简单，包含暂停，播放，停止等按钮。
注意：
要确保video 和html 文件存放到同一目录下。如果想放置在不同的目录下，需要设置src 属性。
html5 video 元素只支持mp4，webm,3gpp,m4v mpeg,ogg ，quicktime,x-ms-wmvright格式。
输出：
2. 使用脚本控制video 元素
1. 创建html 页面
新建html 页面“media01.html”设置video 资源 src属性。在本节中不使用controls 属性来设置，使用js代码来实现。
2. 添加播放，暂停，和声音调节按钮。
3. 创建js 函数来控制video播放。
function playorpause(){var v = document.getelementbyid('vid');if (v.paused || v.ended){v.play();document.getelementbyid('btnplay').value = pause;}else{v.pause();document.getelementbyid('btnplay').value = play;}}
设置currenttime为6,则表示在第六秒时视频停止播放。
function stop(){var v = document.getelementbyid('vid');v.pause();v.currenttime = 6;document.getelementbyid('btnplay').value = play;}
如下是设置当视频播放完成之后停止播放：
function end(){var v = document.getelementbyid('vid');v.pause();v.currenttime = v.duration;document.getelementbyid('btnplay').value = play;}
以下代码是将声音调节控制到0-1之间：
function changevolume(element){var v = document.getelementbyid('vid');v.volume = element.value;//for mute set it to 0}
输出：
3. audio 元素
html5使得在页面中加载音频元素变得非常简单。
1. 准备音频资源
2. 新建html页面，输入以下内容：
3. 输出：
4. 使用脚本添加音频元素
1.新建html页面
2. 添加播放，暂停及音量键
3. 创建js 函数来控制音频播放。代码如下：
function playorpause(){var v = document.getelementbyid('audctrl');if (v.paused || v.ended){v.play();document.getelementbyid('btnplay').value = pause;}else{v.pause();document.getelementbyid('btnplay').value = play;}}同上，设置在第6秒停止播放：function stop(){var v = document.getelementbyid('audctrl');v.pause();v.currenttime = 6;document.getelementbyid('btnplay').value = play;}
5. 拖拽操作的实现
在之前，实现拖拽操作都是开发人员自定义逻辑来实现，但是html5提供了拖拽api ，使得拖拽操作的实现变得如此简单。
1. 准备资源(图片资源)
2. 设置draggable 属性
3. 输出
4. 实现drag 事件
function drag(ev) {ev.datatransfer.setdata(text, ev.target.id);}
5. drog 操作
输出：
ondragover 事件制定被拖拽的数据。
function allowdrop(ev) {ev.preventdefault();}
当拖拽的元素被鼠标释放时，自动调用ondrop 事件
function drop(ev) {ev.preventdefault();var data = ev.datatransfer.getdata(text);ev.target.appendchild(document.getelementbyid(data));}
输出：
6. 复杂的拖拽操作实现
新建html页面，html & css 代码如下：
create the face
输出：
js 代码：
function allowdrop(ev) {ev.preventdefault();}function drag(ev) {ev.datatransfer.effectallowed = 'copy';ev.datatransfer.setdata(text, ev.target.id);}function drop(ev) {ev.preventdefault();var data = ev.datatransfer.getdata(text);if (data.indexof(ev.target.id) == -1) {ev.datatransfer.cleardata();}else {ev.target.appendchild(document.getelementbyid(data));}}
运行：
7. 地理位置信息的获取
html5 可以共享位置信息，精度和维度都可以通过js事件来捕捉并返回给服务器来在google 地图中定位。
初始化：
1. 创建html 页面 geolocation.html;
2. 添加页面元素：
js 代码：
执行：
如何实现自定更新位置信息呢?
1. 初始化
2. js代码
varwatchid;function getupdatedlocation() {document.getelementbyid(header).value = dynamic location;if (navigator.geolocation) {var opt = {timeout: 500,maximumage: 1000,enablehighaccuracy: true};watchid = navigator.geolocation.watchposition(showposition, errorcallback, opt);}else {// no native support; maybe try a fallback?}}
持续更新位置信息
js代码：
function stopupdatinglocation() {if (navigator.geolocation) {navigator.geolocation.clearwatch(watchid);}}
输出：
7. 使用google地图
1. 创建html 页面
2. 添加google 地图的引用
3. 添加div 元素，并加载地图
4. 添加点击按钮来加载地图并输入目的地
5. js 代码：
运行：
来源：http://www.cnblogs.com/powertoolsteam/p/5207818.html?utm_source=tuicool&utm_medium=referral