H5自定義video功能與樣式處理
阿新 • • 發佈：2018-12-15
H5的video非常簡單，方便，有時我們可能需要自己來設定樣式。這是一個自定義的video，自定義的話我們需要對功能進行一些處理，這裡常用的功能幾乎是都用到了，第一次練習程式碼很累贅，之後會慢慢改進。
常用的一些 video API
"視訊地址":video.currentSrc;
"視訊總時長":video.duration;
"視訊播放速率":video.playbackRate;
"是否暫停":video.paused;
"是否結束":video.ended;
"是否靜音":video.muted;
"當前播放時間": video.currentTime;
"當前緩衝量":video.buffered.end(0);
"當前音量":video.volume
api使用方法
video.onloadedmetadata=function(){ console.log("視訊地址"+video.currentSrc); console.log("視訊總時長"+video.duration); console.log("視訊播放速率"+video.playbackRate); console.log("是否暫停"+video.paused); console.log("是否結束"+video.ended); console.log("是否靜音"+video.muted); } //當前時間 video.ontimeupdate=function(){ console.log("當前播放時間"+video.currentTime); console.log("當前緩衝量"+video.buffered.end(0)); }//當前音量 video.onvolumechange=function(){ console.log("當前音量"+video.volume); } //播放 btnPlay.onclick=function (){ video.play(); } //停止 btnStop.onclick=function (){ video.pause(); }
全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定義播放器音量拖動</title>
<style>
.video-warp {
width: 800px;
margin: auto;
text-align: center;
}
video {
width: 100%;
}
.controls {
width: 100%;
background: #ccc;
height: 20px;
line-height: 20px;
text-align: left;
box-sizing: border-box;
padding-left: 5px;
position: relative;
}
.controls i {
display: inline-block;
width: 20px;
height: 20px;
background: url(img/play.png) no-repeat;
background-size: 100%;
}
.controls i:nth-of-type(2) {
display: none;
background: url(img/pause.png) no-repeat;
background-size: 100%;
}
.controls i:nth-of-type(3) {
background: url(img/sound.png) no-repeat;
background-size: 100%;
}
.controls i:nth-of-type(4) {
display: none;
background: url(img/mute.png) no-repeat;
background-size: 100%;
}
.progress {
display: inline-block;
width: 62%;
height: 10px;
line-height: 10px;
background: #e5e9ef;
border-radius: 5px;
vertical-align: super;
overflow: hidden;
}
.video-timer {
display: inline-block;
vertical-align: top;
}
.timrBar {
display: inline-block;
height: 11px;
background: #8adced;
}
#playSpeed {
color: #fb0606;
cursor: pointer;
float: right;
margin-right: -32px;
}
/*yinliang*/
.video-sound {
position: absolute;
width: 100px;
height: 10px;
background: #e5e9ef;
bottom: 5px;
right:48px;
border-radius: 5px;
overflow: hidden;
}
.soundBar {
height: 100%;
background: #00a1d6;
}
/*全屏*/
#screen{
float: right;
margin-right: 25px;
margin-top: 5px;
width: 10px;
height: 10px;
background: url(img/full-screen.png);
background-size:contain ;
}
</style>
</head>
<body>
<div class="video-warp" id="video-warp">
<video id="video" poster="img/preview.jpg"
<source src="video/003.mp4" type="video/mp4"></source>
當前瀏覽器不支援 video直接播放，點選這裡下載視訊：
<a href="myvideo.webm">下載視訊</a>
</video>
<div class="controls" id="controls">
<i id="play"></i>
<i id="pause" class="hide"></i>
<!--進度條-->
<div class="progress">
<div class="timrBar"></div>
</div>
<!--時長-->
<div class="video-timer">
<span id="currentTime">00:00</span><em>/</em>
<span id="duration">00:00</span>
</div>
<i id="sound" class="sound"></i>
<i id="muteSound" class="sound"></i>
<div class="video-sound">
<div class="soundBar"></div>
</div>
<i id="screen"></i>
<span id="playSpeed">*3</span>
</div>
</div>
<script>
var v = {
video: document.getElementById("video"),//容器框
play: document.getElementById("play"),//播放按鈕
pause: document.getElementById("pause"),//暫停按鈕
duration: document.getElementById("duration"),//總時長
currentTime: document.getElementById("currentTime"),//當前播放時間
progress: document.getElementsByClassName("progress")[0],//進度條容器
timrBar: document.getElementsByClassName("timrBar")[0], //進度條
sound: document.getElementsByClassName("video-sound")[0], //音量容器
soundBar: document.getElementsByClassName("soundBar")[0],//音量
playSpeed: document.getElementById("playSpeed"),//播放速率
warp: document.getElementById("video-warp"), //視訊區域距離左邊距離
soundPercent:0 ,//音量百分比
fullScreen:document.getElementById("screen")/*全屏按鈕*/
};
v.video.onloadedmetadata = function() {
//播放
v.play.onclick = function() {
if(v.video.paused || v.video.ended) {
v.video.play();
this.style.display = "none";
v.pause.style.display = "inline-block";
}
}
//暫停
v.pause.onclick = function() {
if(!v.video.paused || !v.video.ended) {
v.video.pause();
v.pause.style.display = "none";
v.play.style.display = "inline-block";
}
}
//獲取時長
v.duration.innerHTML = timer(v.video.duration);
v.currentTime.innerHTML = timer(v.video.currentTime);
//進度條跟隨
v.video.ontimeupdate = function() {
var currentTime = v.video.currentTime;
var duration = v.video.duration;
var percent = currentTime / duration * 100;
v.timrBar.style.width = percent + "%";
v.currentTime.innerHTML = timer(v.video.currentTime);
}
//進度條獲取座標呼叫 拖拽實現方法
var enableProgressDrag = function(e) {
var progressDrag = false;
v.progress.onmousedown = function(e) {
progressDrag = true;
updateprogress(e.pageX - v.warp.offsetLeft);
}
document.onmouseup = function(e) {
if(progressDrag) {
progressDrag = false;
updateprogress(e.pageX - v.warp.offsetLeft);
}
}
v.progress.onmousemove = function(e) {
if(progressDrag) {
updateprogress(e.pageX - v.warp.offsetLeft);
}
}
};
enableProgressDrag();
//播放速率
v.playSpeed.onclick = function() {
v.video.playbackRate = 3;
}
//音量獲取座標呼叫 拖拽實現方法
var enableSoundDrag = function(e) {
var soundDrag = false;
v.sound.onmousedown = function(e) {
soundDrag = true;
updatesound(e.pageX - v.warp.offsetLeft);
}
v.sound.onmouseup = function(e) {
if(soundDrag) {
soundDrag = false;
updatesound(e.pageX - v.warp.offsetLeft);
}
}
v.sound.onmousemove = function(e) {
if(soundDrag) {
updatesound(e.pageX - v.warp.offsetLeft);
}
}
};
enableSoundDrag();
updatesound(null, 35); //初始化音量
/*全屏*/
var isScreen=false;
v.fullScreen.addEventListener("click",function(){
if(isScreen==false){
requestFullscreen(v.video);
isScreen=true;
}else{
exitFullscreen(v.video);
isScreen=false;
}
})
}
//進度條可拖拽實現
function updateprogress(x) {
var percent = 100 * (x - v.progress.offsetLeft) / v.progress.offsetWidth;
if(percent > 100) {
percent = 100;
}
if(percent < 0) {
percent = 0;
}
v.timrBar.style.width = percent + "%";
v.video.currentTime = v.video.duration * percent / 100;
}
//音量可拖拽實現
function updatesound(x, n) {
sounding();
if(n) {
soundPercent = n;
} else {
soundPercent = 100 * (x - v.sound.offsetLeft) / v.sound.offsetWidth;
}
if(soundPercent > 100) {
persoundPercentcent = 100;
}
if(soundPercent < 0) {
soundPercent = 0;
}
v.soundBar.style.width = soundPercent + "%";
v.video.volume = soundPercent / 100;
}
//時間格式化
function timer(seconds) {
var minute = Math.floor(seconds / 60);
if(minute < 10) {
minute = "0" + minute;
}
var second = Math.floor(seconds % 60);
if(second < 10) {
second = "0" + second;
}
return minute + ":" + second;
}
//是否靜音
var sound = document.querySelector("#sound");
var muteSound = document.querySelector("#muteSound");
function sounding() {
if(v.video.volume == 0 ) {
sound.style.display = "none";
muteSound.style.display = "inline-block";
} else {
sound.style.display = "inline-block";
muteSound.style.display = "none";
}
}
//切換靜音
sound.onclick=function(){
showHide(sound,muteSound);
v.video.volume =0;
v.soundBar.style.width=0;
}
//去除靜音 音量回到之前選定區域
muteSound.onclick=function(){
showHide(muteSound,sound);
v.soundBar.style.width = soundPercent + "%";
v.video.volume = soundPercent / 100;
}
//顯示與隱藏
function showHide(a,b){
a.style.display = "none";
b.style.display = "inline-block";
}
/*全屏*/
// 全屏
// ele:全屏的物件
function requestFullscreen(ele) {
// 全屏相容程式碼
if (ele.requestFullscreen) {
ele.requestFullscreen();
} else if (ele.webkitRequestFullscreen) {
ele.webkitRequestFullscreen();
} else if (ele.mozRequestFullScreen) {
ele.mozRequestFullScreen();
} else if (ele.msRequestFullscreen) {
ele.msRequestFullscreen();
}
}
// 取消全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
</script>
</body>
</html>