目录
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格式。
输出:
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使得在页面中加载音频元素变得非常简单。
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="/static/imghwm/default1.png" data-src="fish.png" class="lazy" style="max-width:90%" draggable="true" id="img11" ondragstart="drag(event)" / alt="三天学会HTML5 ——多媒体元素的使用" >
3. 输出
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>
输出:
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 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>
输出:
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事件来捕捉并返回给服务器来在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>
执行:
如何实现自定更新位置信息呢?
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 地图的引用
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>
运行:

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

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

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

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

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

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

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

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


핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기

WebStorm Mac 버전
유용한 JavaScript 개발 도구

ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
