- 阅读权限
- 255
- 威望
- 1 级
- 论坛币
- 83512 个
- 通用积分
- 13760.6830
- 学术水平
- 673 点
- 热心指数
- 828 点
- 信用等级
- 739 点
- 经验
- 426448 点
- 帖子
- 17368
- 精华
- 0
- 在线时间
- 3615 小时
- 注册时间
- 2016-7-9
- 最后登录
- 2026-1-9
|
昨日阅读实践3小时,累计476hours
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" onpause="showImg(false);"></video>
<img id="MyImg" src="MyImg.png" />
</body>
</html>
当然可以让img大小更大,完全遮住播放界面
|
-
总评分: 论坛币 + 50
查看全部评分
|