찾다
웹 프론트엔드H5 튜토리얼三天学会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”,输入以下内容:

<font size="3"><video controls width="500px" id="vid">
<source src="vid.mp4" />
</video></font>

  可以观察到的是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代码来实现。

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

  输出:

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

  3. Audio 元素

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

  1. 准备音频资源

  2. 新建HTML页面,输入以下内容:

<audio id="audctrl" controls>
<source src="aud.mp3" type="audio/mp3" />
</audio>

  3. 输出:

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

  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="/static/imghwm/default1.png"  data-src="fish.png"  class="lazy"   style="max-width:90%" draggable="true" id="img11" ondragstart="drag(event)" / alt="三天学会HTML5 ——多媒体元素的使用" >

  3. 输出

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

  4. 实现drag 事件

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

  5. drog 操作

<div id="div1" class="bowl" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

  输出:

三天学会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 代码如下:

<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 id="Create-the-face">Create the face</h2>
<div class="divdrag">
<img src="/static/imghwm/default1.png"  data-src="eye1.png"  class="lazy" alt="eye" draggable="true" id="eye1" ondragstart="drag(event)" />
<img src="/static/imghwm/default1.png"  data-src="eye2.png"  class="lazy" alt="eye" draggable="true" id="eye2" ondragstart="drag(event)" />
<img src="/static/imghwm/default1.png"  data-src="nose2.png"  class="lazy" alt="nose" draggable="true" id="nose2" ondragstart="drag(event)" />
<img src="/static/imghwm/default1.png"  data-src="eye4.png"  class="lazy" alt="eye" draggable="true" id="eye4" ondragstart="drag(event)" />
<img src="/static/imghwm/default1.png"  data-src="nose1.png"  class="lazy" alt="nose" draggable="true" id="nose1" ondragstart="drag(event)" />
<img src="/static/imghwm/default1.png"  data-src="eye3.png"  class="lazy" alt="eye" draggable="true" id="eye3" ondragstart="drag(event)" />
<img src="/static/imghwm/default1.png"  data-src="smile1.png"  class="lazy" alt="smile" draggable="true" id="smile1" ondragstart="drag(event)" />
<img src="/static/imghwm/default1.png"  data-src="smile3.png"  class="lazy" alt="smile" draggable="true" id="smile2" ondragstart="drag(event)" />
<img src="/static/imghwm/default1.png"  data-src="smile2.png"  class="lazy" alt="smile" draggable="true" id="smile3" ondragstart="drag(event)" />
</div>
<div style="float:left;">
<a href="DragnDrop.html" title="Click here to reset" style="text-decoration:none;">
<img  src="/static/imghwm/default1.png"  data-src="direction.png"  class="lazy"    style="max-width:90%"  style="max-width:90%" onclick="" / alt="三天学会HTML5 ——多媒体元素的使用" >
</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%" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td id="eye" style="width:50%" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
</tr>
<tr>
<td id="nose" ondrop="drop(event)" ondragover="allowDrop(event)" colspan="2"></td>
</tr>
<tr>
<td id="smile" ondrop="drop(event)" ondragover="allowDrop(event)" colspan="2"></td>
</tr>
</table>
</div>

  输出:

三天学会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 代码:

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

  执行:

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

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

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

  输出:

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

  7. 使用Google地图

  1. 创建HTML 页面

  2. 添加GOOGLE 地图的引用

  

  3. 添加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 ——多媒体元素的使用

来源:http://www.cnblogs.com/powertoolsteam/p/5207818.html?utm_source=tuicool&utm_medium=referral
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
내 HTML5 웹 사이트에 오디오를 추가하는 방법은 무엇입니까?내 HTML5 웹 사이트에 오디오를 추가하는 방법은 무엇입니까?Mar 10, 2025 pm 03:01 PM

이 기사는 & lt; audio & gt를 사용하여 HTML5에 오디오를 포함시키는 방법을 설명합니다. 형식 선택에 대한 모범 사례 (MP3, OGG Vorbis), 파일 최적화 및 재생에 대한 JavaScript 컨트롤을 포함한 요소. 다중 오디오를 사용하는 것을 강조합니다

HTML5 페이지 가시성 API를 사용하여 페이지가 표시되는시기를 감지하려면 어떻게합니까?HTML5 페이지 가시성 API를 사용하여 페이지가 표시되는시기를 감지하려면 어떻게합니까?Mar 13, 2025 pm 07:51 PM

이 기사에서는 HTML5 페이지 가시성 API를 사용하여 페이지 가시성을 감지하고 사용자 경험을 향상 시키며 리소스 사용량을 최적화하는 것에 대해 설명합니다. 주요 측면에는 미디어 일시 정지, CPU 부하 감소 및 가시성 변경에 기반한 분석 관리가 포함됩니다.

사용자 입력에 HTML5 양식을 사용하는 방법은 무엇입니까?사용자 입력에 HTML5 양식을 사용하는 방법은 무엇입니까?Mar 10, 2025 pm 02:59 PM

이 기사에서는 HTML5 양식을 작성하고 검증하는 방법을 설명합니다. 그것은 & lt; form & gt; 요소, 입력 유형 (텍스트, 이메일, 번호 등) 및 속성 (필수, 패턴, 최소, 최대). HTML5의 장점은 오래된 방법에 비해 형성됩니다

Geolocation API로 사용자 위치 개인 정보 및 권한을 어떻게 처리합니까?Geolocation API로 사용자 위치 개인 정보 및 권한을 어떻게 처리합니까?Mar 18, 2025 pm 02:16 PM

이 기사는 지리적 위치 API를 사용하여 사용자 위치 개인 정보 및 권한 관리, 권한 요청, 데이터 보안 보장 및 개인 정보 보호법 준수에 대한 모범 사례를 강조하는 것에 대해 설명합니다.

HTML5 및 JavaScript로 대화 형 게임을 만드는 방법은 무엇입니까?HTML5 및 JavaScript로 대화 형 게임을 만드는 방법은 무엇입니까?Mar 10, 2025 pm 06:34 PM

이 기사는 JavaScript를 사용하여 대화식 HTML5 게임을 만드는 자세한 내용입니다. 게임 디자인, HTML 구조, CSS 스타일, JavaScript 로직 (이벤트 처리 및 애니메이션 포함) 및 오디오 통합을 다룹니다. 필수 JavaScript 라이브러리 (Phaser, PI

뷰포트 메타 태그를 사용하여 모바일 장치에서 페이지 스케일링을 제어하려면 어떻게합니까?뷰포트 메타 태그를 사용하여 모바일 장치에서 페이지 스케일링을 제어하려면 어떻게합니까?Mar 13, 2025 pm 08:00 PM

이 기사에서는 Viewport Meta 태그를 사용하여 모바일 장치의 페이지 스케일링을 제어하여 폭과 최적의 응답 성 및 성능을위한 초기 스케일과 같은 설정에 중점을 둡니다. character count : 159

HTML5 알림 API를 사용하여 데스크탑 알림을 표시하는 방법은 무엇입니까?HTML5 알림 API를 사용하여 데스크탑 알림을 표시하는 방법은 무엇입니까?Mar 13, 2025 pm 07:57 PM

이 기사는 HTML5 알림 API를 사용하여 허가 요구 사항, 사용자 정의 및 브라우저 지원에 중점을 둔 데스크탑 알림을 표시하는 방법을 설명합니다.

클라이언트와 서버 간의 양방향 통신에 HTML5 WebSockets API를 어떻게 사용합니까?클라이언트와 서버 간의 양방향 통신에 HTML5 WebSockets API를 어떻게 사용합니까?Mar 12, 2025 pm 03:20 PM

이 기사에서는 실시간, 양방향 클라이언트 서버 커뮤니케이션을위한 HTML5 WebSockets API를 설명합니다. 클라이언트 측 (JavaScript) 및 서버 측 (Python/Flask) 구현에 대해 자세히 설명하여 확장 성, 상태 관리,

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경