HMTL5+CSS3-充实笔记0606

352

收藏 2019-06-06

time元素：定义日期和时间

datetime属性指定机器读取的日期和时间
pubdate属性，表示article元素的发布日期（此属性是一个可选的布尔值）

新增非主题结构元素

header元素
hgroup元素：对header元素标题及其子标题进行分组
footer元素：定义区块的脚注（可以是article，也可以是section元素）
address元素：定义文档作者、拥有者的联系信息

ch3.HTML5音频和视频

video元素，支持Ogg/MPEG4/WebM格式
audio元素，支持Ogg Vorbis/MP3/Wav

HTML5中播放音频的代码：
<audio src="song.ogg" controls="controls">浏览器不支持</audio>
HTML5播放视频的代码：
<video src="movie.mp4" controls="controls">浏览器不支持</video>

检测浏览器是否支持HTML5视频：可以编写JS代码测试
这个对象返回是否支持document.createElement('video').canPlayType，然后在代码中可以更详细地判断对ogg/h264编码等测试

下面给一个HTML5中的显示视频/音频实例：

<!DOCTYPE html>
<html>
<head>
<title>3.4.1</title>
<script type="text/javascript">
      var video;
      var img;
      function init(){
         video = document.getElementById("MyVideo");
         video.style.position = "absolute";
         video.style.width = "400px";
         video.style.height = "300px";
         video.style.left = "50px";
         video.style.top = "50px";
         img = document.getElementById("MyImg");
         img.style.position = "absolute";
         img.style.width = "340px";
         img.style.height = "160px";
         img.style.left = "80px";
         img.style.top = "120px";
         img.style.zIndex = 2;
         img.hidden = true;
      }

      function showImg(flag){
         img.hidden = flag;
      }
</script>
</head>
<body>
<video id="MyVideo" loop autoplay="true" src="movie.mp4" controls="controls"></video>
<img id="MyImg" src="MyImg.png" />
</body>
</html>

当然可以让img大小更大，完全遮住播放界面