3.04.06 HTML5
1. 语义化标签
- HTML5 新增了许多语义化标签
- 优点
- 页面结构清晰
- 有利于搜素引擎优化
<body>
<!-- 语义化标签 -->
<!-- 1. 页面结构清晰 -->
<!-- 2. 有利于搜索引擎优化 （SEO） -->
<header></header>
<nav></nav>
<main>
<aside></aside>
<article></article>
</main>
<section></section>
<footer></footer>
</body>
2. 音频视频标签
- 音频标签
- 语法：
<audio src="../mp3/薛之谦 - 慢半拍 (Live).mp3" controls loop muted>播发</audio>
- src 填写音频文件路径
- controls 显示控件
- loop 循环播放
- muted 静音播放
- 视频标签
<video src="../mp3/小视频.mp4" controls autoplay muted loop></video>
- src 填写音频文件路径
- controls 显示控件
- loop 循环播放
- autoplay 自动播放 部分浏览器需要设置了静音状态，autoplay才生效
- muted 静音播放
3.表单标签
- fieldset、datalist
//fieldset 表单信息分组
//legend 文本说明
//datalist 下拉选项
//outer 输出标签 类似于span标签
<div>
<input type="text"> + <input type="text"> = <output>100</output>
</div>
<fieldset>
<legend>老师</legend>
<div>
<input type="text" placeholder="老师姓名">
</div>
</fieldset>
//input的list属性需要与datalist的id属性对应
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
- progress、meter
<div>
<!-- 进度条标签-->
<progress
max="100"
min="0"
value="60"
></progress>
</div>
<div>
<!-- 度量尺标签 -->
<meter
max="100"
min="0"
value="50"
></meter>
</div>
- input元素的type属性
<form action="">
<!--
type 类型：
button 按钮
checkbox 多选框
color 颜色
date 日期
datetime
datetime-local
email 邮件
file 文件
hidden 隐藏
image 图像
month
number 数字
password 密码输入框
radio 单选框
range
reset 重置
search
submit 提交
tel
text 文本输入框
time
url
week
-->
<div>
<input type="text" placeholder="文本">
</div>
<div>
<input type="password" placeholder="密码">
</div>
<div>
<input type="email" placeholder="邮箱">
</div>
<div>
<input type="number" placeholder="数字">
</div>
<div>
<input type="color" value="#ff0000">
</div>
<div>
<input type="range">
</div>
<div>
<input type="time">
</div>
<div>
<input type="date">
</div>
<div>
<input type="tel">
</div>
<div>
<input type="url">
</div>
</form>
- input的其他属性
- autofocus 自动获取光标
- pattern 填写正则表达式(标签里面不能用//斜线，/g等会失效)
- required 输入框不能为空
- disabled 只读不写（不能输入）
- readonly 禁止输入（点击）
<input
disabled
readonly
autofocus
pattern="\d{1,}"
required
type="text"
placeholder="请输入数字"
name="num">
4.阻止默认行为
- return false 可以阻止默认行为
- event.preventDefault();可以阻止默认行为
<form action="">
<input type="submit" class="sub">
</form>
<a href="./03-表单标签.html" class="a">跳转</a>
<script>
//阻止默认行为
document.querySelector(".a").onclick=function(){
return false;
//event.preventDefault();
}
document.querySelector(".sub").onclick=function(){
//return false;
event.preventDefault();
}
</script>
5.audio标签对象的api
- 一般都不直接使用audio标签去使用播放器，而是使用audio去装音频文件，选择不给其controls属性去隐藏它，然后自己写样式并借助audio标签对象的api去封装音乐播放器
- audio.play(); 播放音频
- audio.pause(); 暂停音频
- audio.duration 音频总时长 number类型
- audio.currentTime 音频当前播放时长 number类型
- audio.oncanplay = function(){自定义函数逻辑} 触发时机:浏览器已经可以播放媒体，但是预测已加载的数据不足以在不暂停的情况下顺利将其播放到结尾（即预测会在播放时暂停以获取更多的缓冲区内容）
- audio.ontimeupdate = function(){自定义函数逻辑} 触发时机:只要音频在播放，就会执行这个事件
- audio.οnended=function(){自定义函数逻辑} 触发时机:只要音频播放结束，就会执行这个事件
- 事件也可以通过addEventListener的方式给audio标签对象添加，如：
/* audio.addEventListener("ended",function(){
audio.play();
}) */
//等价于
audio.onended=function(){
audio.play();
}
- 小技巧：一般是光标与元素的移动要同步，都需要：光标坐标 - 元素外部距离 - 元素本身宽度/2 ,即如：event.clientX - bar.offsetWidth / 2 - container.offsetLeft
6.video标签对象的api
- video.play(); 播放视频
- video.pause(); 暂停视频
- video.duration 视频总时长 number类型
- video.currentTime 视频当前播放时长 number类型
- video.playbackRate 设置播放的倍速 video.playbackRate = 2.5
- video.oncanplay = function(){自定义函数逻辑} 触发时机:浏览器已经可以播放媒体，但是预测已加载的数据不足以在不暂停的情况下顺利将其播放到结尾（即预测会在播放时暂停以获取更多的缓冲区内容）
- video.ontimeupdate = function(){自定义函数逻辑} 触发时机:只要视频在播放，就会执行这个事件
- video.οnended=function(){自定义函数逻辑} 触发时机:只要视频播放结束，就会执行这个事件
7.举个例子
- 自己封装视频播放器
- HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音乐播放器</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- 视频播放器区域 -->
<section class="section">
<div class="video-box">
<video src="" id="video"></video>
</div>
</section>
<footer class="footer">
<!-- 编写控件 -->
<div class="control-box">
<div class="container">
<div class="left">
<span id="btnToggle">点此播放</span>
</div>
<div class="mid">
<ul class="progress">
<li><span class="bar"></span></li>
</ul>
</div>
<div class="right">
<span id="curBox">00:00</span> / <span id="tolBox">00:00</span>
</div>
</div>
</div>
</footer>
<script src="./js/index.js"></script>
</body>
</html>
- CSS:
style.css
body {
/* 禁止选择多媒体文件、文本 */
user-select: none;
}
/* 版心 */
.container {
width: 1200px;
margin: 0 auto;
}
.section {
padding: 40px 50px 0 ;
}
.video-box {
width: 1200px;
margin: 0 auto;
background-color: #333;
text-align: center;
height: 600px;
line-height: 600px;
overflow: hidden;
}
.video-box video {
/* width: 100%; */
vertical-align: middle;
}
.footer {
width: 100%;
height: 50px;
/* position: fixed; */
bottom: 0;
left: 0;
z-index: 1000;
}
/* 控件的样式 */
.control-box {
width: 100%;
height: 50px;
}
.control-box > div {
position: relative;
height: 50px;
box-sizing: border-box;
padding-left: 100px;
padding-right: 200px;
background-color: rgba(0,0,0,1);
}
.control-box > div .left ,
.control-box > div .right {
position: absolute;
top: 0;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
}
.control-box > div .left {
width: 100px;
left: 0;
/* background-color: red; */
}
.control-box > div .right {
width: 200px;
right: 0;
/* background-color: green; */
}
.control-box > div .left .fa {
cursor: pointer;
}
.control-box > div .mid {
width: 100%;
height: 50px;
display: flex;
align-items: center;
}
.progress {
width: 100%;
height: 10px;
background-color: #ccc;
position: relative;
}
.progress li {
width: 0px;
height: 10px;
background-color: red;
}
.progress li .bar {
position: absolute;
left: 0px;
top: -10px;
width: 30px;
height: 30px;
background-color: red;
border-radius: 20px;
cursor: pointer;
}
reset.css:
body {
margin: 0;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
input ,
button {
box-sizing: border-box;
border: 0;
background-color: transparent;
}
- js:
// 需求：
// 视频播放器
// 1、实现电影的播放/暂停
// 2、实现播放的进度条
// 3、式化视频播放时间
// 编码：
// 1. 获取页面的相关标签
var video = document.querySelector("#video");
// 打印video标签
console.dir(video);
var btnToggle = document.querySelector("#btnToggle");
var progress = document.querySelector(".progress");
var line = document.querySelector(".progress li");
var bar = document.querySelector(".progress li .bar");
var container = document.querySelector(".container");
var curBox = document.querySelector("#curBox");
var tolBox = document.querySelector("#tolBox");
var isMouseDown = false;
// 滑块当前的位置(a)
var x = 0;
// 滑块可滑动的最大值 (b)
var total = progress.offsetWidth - bar.offsetWidth;
// 记录视频总时长(c)
var duration = 0;
// 视频当前播放时长(d)
var current = 0;
// 布尔值控制播放或暂停
var isPlay = true;
// 设置视频路径
video.setAttribute("src","movies/movie.mp4");
// 设置播放速度(速率) .5 1 1.5 2 2.5
// video.playbackRate = 1;
// 2.事件绑定
btnToggle.onclick = function(){
if(isPlay){
// 播放音乐
video.play();
btnToggle.textContent = "暂停";
}else {
// 暂停音乐
video.pause();
btnToggle.textContent = "播放";
}
// 开关
isPlay = !isPlay;
}
// 3. 处理进度条的逻辑
// 鼠标按下
bar.onmousedown = function(){
isMouseDown = true;
}
// 鼠标移动
document.onmousemove = function(event){
if(isMouseDown) {
// 计算.bar标签在progress标签的坐标位置
x = event.clientX - bar.offsetWidth / 2 - container.offsetLeft - 100;
console.log(container.offsetLeft);
if(x < 0){
x = 0;
}
if(x > total){
x = total;
}
// 进度条滑块位置 = 视频文件播放的位置 = a / c = c / d
var demo = x / total;
// 计算视频当前播放时长
current = demo * duration;
// 设置视频当前播放时长
video.currentTime = current;
// console.log(demo);
// 设置进度条的效果
line.style.width = x + "px";
bar.style.left = x + "px";
// 设置视频当前播放的时间
// 格式化时间
var arr = formatTime(current);
// console.log(arr);
// 渲染数据
curBox.innerHTML = arr[1]+":"+arr[2];
}
}
// 鼠标松开
document.onmouseup = function(){
isMouseDown = false;
}
// 4. 视频文件播放行为
video.oncanplay = function(){
// 获取视频总时长（秒数）
duration = video.duration;
// console.log("总时长:",duration);
// 格式化时间
var arr = formatTime(duration);
// console.log(arr);
// 渲染数据
tolBox.innerHTML = arr[1]+":"+arr[2];
}
// 5. 监听视频文件的播放(只要视频在播放，就会执行这个事件)
video.ontimeupdate = function(){
// console.log("test");
// 获取视频当前播放的时长
current = video.currentTime;
// console.log("当前播放时长:",current);
// 计算比例
var v = current / duration;
// 计算x
x = v * total;
// 设置进度条的效果
line.style.width = x + "px";
bar.style.left = x + "px";
// 设置视频当前播放的时间
// 格式化时间
var arr = formatTime(current);
// console.log(arr);
// 渲染数据
curBox.innerHTML = arr[1]+":"+arr[2];
}
// 6. 编写函数 格式化时间
function formatTime(seconds){
// 格式化小时、分钟 、 秒
var h = Math.floor(seconds / 3600);
var m = Math.floor(seconds % 3600 / 60);
var s = Math.floor(seconds % 60);
h = h < 10 ? "0"+h : h;
m = m < 10 ? "0"+m : m;
s = s < 10 ? "0"+s : s;
// 返回格式化时分秒
return [h , m , s];
}
// 7. 监听播放结束时事件，还想继续播放
video.addEventListener("ended",function(){
// console.log("test 播放结束");
// 播放视频
video.play();
})
// 比例
// a: 滑块在progress标签的位置
// b: 滑块可滑动的最大值 (total)
// c: 视频文件播放的当前时长 (current)
// d: 视频文件总时长 (duration)
// var demo = a / b = c / d;
// 只要有3个数据是已知的，就可以求第四个数据
180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
