HTML5中的視訊标簽和及其模仿視訊播放器的效果在一些手機端應用比較多。由于手機端基本上廢除了flash的獨斷。讓HTML5當家做主人,是以對視訊支援的比較好。
是以今天專門為大家奉上HTML5視訊标簽模拟視訊播放器的小樣例,讓大家更好的了解HTML5和有效的應用在項目中。
HTML代碼
<!-- src中放上本地的ogv的音頻 -->
<video id="v1" src="Intermission-Walk-in.ogv"></video>
<div id="div1">
<input type="button" value="播放" />
<input type="button" value="00:00:00" />
<input type="button" value="00:00:00" />
<input type="button" value="靜音" />
<input type="button" value="全屏" />
</div>
<div id="div2">
<div id="div3"></div>
</div>
<div id="div4">
<div id="div5"></div>
</div>
CSS代碼
#div2{ width:300px; height:30px; background:#666666; position:relative;}
#div3{ width:30px; height:30px; background:red; position:absolute; left:0; top:0;}
#div4{ width:300px; height:20px; background:#666666; position:relative; top:10px;}
#div5{ width:20px; height:20px; background:yellow; position:absolute; right:0; top:0;}
JavaScript代碼
window.onload = function(){
var oV = document.getElementById('v1');
var oDiv = document.getElementById('div1');
var aInput = oDiv.getElementsByTagName('input');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var oDiv4 = document.getElementById('div4');
var oDiv5 = document.getElementById('div5');
var timer = null;
//播放暫停
aInput[0].onclick = function(){
if(oV.paused){
this.value = '暫停';
oV.play();
toShow();
timer = setInterval(toShow,1000);
}
else{
this.value = '播放';
oV.pause();
clearInterval(timer);
}
};
aInput[2].value = timeChange(oV.duration);
function timeChange(iAll){
iAll = Math.floor(iAll);
var hours = toZero(parseInt(iAll/3600));
var mintus = toZero(parseInt(iAll%3600/60));
var sends = toZero(parseInt(iAll%60));
return hours + ":" + mintus + ":" + sends;
}
function toZero(num){
if(num<10){
return '0' + num;
}
else{
return '' + num;
}
}
function toShow(){
aInput[1].value = timeChange(oV.currentTime);
var scale = oV.currentTime/oV.duration;
oDiv3.style.left = scale * (oDiv2.offsetWidth - oDiv3.offsetWidth) + 'px';
}
//靜音
aInput[3].onclick = function(){
if(oV.muted){
this.value = '靜音';
oV.muted = false;
oDiv5.style.left = oV.volume*(oDiv4.offsetWidth - oDiv5.offsetWidth) + 'px';
}
else{
this.value = '消除靜音';
oV.muted = true;
oDiv5.style.left = 0;
}
};
var disX = 0;
//進度調整
oDiv3.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX - oDiv3.offsetLeft;
document.onmousemove = function(ev){
var ev = ev || window.event;
var L = ev.clientX - disX;
if(L<0){
L = 0;
}
else if(L>oDiv2.offsetWidth - oDiv3.offsetWidth){
L = oDiv2.offsetWidth - oDiv3.offsetWidth;
}
oDiv3.style.left = L + 'px';
var scale = L/(oDiv2.offsetWidth - oDiv3.offsetWidth);
oV.currentTime = scale * oV.duration;
toShow();
};
document.onmouseup = function(){
aInput[0].value = '暫停';
oV.play();
toShow();
timer = setInterval(toShow,1000);
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
var disX2 = 0;
//聲音
oDiv5.onmousedown = function(ev){
var ev = ev || window.event;
disX2 = ev.clientX - oDiv5.offsetLeft;
document.onmousemove = function(ev){
var ev = ev || window.event;
var L = ev.clientX - disX2;
if(L<0){
L = 0;
}
else if(L>oDiv4.offsetWidth - oDiv5.offsetWidth){
L = oDiv4.offsetWidth - oDiv5.offsetWidth;
}
oDiv5.style.left = L + 'px';
var scale = L/(oDiv4.offsetWidth - oDiv5.offsetWidth);
oV.volume = scale;
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
//全屏
aInput[4].onclick = function(){
oV.webkitRequestFullScreen();
};
};
HTML5實戰與剖析之媒體元素(5、視訊執行個體)就為大家介紹到這裡,模拟視訊播放器的小樣例差點兒把經常使用的小功能。
這個小樣例隻能在支援HTML5的視訊标簽的浏覽器中播放。很多其它有關HTML5的相關知識盡在夢龍小站的HTML5實戰與剖析部分,感謝大家的支援。