如何使用HTML5中的多媒体元素？

目录

一. HTML5媒体视频

二. HTML5媒体音频

三. 拖拽操作

四. 获取位置信息

五. 使用谷歌地图获取位置信息

多媒体是互联网中的最重要的一部分，无论访问的是哪种类型的网页，视频或音频触手可及，在之前实现这些功能对开发人员来说可能非常痛苦，必须依赖Object标签，调用第三方软件来加载，如Flash等，如果有些设备不支持Flash，我们对此就束手无策了。但是HTML5的出现让多媒体网页开发变得异常简单，也形成了新的标准。

在本节中学习如何在HTML5中使用视频元素

1.准备视频资源

2.创建HTML页面

新建HTML，并命名为“Media.html”，输入以下内容：

1.创建HTML页面

新建HTML页面“Media01.html”设置视频资源SRC属性。在本节中不使用控件属性来设置，使用JS代码来实现。

2.添加播放，暂停，和声音调节按钮。

3.创建JS函数来控制视频播放。

输出：

HTML5使得在页面中加载音频元素变得非常简单。

1.准备音频资源

2.新建HTML页面，输入以下内容：

3.输出：

1.新建HTML页面

2.添加播放，暂停及音量键

3.创建JS函数来控制音频播放代码如下：

在之前，实现拖拽操作都是开发人员自定义逻辑来实现，但是HTML5提供了拖拽API ，使得拖拽操作的实现变得如此简单。

1.准备资源（图片资源）

2.设置拖动属性

3.输出

4.实现拖动事件

当拖拽的元素被鼠标释放时，自动调用ondrop事件

输出：

新建的HTML页面，HTML和CSS代码如下：

输出：

JS代码：

运行：

七.地理位置信息的获取

HTML5 可以共享位置信息，精度和维度都可以通过JS事件来捕捉并返回给服务器来在google 地图中定位。

初始化：

1.创建HTML页面Geolocation.html;

2.添加页面元素：

执行：

如何实现自定更新位置信息呢？

1.初始化

2. JS代码

持续更新位置信息

JS代码：

输出：

1.创建HTML页面

2.添加GOOGLE地图的引用

3.添加的div元素，并加载地图

运行：