HTML5 API简介一(Canvas,Audio/Video,Geolocation)

wjlgryx

浏览: 297658 次
性别:
来自: 北京

最近访客更多访客>>

Helkern

Helenhhj

cao510453

1729051657

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Html5 文章

HTML5 AIR Chrome Firefox HTML

1.Canvas
顾名思义，画布，你在上面画画

<!DOCTYPE html>
<html>
  <canvas id="canvas" style="border: 1px solid;"  width="250" height="250"> </canvas>
  <script>
	function drawTriangle(context){//画三角形
	    context.beginPath();
	    context.moveTo(0, 0);
	    context.lineTo(30, -30);
	    context.lineTo(60, 0);
	    context.lineTo(0, 0);
	    context.fillStyle = '#339900';
	    context.fill();
	    context.closePath();
	}
	function draw() {
	    var canvas = document.getElementById('canvas');//获取画布
	    var context = canvas.getContext('2d');//获取画笔

	    context.save();

	    context.translate(30, 60);//移动基准位置
	    drawTriangle(context);//画第一个三角形
	    context.stroke();

	    context.translate(60, 90);//移动基准位置
	    drawTriangle(context);//画第二个三角形
	    context.stroke();

	    context.restore();
	}
	window.addEventListener("load", draw, true);
  </script>
</html>

在浏览器里的样子

2.Audio/Video
无需插件，播放音频，视频，每个浏览器能支持的格式不一样，自己掂量吧

!DOCTYPE html>
<html>
  <audio controls>
    <source src="johann_sebastian_bach_air.ogg">
    <source src="johann_sebastian_bach_air.mp3">
    An audio clip from Johann Sebastian Bach.
  </audio>
</html>

Chrome中Audio的样子

如何在JS中控制Audio的播放

<!DOCTYPE html>
<html>
  <audio id="clickSound">
    <source src="johann_sebastian_bach_air.ogg">
    <source src="johann_sebastian_bach_air.mp3">
  </audio>

  <button id="toggle" onclick="toggleSound()">Play</button>

  <script type="text/javascript">
    function toggleSound() {
        var music = document.getElementById("clickSound");
        var toggle = document.getElementById("toggle");
        if (music.paused) {
          music.play();
          toggle.innerHTML = "Pause";
        }
        else {
          music.pause();
          toggle.innerHTML ="Play";
        }
    }
  </script>
</html>

Video播放和控制

<!DOCTYPE html>
<html>
  <video id="movies" controls onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true"
    width="400px" height="300px">
    <source src="Intermission-Walk-in.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="Intermission-Walk-in_512kb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  </video>
</html>

Chrome中Video的样子

3.Geolocation
获取用户地理位置，用户可以选择是否愿意，目前来说相当的不靠谱，fanqiang后可以在Firefox测试成功，因为Firefox使用的Google的地理服务，看看代码，也比较简单

<script type="text/javascript">
    function loadDemo() {
        if(navigator.geolocation) {//检测浏览器是否支持Geolocation
            navigator.geolocation.getCurrentPosition(updateLocation);
        }
    }
    function updateLocation(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        if (!latitude || !longitude) {           
            return;
        }
        document.getElementById("latitude").innerHTML = latitude;
        document.getElementById("longitude").innerHTML = longitude;
    }
</script>

分享到：

支持移动平台的Html5播放器 | HTML5资源

2011-05-09 13:22
浏览 1505
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 API简介一(Canvas,Audio/Video,Geolocation)

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 API简介一(Canvas,Audio/Video,Geolocation)

评论

发表评论

相关推荐

iframe 高度自适应

WordPress 博客添加新浪微博挂件：

HTML5 影音 ( Video ) 概論

HTML5 Audio Loops

处理火狐自动播放视频

教你用HTML5开发iPhone应用程序

很给力，20个HTML5视频播放器及代码

HTML 5 Video概述

支持移动平台的Html5播放器

HTML5资源

HTML5 Audio/Video 标签,属性,方法,事件

DIV实现隐藏与显示

HTML5+CSS3+JQuery打造自定义视频播放器

HTML 5 <video> preload 属性

HTML5 – Video

超過 23 個開源的 HTML5 影音播放器與框架

Building a better HTML5 video player with Glow

Ambilight для тэга video

怎样用js+html5实现视频的播放控制

22个HTML5的初级技巧

最近访客更多访客>>