|
新增标签 *
Html5新增了很多语义化标签，这些标签多为块元素，其表现形式与div完全一致，即没有特殊样式。但是div是无意义的块元素，而Html5新增的这些元素多为有意义的元素，例如header表达了头部的意思，在网页中任意暗含头部的结构都可以使用header标签。
article, section,aside,header,nav,footer,address......
此外，Html5还新增了一些功能性标签，但是由于其在各个浏览器中的表现形式不一致，我们很少使用这些元素，取而代之的是组件。这里不多做讨论。
progress 表示运行中的进度 等
input输入框
1.placeholder 用来描述输入字段预期值的提示信息。输入字段为空时显示
2.type的类型
可以设置为number，date等。type='number' 设置只能输入数字类型，火狐没效果，谷歌可以，兼容性差不建议使用
音视频
video视频
在video标签出现之前，如果想在网页中播放视频或者音频数据是非常困难的。H5中video标签可以向使用img显示图片一样简单去播放视频。
属性：
src 需要引入的视频资源地址
controls 是否显示视频的控件，比如播放暂停进度条音量全屏等。
autoplay 在视频就绪后马上播放。跟muted搭配使用，否则可能不能自动播放。
muted 视频的音频为静音。
loop 当视频完成播放后再次开始播放
volume 视频的音量 0～1
duration 视频的总时长
currentTime 当前播放的进度
paused 当前视频的状态是否暂停 暂停true
width 设置宽度
height 设置高度
方法：
play() 播放
pause() 暂停方法：
load() 重新加载当前视频
//controls 设置显示视频的控件 显示暂停播放进度条
实现效果：当然，你自己放你的音频上去
代码实现：
Document
播放
暂停
快进
快退
快倍速
慢倍速
播放
获得播放百分比
//1.获取视频
var video=document.getElementsByTagName('video')[0];
//2.获取音频
var btns=document.getElementsByClassName('btns')[0];
console.log(btns);
//3.判断按钮的文本内容、绑定事件
btns.onclick=function(){
//4.获取按钮内的事件 因为这里产生了点击 所以有点击事件
var text=event.target.innerText;
if(text == '播放'){
// console.log(video.volume); // 视频的音量
// console.log(video.duration); //视频的总长度
// console.log(video.cuttertTime); //视频当前播放的时长
// console.log(video.paused); //视频当前播放状态 true为暂停
video.play()
}
if(text == '暂停'){
video.pause()
}
if(text == '快进'){
video.currentTime +=10
video.play()
}
if(text == '快退'){
video.currentTime -=10
video.play()
}
if(text == '快倍速'){
console.log(video.playbackRate);
video.playbackRate *= 1.8
video.play()
}
if(text == '慢倍速'){
video.playbackRate *= 0.5
video.play()
}
}
//需求：2. 同一个按钮实现暂停播放
var play_btn = document.getElementById('play')
play_btn.onclick = function(){
if(video.paused){ //判断视频播放状态 true为暂停
video.play()
play_btn.innerText = '暂停'
}else{
video.pause()
play_btn.innerText = '播放'
}
}
// 需求：3.获得播放的百分比
var progress = document.getElementById('progress')
progress.onclick= function(){
var total = video.duration
var current = video.currentTime
var res = (current/total*100).toFixed(2) +'%'
console.log(res);
//将百分比存入div
var showprogress = document.getElementsByClassName('showprogress')[0]
showprogress.innerText = res
}
audio音频 audio元素和video类似，是用来播放音频的。其属性方法事件也几乎与video元素一致
|