HTML5视频音频与画布-优快云博客

本文链接：https://blog.youkuaiyun.com/New_Target/article/details/41866177

参照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初学第一天