浅谈HTML5新增和废弃的标签

2020-04-21 07:02:57易采站长站整理

source是视频源,可以有多种,当一种失败时将选择下一种,主要有如下3种:

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

注意:


<video src="img/a.mp4" controls="controls" poster="img/1.jpg">
您的浏览器太老了,请升级,视频下载<a href="#">地址</a>
</video>

多数的HTML5标签的innerHTML内容是浏览器不支持该标签时显示的内容。

事件绑定与监听的区别:


<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>事件绑定与监听的区别</title>
</head>

<body>
<button id="btnA">按钮A</button>
<button id="btnB">按钮B</button>
<script type="text/javascript">
var btnA = document.getElementById("btnA");
var btnB = document.getElementById("btnB");
btnA.onclick = function() {
alert("你点了一下");
}
btnA.onclick = function() {
alert("你又点了一下");
}

btnB.addEventListener("click",function(event){
alert("你点了一下");
},false);

btnB.addEventListener("click",function(event){
alert("你又点了一下");
},false);
</script>
</body>

</html>

使用on事件名的形式绑定事件后绑定会覆盖前面绑定的事件,也就是最后一个绑定的事件会生效;

使用addEventListener绑定事件则不会覆盖,可同时在一个元素上绑定多个相同的事件。

video API的属性与事件示例:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video 标签</title>
</head>
<body>
<video id="videoIce" width="800" height="600" controls="controls" poster="content/1.jpg">
<source src="content/iceage4.mp4" type="video/mp4"></source>
<source src="content/iceage4.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
</object> 当前浏览器不支持 video直接播放,点击这里下载视频: