video标签：
video常用的属性：
- controls 不写controls视频不会播放 属性规定浏览器应该为视频提供播放控件(暂停 进度条 全屏属性)
- poster 封皮 路径
- autoplay muted 这两个实现自动静音播放
- loop=“1” 循环播放一次，，无限循环参数就为-1,直接写loop也可以实现循环播放
- width=“200px” height=“100px” 设置宽高
video常用事件：
- preload="auto"预加载，如果浏览器播放较慢
- pause暂停
- play播放
浏览器不支持video，解决方法：
<!-- *********************浏览器不支持解决方法***************************************** -->
<video controls="controls">
<!-- 浏览器支持就是MP4格式， -->
<source src="../视频/句号.mp4"></source>
<!-- 不支持就使用ogg格式， -->
<source src="../视频/句号.ogg"></source>
<!-- 还不支持就提示，浏览器不支持video -->
您的浏览器不支持！！！
</video>
设置视频下方按钮来控制视频播放暂停：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video标签</title>
</head>
<body>
<video id="video" src="../视频/句号.mp4" controls poster="../图片/句号封皮.png"></video>
<br />
<input type="button" src="../图片/播放.png" id="bofang" preload="auto"/>
<script>
var video=document.getElementById('video');
var bofang=document.getElementById('bofang');
bofang.onclick=function(){
if(video.paused==true){
video.play();
bofang.value="暂停"
}else{
video.pause();
bofang.value="播放"
}
};
</script>
</body>
</html>
自定义播放器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义播放器</title>
<link rel="stylesheet" type="text/css" href="font_video/iconfont.css"/>
<style>
@font-face {
font-family: 'iconfont';
src: url('font_video/iconfont.eot');
src: url('font_video/iconfont.eot?#iefix') format('embedded-opentype'),
url('font_video/iconfont.woff2') format('woff2'),
url('font_video/iconfont.woff') format('woff'),
url('font_video/iconfont.ttf') format('truetype'),
url('font_video/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#speed{
color: #000000;
text-decoration: none;
}
span{
margin-left:20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<video id="video" controls="controls" controls poster="../图片/句号封皮.png" src="../视频/句号.mp4">
<source src="../视频/句号.mp4">您的浏览器不支持</source>
</video>
<div id="durationbar">
<span class="icon-bofang iconfont" id="start"></span>
<span class="icon-kuaijin iconfont" id="end"></span>
<progress id="positonBar" value="0" max="100"></progress>
<span><a href="#" class="a1" id="speed">2x</a></span>
<span class="icon-fangda iconfont" id="all"></span>
<span class="icon-shengyin1 iconfont" id="sound"></span>
<input type="range" value="20" min="10" max="100" step="10" onchange="changeVolumn()" id="volume"/>
</div>
</div>
<script>
var video=document.getElementById('video');
var ostart=document.getElementById('start');
var oend=document.getElementById('end');
var opositonBar=document.getElementById('positonBar');
var ospeed=document.getElementById('speed');
var oall=document.getElementById('all');
var osound=document.getElementById('sound');
var ovolume=document.getElementById('volume');
// 开始播放方法 方便调用
ostart.onclick=function(){
// 如果是暂停的，就自动播放
if(video.paused==true){
video.play();
// 设置不是静音
video.muted=false;
// 设置声音为100
video.volume=ovolume.value/100;
// 播放的时候把播放按钮去掉
// 添加暂停按钮
this.classList.add("icon-zanting_huaban");
this.classList.remove("icon-bofang");
}else{
video.pause();
this.classList.add("icon-bofang");
this.classList.remove("icon-zanting_huaban");
}
}
//结束播放
// 点击第二个按钮，直接跳到视频最后
oend.onclick=function(){
video.pause();
video.currentTime=video.duration;
//视频播放的进度通过进度条显示
opositonBar.value=100;
// 返回当前视频正在播放的时间
// alert(video.currentTime);
// 返回整个视频长度
// alert(video.duration);
}
// 播放速度
ospeed.onclick=function(){
video.play();
video.playbackRate=2;
}
//声音设置 是否静音
osound.onclick=function(){
if(video.muted==false){
video.muted=true;
this.classList.add("icon-iconfront-");
this.classList.remove("icon-shengyin1");
}else{
video.muted=false;
this.classList.add("icon-shengyin1");
this.classList.remove("icon-iconfront-");
}
}
// 声音调节
function changeVolumn(){
// 获取滑块的值，等于video的声音
video.volume=ovolume.value/100;
video.muted=false;
}
// 全屏
oall.onclick=function(){
if (video .requestFullscreen) {
video .requestFullscreen();
} else if (video .mozRequestFullScreen) {
video .mozRequestFullScreen();
} else if (video.webkitRequestFullScreen) {
video.webkitRequestFullScreen();
}
}
</script>
</body>
</html>
