新增属性
-
palceholder 占位符 -
input中的type属性新增的值：都有兼容性的问题 -
contenteditable：元素是否可编写 尽量不要嵌套使用 ie都能使用 -
draggable ：是否可拖拽
-
被拖拽物体：
-
ondragstart 开始拖拽 -
ondrag 进行中 -
ondragend 拖拽结束
-
目标区域
-
ondragenter 进入目标区域 -
ondragover 在目标区域拖拽进行中 在over中阻止默认事件(ondragleave) 让ondrop事件执行 -
ondragleave 离开目标区域 -
ondrop 放下(松开鼠标)
-
拖拽时鼠标样式
-
ondragstart中改变样式 e.dataTransfer.effectAllowed = 'link'; -
ondrop中改变样式 e.dataTransfer.dropEffect = 'link';
新增的表单元素
-
?? -
<progress>:进度条 -
<output>:接受计算后的结果
新增的表单属性
-
autofocus：自动获取焦点 false/true 只能对一标签进行聚焦 -
mulitiple ： 可以输入多个值 false/true -
required：当前元素必须填写内容
语义化标签
一个网站全全部用div可以实现
在H5中又添加了新的语义化标签
-
header 头部 -
footer 底部 -
nav 导航条 -
aside 侧边栏 -
article 文章 -
section 段落
多媒体元素
-
音频视频 -
绘图 线上画板 -
echarts two.js three.js 数据可视化 -
localStorage sessionStorage 客户端本地存储
视频video
?
file:///E:/yechen/%E8%B5%84%E6%96%99/0903/%E8%A7%86%E9%A2%91%E8%B5%84%E6%BA%90?lastModify=1633534148
file:///E:/yechen/%E8%B5%84%E6%96%99/0903/%E8%A7%86%E9%A2%91%E8%B5%84%E6%BA%90?lastModify=1633534153
行盒 具有宽高?
视频格式
? ? ? ? WebM ? ? OGG ? ? MP4
IE9+ NO NO YES chrome6+ yes yes yes firefox3.6+ yes yes no safari5+ no no yes oera10.6+ yes yes no
使用video最好提供至少两种视频格式的文件资源：OGG MP4
video的属性
-
controls 视频播放控件 -
autoplay 设置自动播放 浏览器禁止视频自动播放 ，此属性是无效的
-
设置视频静音：muted ="true" -
使用js调用play() 让视频播放
-
currenTime：获取/设置当前播放时间点 单位s -
duration：获取影片总时长 -
ended：判定视频是否播放结束 true/false -
loop:是否让视频循环播放 -
muted：设置/获取视频是否静音 -
volume: 设置/获取视频音量,0-1 默认为1 在视频静音状态下 调节视频音量无效
自定义播放
<!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>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet"
href="https://at.alicdn.com/t/font_2790010_9pbydpo91y.css?spm=a313x.7781069.1998910419.67&file=font_2790010_9pbydpo91y.css">
<link rel="stylesheet" href="1.css">
<script src="1.js" async></script>
</head>
<body>
<div class="container">
<video src="birds.mp4"></video>
<div class="menu clearfix">
<div class="on">
<span class="iconfont icon-Controls-71"></span>
<span class="iconfont icon-zanting"></span>
</div>
<div class="time">00:00/00:00</div>
<div class="quick">
<ul class="quickly">
<li>0.5</li>
<li>1.0</li>
<li>1.25</li>
<li>1.5</li>
<li>2.0</li>
</ul>
<div class="quick-text">速度</div>
</div>
<!-- 全屏 -->
<div class="all">
<span class="iconfont icon-quanping"></span>
</div>
<!-- 进度条 -->
<div class="progress">
<div class="line"></div>
<div class="ball"></div>
</div>
</div>
</div>
</body>
</html>
css部分
.container{
width: 900px;
height: 500px;
position: relative;
}
.container video{
width: 900px;
height: 500px;
object-fit: cover;
}
.menu{
width: 900px;
height: 50px;
background-color: rgb(0, 0, 0,0.35);
position: absolute;
bottom: 0;
left: 0;
}
.on{
width: 50px;
height: 50px;
font-size: 32px;
line-height: 50px;
text-align: center;
margin-left: 20px;
float: left;
}
.iconfont{
font-size: 32px;
}
.icon-Controls-71{
display: block;
}
.icon-zanting{
display: none;
}
.time{
width: 100px;
height: 40px;
line-height: 40px;
margin: 5px 30px;
float: left;
}
.quick{
width: 50px;
height: 200px;
position: absolute;
bottom: 0;
right: 100px;
color: white;
}
.quick-text{
width: 50px;
height: 50px;
line-height: 50px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
.quickly{
display: none;
}
.quickly li{
width: 50px;
height: 30px;
text-align: center;
}
.quickly li:hover{
color: red;
}
.quick:hover .quickly{
display: block;
}
.all{
width: 100px;
height: 50px;
float: right;
text-align: center;
line-height: 50px;
}
.progress{
width: 900px;
height: 20px;
position: absolute;
bottom: 40px;
left: 0;
}
.line{
width: 1px;
height: 5px;
background-color: rgb(20, 137, 204);
position: absolute;
left: 0;
top: 5px;
}
.ball{
width: 12px;
height: 12px;
border-radius: 50%;
background-color: white;
position: absolute;
bottom: 8px;
left: -6px;
}
?js部分
var video = document.getElementsByTagName('video')[0];
var container = document.getElementsByClassName('container')[0];
var memu = document.getElementsByClassName('menu')[0];
var on = document.getElementsByClassName('on')[0];
var controls = document.getElementsByTagName('span')[0]
var zanting = document.getElementsByTagName('span')[1]
var quanping = document.getElementsByTagName('span')[2]
var line = document.getElementsByClassName('line')[0];
var ball = document.getElementsByClassName('ball')[0];
var progress = document.getElementsByClassName('progress')[0]
var time = document.getElementsByClassName('time')[0];
// var total = video.duration;
var value = null;
function add(a){
if(a<10){
a = '0' + a
}
return a;
}
on.onclick = function () {
if (zanting.style.display === 'block') {
zanting.style.display = 'none'
controls.style.display = 'block'
video.pause()
} else {
zanting.style.display = 'block'
controls.style.display = 'none'
video.play()
}
}
// // 进度条
// progress.onclick = function (e) {
// line.style.width = e.offsetX + 'px'
// ball.style.left = e.offsetX - 6 + 'px'
// }
// 时间
var timer = setInterval(function(){
// 更改整个div内容
// 获取播放点 和 总时长
var playTime = video.currentTime;
var total = video.duration;
// 将两个数据单位为s 转换成时间格式
// 60/60 -> 分钟
// 60%60 -> 剩余的秒
// 小于10的数据 补0
if(video.ended){
zanting.style.display = 'none'
controls.style.display = 'block'
}
var min1 = parseInt(playTime/60)
var sec1 = parseInt(playTime%60)
var min2 = parseInt(total/60)
var sec2 = parseInt(total%60)
min1 = add(min1)
sec1 = add(sec1)
min2 = add(min2)
sec2 = add(sec2)
// console.log(min1,min2,sec1,sec2);
time.innerHTML= min1 + ':' + sec1 +'/' + min2 + ':' + sec2;
var t = playTime/total * 900
line.style.width = t + 'px';
ball.style.left = t + 'px';
},1/value)
// 进度条
progress.onclick = function (e) {
video.currentTime = e.offsetX/900 * video.duration
line.style.width = e.offsetX + 'px'
ball.style.left = e.offsetX + 'px'
video.play()
}
|