视屏
Web站点上的视屏一直到现在为止,任然不存在一项只在网页上显示视屏的标准,大多数视屏是通过插件来显示的。但是,并不是所有浏览器都拥有同样的插件。HTML5规定了一种通过video来包含视屏的标准方法。
video元素提供了播放、暂停、音量控件来控制视频,它支持三种视屏格式,分别是MP4、WebM、Ogg
video视频中的属性
autoplay 视频在就绪后马上播放。
controls 向用户显示控件,比如播放按钮。
height 设置视频播放器的高度。
loop 当媒介文件完成播放后再次开始播放。
muted 视频的音频输出为静音。
poster 正在下载时显示的图像,直到用户点击播放按钮。
preload 在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
src 要播放的视频的 URL。
width 视频播放器的宽度。
video元素默认的宽高为300*150
通过js控制的属性分别为:
enden : 是否播放到结束
paused : 当前是否处于暂停状态
currentTime : 播放到的当前时间
duration : 影片的总时长
play() : 开始播放
pause() : 暂停播放
load() :重新加载
举例
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
video{
width: 500px;
height: 280px;
border: 1px solid;
}
</style>
<body>
<video src="cherryMV.mp4" controls="controls">
</video>
<script type="text/javascript">
</script>
</body>
</html>
效果图:
需要注意的是video元素在引入视频的时候需要加上 controls 属性,否则就会只是一张图片,但是在这里不建议使用,最好自己写播放控件,第一个原因是controls属性在不同的浏览器上显示的播放控件会有所差别,而且兼容性不好;第二个原因是因为这种自带的控件在同一个浏览器上显示的都一样,在用户看来千篇一律的,没有新颖感。所以我建议还是自己写控件比较好。
以下是我个人写的一个小案例,自己写的控件,给大家参考一下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
video{
top: 0px;
left: 0px;
width: 800px;
height: 500px;
position: relative;
z-index: 0;
}
.p1{
width: 80px;
height: 80px;
position: absolute;
margin-left: 400px;
margin-top: 250px;
z-index: 2;
cursor: pointer;
}
.p2{
width: 80px;
height: 80px;
position: absolute;
margin-left: 400px;
margin-top: 250px;
z-index: 2;
cursor: pointer;
}
.top{
width: 800px;
height: 500px;
/*border: 1px solid;*/
}
.cent{
position: absolute;
width: 800px;
height: 450px;
background-color: #111;
opacity: 0.3;
margin-top: -508px;
display: none;
}
.gg{
position: absolute;
z-index: 1;
margin-left: 320px;
margin-top: 155px;
/*display: none;*/
}
.but{
width: 700px;
height: 10px;
border-radius: 5px;
border:1px solid;
position: absolute;
top: 470px;
left: 50px;
background-color: #ccc;
}
.p3{
width: 40px;
height: 40px;
position: absolute;
margin-top: -68px;
}
.qup{
color: #ccc;
margin-top: -50px;
margin-left: 765px;
position: absolute;
cursor: pointer;
}
</style>
<body>
<div class="top">
<img src="imgs/pause.png" class="p2">
<img src="imgs/play.png" class="p1">
<img src="imgs/clothes04.jpg" class="gg">
<video src="res/strawberry1.mp4"></video>
<!-- <img src="imgs/pause02.png"> -->
<img src="imgs/play02.png" class="p3">
<span class="qup">全屏</span>
<div class="but"></div>
</div>
<div class="cent"></div>
</body>
<script type="text/javascript">
var vie = document.getElementsByTagName("video")[0];
var p1 = document.getElementsByClassName("p1")[0];
var p2 = document.getElementsByClassName("p2")[0];
var cent = document.getElementsByClassName("cent")[0];
var gg = document.getElementsByClassName("gg")[0];
var but = document.getElementsByClassName("but")[0];
var p3 = document.getElementsByClassName("p3")[0];
var qup = document.getElementsByClassName("qup")[0];
p1.onclick = function (){
vie.play();
p1.style.display = "none";
gg.style.display = "none";
cent.style.display = "none";
}
p2.onclick = function (){
vie.pause();
p1.style.display = "block";
p2.style.display = "block";
gg.style.display = "block";
cent.style.display = "block";
}
var ds = setInterval(jdt,1000);
function jdt(){
but.style.width = vie.currentTime*9 + "px" ;
if(but.ended){
clearinterval(ds);
}
}
p3.onclick = function (){
if(vie.paused){
vie.play();
p3.src = "imgs/pause02.png";
p1.style.display = "none";
p2.style.display = "none";
gg.style.display = "none";
cent.style.display = "none";
}else{
vie.pause();
p3.src = "imgs/play02.png";
p1.style.display = "block";
p2.style.display = "block";
gg.style.display = "block";
cent.style.display = "block";
}
}
qup.onclick = function (){
vie.webkitRequestFullScreen();
}
</script>
</html>