html5新增的视频播放器属性布局
首先给大家看看最终实验的图形
当鼠标放到视频上面时候,显示所有小按钮,当鼠标移走就不显示所有小按钮。
视频的属性是:video标签
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
video:html5新增属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放 |
muted | muted | 规定视频的音频输出应该被静音。 |
poster | URL | 规定视频下载时显示的图像,或者在用户点击播放按钮前显示 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
视频的页面侧面有一些小按钮。这些按钮是一些小图片,可以通过应用JavaScript,实现点击事件,控制小图片的显示。
下面来看看具体的实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.sty {
width: 600px;
height: 380px;
background-color: black;
}
.one {
width: 40px;
height: 200px;
display: flex;
flex-wrap: wrap;
align-items: center;
margin-left: -40px;
z-index: 2;
}
.content {
display: flex;
align-items: center;
}
</style>
<script>
function fun1() {
var p = document.getElementById('idname');
p.style.opacity = 1;
}
function fun2() {
var p = document.getElementById('idname');
p.style.opacity = 0;
}
</script>
<body>
<div class="content" οnmοuseοver="fun1()" οnmοuseοut="fun2()">
<video class="sty" src="movie.mp4" controls autoplay></video>
<div id="idname" class="one">
<div class="oneimg1"><a href="#"><img src="fenxiang.png" alt=""></a></div>
<div><img src="huazhixianxing.png" alt=""></div>
<div><img src="suoping.png" alt=""></div>
<div><img src="zan.png" alt=""></div>
</div>
</div>
</body>
</html>
以上代码用到了一下的图片和视频,视频我就不传了,我把小图片传了。