1. 新的语义化标签
1.1 新元素
目的是使搜索引擎识别这些人为标签。
- <address> 标签定义元素地址
- <mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
- <time> 标签定义日期或时间,或者两者。
1.2 表单增强应用
1.2.1 input元素的type属性扩展
- search
- tel
使用pattern(正则)和maxlength限定输入格式
<input
type='tel'
value='' placeholder='请输入手机号码'
pattern='1[3-8][0-9]{9}'
title='请输入11位手机号'>
|
- url
- date
- color
- number
- range
在input后添加一个自定义标签<output name='result' id="num"></output>用来显示滑动数值
// 滑动时显示选择的值
var range = document.getElementById("num");
range.addEventListener("change", function() {
result.value = range.value;
})();
1.2.2 input通过属性进行表单验证
- required
标记当前input元素为必填项<input type="text" required>
- pattern
正则验证表单输入
1.2.3 其他有用属性
- autofocus
- form
- placeholder
- progress
表示进度条 <progress value="30" max="100"></progress>
- meter
max默认为1,min默认为0
<meter value="3" min="0" max="10">3/10</meter>
<meter value="0.6">60%</meter>
- contenteditable
让普通属性可编辑
<p
contenteditable="true">这里的内容是可编辑的</p>
1.3 使用音频和视频
音频
<audio controls="controls">
<source src="src/music.ogg" />
<source src="src/music.mp3" />
您的浏览器不支持audio标记
</audio>
|
- controls
- autoplay
- loop
默认false
- preload
none;metadata;auto(默认)
- volum
0-1之间
视频
<video controls="controls">
<!-- 不同浏览器支持格式不一样 -->
<source src="fun.ogg" type="video/ogg" />
<source src="fun.mp4" type="video/mp4" />
<source src="fun.ogv" type="video/ogg" />
<!-- 当浏览器不兼容video标签,就会将他以div方式解析 -->
SHIT 你的浏览器不支持!
</video>
|
不管是audio还是video都不要直接设置标签的src格式问题:每个浏览器的音视频格式支持不同。 希望兼容各种格式
如果HTML中遇到不能识别的标签,就会将该标签当做DIV(块级元素)
例如:
<video controls width="500"> //设了宽度不能设高度
<!-- html解析过程中会找其中第一个能认识的格式播放,一旦找到认识的视频格式,就不会再往后找了 -->
<source src="chrome.mp4">
<source src="chrome.ogv">
<source src="chrome.webm">
<span>shit 弱爆了 有木有</span> //兼容提示
</video>
video控件
|属性 |描述
|---------------------|---------------------------------------
|audioTracks |返回表示可用音轨的 AudioTrackList 对象
|autoplay |设置或返回是否在加载完成后随即播放音频/视频
|buffered |返回表示音频/视频已缓冲部分的 TimeRanges 对象
|controller |返回表示音频/视频当前媒体控制器的 MediaController 对象
|controls |设置或返回音频/视频是否显示控件(比如播放/暂停等)
|crossOrigin |设置或返回音频/视频的 CORS 设置
|currentSrc |返回当前音频/视频的 URL
|currentTime |设置或返回音频/视频中的当前播放位置(以秒计)
|defaultMuted |设置或返回音频/视频默认是否静音
|defaultPlaybackRate |设置或返回音频/视频的默认播放速度
|duration |返回当前音频/视频的长度(以秒计)
|ended |返回音频/视频的播放是否已结束
|error |返回表示音频/视频错误状态的 MediaError 对象
|loop |设置或返回音频/视频是否应在结束时重新播放
|mediaGroup |设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)
|muted |设置或返回音频/视频是否静音
|networkState |返回音频/视频的当前网络状态
|paused |设置或返回音频/视频是否暂停
|playbackRate |设置或返回音频/视频播放的速度
|played |返回表示音频/视频已播放部分的 TimeRanges 对象
|preload |设置或返回音频/视频是否应该在页面加载后进行加载
|readyState |返回音频/视频当前的就绪状态
|seekable |返回表示音频/视频可寻址部分的 TimeRanges 对象
|seeking |返回用户是否正在音频/视频中进行查找
|src |设置或返回音频/视频元素的当前来源
|startDate |返回表示当前时间偏移的 Date 对象
|textTracks |返回表示可用文本轨道的 TextTrackList 对象
|videoTracks |返回表示可用视频轨道的 VideoTrackList 对象
|volume |设置或返回音频/视频的音量
事件
|事件 |描述
|-----------------|------------------------------------------
|abort |当音频/视频的加载已放弃时
|canplay |当浏览器可以播放音频/视频时
|canplaythrough |当浏览器可在不因缓冲而停顿的情况下进行播放时
|durationchange |当音频/视频的时长已更改时
|emptied |当目前的播放列表为空时
|ended |当目前的播放列表已结束时
|error |当在音频/视频加载期间发生错误时
|loadeddata |当浏览器已加载音频/视频的当前帧时
|loadedmetadata |当浏览器已加载音频/视频的元数据时
|loadstart |当浏览器开始查找音频/视频时
|pause |当音频/视频已暂停时
|play |当音频/视频已开始或不再暂停时
|playing |当音频/视频在已因缓冲而暂停或停止后已就绪时
|progress |当浏览器正在下载音频/视频时
|ratechange |当音频/视频的播放速度已更改时
|seeked |当用户已移动/跳跃到音频/视频中的新位置时
|seeking |当用户开始移动/跳跃到音频/视频中的新位置时
|stalled |当浏览器尝试获取媒体数据,但数据不可用时
|suspend |当浏览器刻意不获取媒体数据时
|timeupdate |当目前的播放位置已更改时
|volumechange |当音量已更改时
|waiting |当视频由于需要缓冲下一帧而停止
<
video
id=
"video"
src=
"fun.mp4"
controls
></
video
>
<
div
>
<
progress
id=
"progress"
min=
"0"
max=
"100"
value=
"0"
style=
"
width
:
500
px"
></
progress
>
<
span
>00:00</
span
>/<
span
>02:44</
span
>
</
div
>
<
div
>
<
button
id=
"btn_play"
>
播放
</
button
>
<
button
id=
"btn_pause"
disabled
>
暂停
</
button
>
<
button
id=
"btn_muted"
>
静音
</
button
>
<
input
id=
"volume"
type=
"range"
min=
"0"
max=
"1"
step=
"0.1"
>
<
button
id=
"btn_fullscreen"
>
全屏
</
button
>
<
button
id=
"btn_speed_up"
>
加速
</
button
>
<
button
id=
"btn_speed_down"
>
减速
</
button
>
<
button
id=
"btn_forward"
>
前进
5S</
button
>
<
button
id=
"btn_back"
>
后退
5S</
button
>
</
div
>
步骤:
1
隐藏
controls
2
加上控制元素
3
点击事件分别实现不同效果
<
script
>
var
video
=
document
.
getElementById
(
'video'
);
var
btn_play
=
document
.
getElementById
(
'btn_play'
);
//
注册点击事件
// addEventListener
将事件属性的
on
去掉 作为第一个参数传入
btn_play
.
addEventListener
(
'click'
,
function
() {
video
.play();
btn_play
.
disabled
=
true
;
btn_pause
.
disabled
=
false
;
});
var
btn_pause
=
document
.
getElementById
(
'btn_pause'
);
btn_pause
.
addEventListener
(
'click'
,
function
() {
video
.
pause
();
btn_play
.
disabled
=
false
;
btn_pause
.
disabled
=
true
;
});
var
btn_muted
=
document
.
getElementById
(
'btn_muted'
);
btn_muted
.
addEventListener
(
'click'
,
function
() {
//
交互变化
true
或
false
video
.
muted
=
!
video
.
muted
;
// if (video.muted) {
//
代表当前已经静音
// btn_muted.innerHTML = "
取消静音
";
// } else {
// btn_muted.innerHTML = "
静音
";
// }
btn_muted
.
innerHTML
=
video
.
muted
?
"
取消静音
"
:
"
静音
"
;
});
var
volume
=
document
.
getElementById
(
'volume'
);
volume
.
addEventListener
(
'change'
,
function
(e) {
//
拿一下当前
volume
的值
video
.
volume
=
volume
.
value
;
});
var
btn_speed_up
=
document
.
getElementById
(
'btn_speed_up'
);
btn_speed_up
.
addEventListener
(
'click'
,
function
(e) {
//
加速
video
.
playbackRate
+=
0.1
;
});
var
btn_speed_down
=
document
.
getElementById
(
'btn_speed_down'
);
btn_speed_down
.
addEventListener
(
'click'
,
function
(e) {
//
减速
video
.
playbackRate
-=
0.1
;
});
var
btn_forward
=
document
.
getElementById
(
'btn_forward'
);
btn_forward
.
addEventListener
(
'click'
,
function
(e) {
video
.
currentTime
+=
5
;
});
var
btn_back
=
document
.
getElementById
(
'btn_back'
);
btn_back
.
addEventListener
(
'click'
,
function
(e) {
video
.
currentTime
-=
5
;
});
进度条的值显示
//
注册视频播放状态变化事件
video
.
addEventListener
(
'timeupdate'
,
function
() {
// console.log(1111);
progress.
value
= (
video
.
currentTime
/
video
.
duration
) *
100
;
});
全屏
需要做兼容性处理
function
fullScreen
(ele) {
if
(ele.requestFullScreen) {
ele.requestFullScreen();
}
else if
(ele.webkitRequestFullScreen) {
ele.webkitRequestFullScreen()
}
else if
(ele.mozRequestFullScreen) {
ele.mozRequestFullScreen()
}
else if
(ele.oRequestFullScreen) {
ele.oRequestFullScreen()
}
else if
(ele.msRequestFullScreen) {
ele.msRequestFullScreen()
}
}
var
btn_fullscreen
=
document
.
getElementById
(
'btn_fullscreen'
);
btn_fullscreen
.
addEventListener
(
'click'
,
function
() {
// video.webkitRequestFullScreen();
fullScreen
(
video
);
// fullScreen(document.body);
});
</
script
>