如何使用HTML5中的多媒体元素？
本帖最后由 断天涯大虾 于 2016-11-22 11:00 编辑目录一. HTML5媒体视频二. HTML5媒体音频三. 拖拽操作四. 获取位置信息五. 使用谷歌地图获取位置信息
多媒体是互联网中的最重要的一部分，无论访问的是哪种类型的网页，视频或音频触手可及，在之前实现这些功能对开发人员来说可能非常痛苦，必须依赖Object标签，调用第三方软件来加载，如Flash等，如果有些设备不支持Flash，我们对此就束手无策了。但是HTML5的出现让多媒体网页开发变得异常简单，也形成了新的标准。
一.使用video元素。在本节中学习如何在HTML5中使用视频元素1.准备视频资源2.创建HTML页面新建HTML，并命名为“Media.html”，输入以下内容：<video controls width="500px" id="vid">
<source src="vid.mp4" />
</video>
可以观察到的是视频标签中包含“控制”，添加该标签可以使得播放器工具栏可见。控制杆和我们平常所见到的一样，非常简单，包含暂停，播放，停止等按钮注意：
要确保视频和HTML文件存放到同一目录下如果想放置在不同的目录下，需要设置SRC属性.HTML5视频元素只支持MP4，WEBM，3GPP，MPEG M4V，OGG格式，QuickTime的，X-MS-wmvright格式输出：http://www.codeproject.com/KB/HTML/1071736/2.jpg
二.使用脚本控制视频元素1.创建HTML页面新建HTML页面“Media01.html”设置视频资源SRC属性。在本节中不使用控件属性来设置，使用JS代码来实现。<blockquote><video width="500px" id="vid">2.添加播放，暂停，和声音调节按钮。<blockquote><input type="button" name="name" value="Play" id="BtnPlay" />3.创建JS函数来控制视频播放。<blockquote>function PlayOrPause()输出：http://www.codeproject.com/KB/HTML/1071736/3.jpg
三. Audio元素HTML5使得在页面中加载音频元素变得非常简单。1.准备音频资源2.新建HTML页面，输入以下内容：<blockquote><audio id="audctrl" controls>3.输出：http://www.codeproject.com/KB/HTML/1071736/4.jpg
四. 使用脚本添加音频元素1.新建HTML页面<blockquote><audio id="audctrl">
2.添加播放，暂停及音量键<blockquote><innput type="button" name="name" value="Play" id="BtnPlay" />3.创建JS函数来控制音频播放代码如下：<blockquote>function PlayOrPause()
五.拖拽操作的实现在之前，实现拖拽操作都是开发人员自定义逻辑来实现，但是HTML5提供了拖拽API ，使得拖拽操作的实现变得如此简单。1.准备资源（图片资源）2.设置拖动属性<img src="fish.png" style="width:179px;height:120px;top:200px;" draggable="true" id="img11" ondragstart="drag(event)" />
3.输出http://www.codeproject.com/KB/HTML/1071736/6.jpg4.实现拖动事件function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
输出：http://www.codeproject.com/KB/HTML/1071736/7.jpgondragover事件制定被拖拽的数据
<blockquote>function allowDrop(ev) {当拖拽的元素被鼠标释放时，自动调用ondrop事件<blockquote>function drop(ev) {输出：http://www.codeproject.com/KB/HTML/1071736/8.jpghttp://www.codeproject.com/KB/HTML/1071736/9.jpg
六. 复杂的拖拽操作实现
新建的HTML页面，HTML和CSS代码如下：<blockquote><style>输出：http://www.codeproject.com/KB/HTML/1071736/10.jpg
JS代码：<blockquote>function allowDrop(ev) {运行：
http://www.codeproject.com/KB/HTML/1071736/11.jpg
七.地理位置信息的获取HTML5 可以共享位置信息，精度和维度都可以通过JS事件来捕捉并返回给服务器来在google 地图中定位。
初始化：1.创建HTML页面Geolocation.html;2.添加页面元素：<input type="button" value="Get My Location" />JS代码
<blockquote><script type=”text/Javascript”>
执行：http://www.codeproject.com/KB/HTML/1071736/13.jpg 如何实现自定更新位置信息呢？1.初始化<input type="button" value="Get My Location Updated" />
2. JS代码<blockquote>varwatchid;持续更新位置信息JS代码：<blockquote>function stopUpdatingLocation() {输出：http://www.codeproject.com/KB/HTML/1071736/14.jpg
八.使用Google地图1.创建HTML页面2.添加GOOGLE地图的引用<script src="http://maps.google.se/maps/api/js?sensor=false"></script>3.添加的div元素，并加载地图<div id="divmap" style="border:1px solid #ffd800;width:400px;height:400px;"></div>4. 添加点击按钮来加载地图并输入目的地
5. js 代码：<blockquote><script type="text/javascript">运行：http://www.codeproject.com/KB/HTML/1071736/15.jpg
前端工具用起来前端开发渐成热潮，学习了HTML5的多媒体知识之后，还需要了解开发工具：新一代HTML5 / JavaScript UI控件Wijmo，大而全面的前端开发工具包，为您的企业应用提供更加灵活的操作体验，现已全面支持Angular 2。
页:
[1]