三天学会HTML5 ——多媒体元素的使用
文件夹
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 width="500px" id="vid">
<source src="vid.mp4" />
</video>
能够观察到的是video 标签中包括“Controls”,加入该标签能够使得播放器工具栏可见。Control bar 和我们寻常所见到的一样,很easy。包括暂停,播放,停止等按钮。
注意:
要确保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代码来实现。
<video width="500px" id="vid">
<source src="vid.mp4" />
</video>
2. 加入播放,暂停,和声音调节按钮。
<input type="button" name="name" value="Play" id="BtnPlay" />
<input type="button" name="name" value="Stop" id="btnStop" />
<input type="button" name="name" value="End" id="btnEnd" />
<input type="range" name="name" value="0.1" min="0" max="1" step="0.1" id="slideVolume" />
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使得在页面中载入音频元素变得很easy。
1. 准备音频资源
2. 新建HTML页面。输入下面内容:
<audio id="audctrl" controls>
<source src="aud.mp3" type="audio/mp3" />
</audio>
3. 输出:
4. 使用脚本加入音频元素
1.新建HTML页面
<audio id="audctrl"><source src="aud.mp3" type="audio/mp3" />
</audio>
2. 加入播放,暂停及音量键
<innput type="button" name="name" value="Play" id="BtnPlay" />
<input type="button" name="name" value="Stop" id="btnStop" />
<input type="button" name="name" value="End" id="btnEnd" />
<input type="range" name="name" value="0.1" min="0" max="1" step="0.1" id="slideVolume" />
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 属性
<img src="fish.png" style="width:179px;height:120px;top:200px;" draggable="true" id="img11" οndragstart="drag(event)" />
3. 输出
4. 实现drag 事件
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
5. drog 操作
<div id="div1" class="bowl" οndrοp="drop(event)" οndragοver="allowDrop(event)"> </div>
输出:
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 代码例如以下:
<style>body {cursor: pointer;text-align: center;}.divdrag {position: relative;border: 0px solid rgba(0, 0, 0, .25);width: 300px;height: 300px;padding: 10px 10px10px10px;float: left;}.face {background-image: url('face.jpg');background-repeat: no-repeat;width: 424px;height: 510px;border: 1px dotted grey;padding: 0 0 0 0;}
.facetr td {text-align: center;border: 1px dotted #f7ecec;}
</style>
<h2>Create the face</h2><div class="divdrag"><img src="eye1.png" alt="eye" draggable="true" id="eye1" οndragstart="drag(event)" /><img src="eye2.png" alt="eye" draggable="true" id="eye2" οndragstart="drag(event)" /><img src="nose2.png" alt="nose" draggable="true" id="nose2" οndragstart="drag(event)" /><img src="eye4.png" alt="eye" draggable="true" id="eye4" οndragstart="drag(event)" /><img src="nose1.png" alt="nose" draggable="true" id="nose1" οndragstart="drag(event)" /><img src="eye3.png" alt="eye" draggable="true" id="eye3" οndragstart="drag(event)" /><img src="smile1.png" alt="smile" draggable="true" id="smile1" οndragstart="drag(event)" /><img src="smile3.png" alt="smile" draggable="true" id="smile2" οndragstart="drag(event)" /><img src="smile2.png" alt="smile" draggable="true" id="smile3" οndragstart="drag(event)" /></div><div style="float:left;"><a href="DragnDrop.html" title="Click here to reset" style="text-decoration:none;"><img src="direction.png" width="125" height="100" οnclick="" /></a></div><div id="div1" style="width:300px;height:300px;float:left;"><table class="face"><tr><td colspan="2" style="width:100%;"> </td></tr><tr><td colspan="2" style="width:100%;"> </td></tr><tr><td id="eye" style="width:50%" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td><td id="eye" style="width:50%" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td></tr><tr><td id="nose" οndrοp="drop(event)" οndragοver="allowDrop(event)" colspan="2"></td></tr><tr><td id="smile" οndrοp="drop(event)" οndragοver="allowDrop(event)" colspan="2"></td></tr></table></div>
输出:
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事件来捕捉并返回给server来在google 地图中定位。
初始化:
1. 创建html 页面 Geolocation.html;
2. 加入页面元素:
<input type="button" value="Get My Location" />
JS 代码:
<script type=”text/Javascript”>
var x = document.getElementById("lblDisplay");function getLocation() {document.getElementById("header").value = "Static Location";if (navigator.geolocation) {var opt = {timeout: 6000,maximumAge: 60000,enableHighAccuracy: true};navigator.geolocation.getCurrentPosition(showPosition, errorCallBack, opt);} else {alert('No support for geolocation');}
}function showPosition(position) {x.innerHTML = "Latitude: " + position.coords.latitude +"Longitude: " + position.coords.longitude;
}function errorCallBack(e) {switch (e){case e.PERMISSION_DENIED:x.innerHTML = "User denied geolocation request";break;case e.POSITION_UNAVAILABLE:x.innerHTML = "No position information available";break;case e.TIMEOUT:x.innerHTML = "Timeout occured";break;case e.UNKNOWN_ERROR:x.innerHTML = "Unknown error";break;}}
</script>
执行:
怎样实现自定更新位置信息呢?
1. 初始化
<input type="button" value="Get My Location Updated" />
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 地图的引用
<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 代码:
<script type="text/javascript">function GetMyDirection() {if (navigator.geolocation) {var opt = {timeout: 500,maximumAge: 1000,enableHighAccuracy: true};navigator.geolocation.getCurrentPosition(showPosition, errorCallBack, opt);} else {alert('No support for geolocation'); }
}function showPosition(position) {showInMap(position.coords.latitude, position.coords.longitude);
}function showInMap(lat, lang) {vardirectionsService = new google.maps.DirectionsService();vardirectionsRenderer = new google.maps.DirectionsRenderer();var route = {origin: new google.maps.LatLng(lat, lang),destination: document.getElementById('txtDestination').value, travelMode: google.maps.DirectionsTravelMode.DRIVING};varmapOptions = {zoom: 10,center: new google.maps.LatLng(50.8504500, 4.3487800),mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map(document.getElementById("divmap"), mapOptions);directionsRenderer.setMap(map);directionsRenderer.setPanel(document.getElementById("divDriveDirection"));directionsService.route(route, function (result, status) {if (status === google.maps.DirectionsStatus.OK) {directionsRenderer.setDirections(result);}});
}function errorCallBack(e) {switch (e) {case e.PERMISSION_DENIED:x.innerHTML = "User denied geolocation request";break;case e.POSITION_UNAVAILABLE:x.innerHTML = "No position information available";break;case e.TIMEOUT:x.innerHTML = "Timeout occured";break;case e.UNKNOWN_ERROR:x.innerHTML = "Unknown error";break;}
}
</script>
执行:
三天学会HTML5 ——多媒体元素的使用相关推荐
- 《HTML5多媒体应用开发》——第2章 HTML5多媒体元素2.1 Web多媒体历史
本节书摘来自异步社区<HTML5多媒体应用开发>一书中的第2章,第2.1节,作者: [爱]Ian Devlin 更多章节内容可以访问云栖社区"异步社区"公众号查看. 第 ...
- php微信聊天带语音,使用Html5多媒体实现微信语音功能
随着微信等社交App的兴起,语音聊天成为很多App必备功能,大到将语音聊天作为主要功能的社交App,小到电商App的语音客服.店小二功能,语音聊天成为了必不可少的方式. 但是很多人感觉网页端语音离我们 ...
- h5在线制作html5,在线制作HTML5多媒体作品的技巧
HTML5多媒体作品以其对各种平台的兼容而见长,目前已获得了广泛的应用.如果我们需要制作自己的HTML5多媒体作品,一个方便之选就是利用现成的在线制作工具"百度H5". 首先访问& ...
- html5语音框架,使用Html5多媒体实现微信语音功能
随着微信等社交App的兴起,语音聊天成为很多App必备功能,大到将语音聊天作为主要功能的社交App,小到电商App的语音客服.店小二功能,语音聊天成为了必不可少的方式. 但是很多人感觉网页端语音离我们 ...
- 【前端学习之HTMLCSS】-- HTML第七篇 -- 图片元素与多媒体元素
[前端学习之HTML&CSS]-- HTML第七篇 – 图片元素与多媒体元素 文章目录 [前端学习之HTML&CSS]-- HTML第七篇 -- 图片元素与多媒体元素 前言 图片元素 ...
- 使用Html5多媒体实现微信语音功能
随着微信等社交App的兴起,语音聊天成为很多App必备功能,大到将语音聊天作为主要功能的社交App,小到电商App的语音客服.店小二功能,语音聊天成为了必不可少的方式.Azure AI 服务之语音识别 ...
- 三分钟学会css3中的flexbox布局
2019独角兽企业重金招聘Python工程师标准>>> 这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念,通过学习flexbox布局,你会发现以往遇到的所有的关于布局 ...
- 刚学会 HTML5 不久,最近用 CSS3 实现了热点地图动画
市面上大多数的热点地图,都是以 JavaScript 来做的,但是使用 CSS3 制作的热点地图倒还真的挺少见的. 其实 CSS3 的功能也很强大,能帮助我们实现很多用 JavaScript 实现的效 ...
- 三小时学会css(菜鸟教程精华版)【中】
三小时学会css 上期传送门 CSS 盒子模型(Box Model) CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. 盒模型允许我们在其它元素和周围元素边 ...
最新文章
- Unity3D移植到自己的Android程序
- 遗传算法来控制进入(一)
- hadoop job 未跑满资源_2018年第26周-解剖MapReduce Job
- 根据百度API获得经纬度,然后根据经纬度在获得城市信息
- 题注Oracle数据库的网络连接原理
- SAP MM 库存初始化和批量扩充物料仓位
- eclipse中java文件报错:The type java.lang.Object cannot be resolved. It is indirectly referenced from r
- 一位“寒门”同学从高材生到“不如人”的经历
- struts配置通配符*来匹配方法,实现动态调用
- Pwn2Own 2020线上争霸赛落幕:Fluoroacetate 团队四度蝉联 Master of Pwn!
- 批发网商品采集API接口
- 85后独立手游开发者专访:为游戏而坚持
- [python] paramiko实现SSH和SFTP
- 【SAP消息号L9006】
- CE_tutorial_game
- bq4050读固件_BQ4050 + STM32 MCU 虚拟IIC读取SMBUS数据
- oracle挂载磁盘阵列,数据库服务器没正常挂载磁盘阵列导致无法启动(一)
- cmd del命令笔记
- 需要跳槽的同学,没有更好的选择,可以去美团
- 关于Ext2.2中调用iframe,无法打开 Internet 站点
热门文章
- web前端移动开发必须知道那些基础
- Node.js 用户注册功能的实现
- 浏览器html5视频抓取,检测浏览器是否支持html5视频的代码
- java lambda教程_Lambda系列教材 (一)- Java Lambda 表达式教程
- python解析器打包_打包发布Python模块的方法详解
- visual studio code typescript 防止 import statement 断行
- 按照自己的理解用js实现八皇后的算法
- 4渲染导出_Civil 3D:导出道路数据的 5 个步骤都在这里了
- 数据集 oracle,Analytics 数据集 - 
Oracle® ZFS Storage Appliance RESTful API 指南,发行版 OS8.6.0...
- Reddit大热,伯克利PPT带你丝滑入门机器学习:知识点全面覆盖,笔记可搭配食用...