首页 / HTML5 / 三天学会HTML5——多媒体元素的使用

三天学会HTML5——多媒体元素的使用

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了三天学会HTML5——多媒体元素的使用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7019字，纯文字阅读大概需要11分钟。

内容图文

　　目录

　　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格式。

　　输出：

三天学会HTML5——多媒体元素的使用 - 文章图片

　　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
}

　　输出：

三天学会HTML5——多媒体元素的使用 - 文章图片

　　3. Audio 元素

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

　　1. 准备音频资源

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

　　3. 输出：

三天学会HTML5——多媒体元素的使用 - 文章图片

　　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 属性

三天学会HTML5——多媒体元素的使用 - 文章图片

　　3. 输出

三天学会HTML5——多媒体元素的使用 - 文章图片

　　4. 实现drag 事件

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

　　5. drog 操作

　　输出：

三天学会HTML5——多媒体元素的使用 - 文章图片

　　ondragover 事件制定被拖拽的数据。

function allowDrop(ev) {
ev.preventDefault();
}

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

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}

　　输出：


三天学会HTML5——多媒体元素的使用 - 文章图片三天学会HTML5——多媒体元素的使用 - 文章图片

　　6. 复杂的拖拽操作实现

　　新建HTML页面，HTML & Css 代码如下：



Create the face



三天学会HTML5——多媒体元素的使用 - 文章图片
三天学会HTML5——多媒体元素的使用 - 文章图片
三天学会HTML5——多媒体元素的使用 - 文章图片
三天学会HTML5——多媒体元素的使用 - 文章图片
三天学会HTML5——多媒体元素的使用 - 文章图片
三天学会HTML5——多媒体元素的使用 - 文章图片
三天学会HTML5——多媒体元素的使用 - 文章图片
三天学会HTML5——多媒体元素的使用 - 文章图片
三天学会HTML5——多媒体元素的使用 - 文章图片





三天学会HTML5——多媒体元素的使用 - 文章图片

　　输出：

三天学会HTML5——多媒体元素的使用 - 文章图片

　　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));
}
}

　　运行：

三天学会HTML5——多媒体元素的使用 - 文章图片

　　7. 地理位置信息的获取

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

　　初始化：

　　1. 创建html 页面 Geolocation.html;

　　2. 添加页面元素：

　　

　　JS 代码：

　　执行：

三天学会HTML5——多媒体元素的使用 - 文章图片

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

　　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);
}
}

　　输出：

三天学会HTML5——多媒体元素的使用 - 文章图片

　　7. 使用Google地图

　　1. 创建HTML 页面

　　2. 添加GOOGLE 地图的引用

　　

内容总结

以上是互联网集市为您收集整理的三天学会HTML5——多媒体元素的使用全部内容，希望文章能够帮你解决三天学会HTML5——多媒体元素的使用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/389911.html

来源：【匿名】