HTML5初学第一天
来源:互联网 发布:海口有没有mac 编辑:程序博客网 时间:2024/05/16 02:46
参照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>
- HTML5初学第一天
- 初学javascript--第一天
- 初学.net第一天:
- 初学Struts1第一天
- matlab初学 第一天
- unity3d初学第一天
- 初学python第一天
- html5学习---第一天
- html5学习第一天
- Html5学习第一天
- HTML5学习第一天
- HTML5第一天
- html5第一天
- 初学OC第一天整理
- 初学Objective - C 第一天
- shell编程初学(第一天)
- Unreal Engine4 初学第一天
- 初学oracle 第一天笔记
- Session ID 是如何产生的?
- Cygwin的卸载
- Hadoop中LOG4J问题
- Cocos2d-x中libcurl库的使用(1)查看库的版本信息
- hadoop+zookeeper+hbase安装
- HTML5初学第一天
- 测试博文
- Xcode下搭建python开发环境
- Hadoop常见问题及解决办法
- 未能加载文件或程序集“ExcelHelper”或它的某一个依赖项。试图加载格式不正确的程序。
- Hive-0.7.1安装(Ubuntu Server11.04+Hadoop-0.20.2)
- 第十六周上及项目一
- qt qss文件定制滚动条
- HBase-0.90.3安装(Ubuntu Server11.04+Hadoop-0.20.2)