您的位置：首页 > Web前端 > HTML5

HTML5初学第一天

2014-12-11 14:27 375 查看

参照linux公社里面的pdf教程，今天跟着学习了三个小控件的内容，分别为video，audio和canvas。

video主要是作为html5中的视频播放控件，在video控件的头部，你需要指定播放器显示的大小，同时还必须带上一个播放控制控件——controls，这个空间在audio中同样需要，然后在video控件中插入source视频源文件控件，在source中需要指定视频播放源文件的路径和对应的文件类型，当然，由于浏览器支持的问题，你还必须在中间加入对于浏览器不支持的文字提示。

audio跟video在很大程度上有相似之处，不过audio只是用来播放音频的，同样的也需要在头部指定controls控件，在source中配置好源音频文件的路径和格式，对于不同浏览器的支持文字提示也不可缺少。

canvas是html5使用JavaScript在网页上绘制图像的控件，以这句代码为例：<canvas id="myCanvas" width="200" height="100"></canvas>，其中，id就是canvas的元素id，宽为width，height为高度，由于canvas本身没有绘图能力，所以所有的绘制工作都是在JavaScript内部完成的。附上三段代码以供理解：

（1）video demo:

<video width="480" height="360" controls="controls">

<source src="test.ogg" type="video/ogg">

<source src="test.mp4" type="video/mp4">

Your browser doesnot support the video tag.

</video>

（2）audio demo:

<audio controls="controls">

<source src="All In.ogg" type="audio/ogg">

<source src="All In.mp3" type="audio/mpeg">

Your browser does not support the audio tag.

</audio>

（3）悬停显示坐标:

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

body

{

font-size:70%;

font-family:verdana,helvetica,arial,sans-serif;

}

</style>

<script type="text/javascript">

function cnvs_getCoordinates(e)

{

x=e.clientX;

y=e.clientY;

document.getElementById("xycoordinates").innerHTML="Coordinates:(" + x + "," + y + ")";

}

function cnvs_clearCoordinates()

{

document.getElementById("xycoordinates").innerHTML="";

}

</script>

</head>

<body style="margin:0px;">

<p>把鼠标悬停在下面的矩形上可以看到坐标:</p>

<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3"

onmousemove="cnvs_getCoordinates(event)"

onmouseout="cnvs_clearCoordinates"></div>

<br/>

<br/>

<br/>

<div id="xycoordinates"></div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航