h5 的video视频控件
由于html5的流行,其中的video视频的使用很流行,使得可恨的IE9也能与时俱进了。
video所支持的格式有mp4、ogg和wav三种。
例:
HTML5 Video基础标签
`
<video id="myVideo" controls poster="video.jpg" width="640" height="320" >
<source src="video.mp4" type="video/mp4" />
<source src="video.wav" type="video/wav" />
<source src="video.ogv" type="video/ogg" />
<p>Your browser does not support the video tag.</p>
</video>`
下面制作Video的控件controls
本人是通过jQuery来进行获取标签及相应的控件使用操作的
Video Play/Pause Controls 播放/暂停 按钮
通过jQuery来控制video的播放、暂停
jQuery代码
$(‘.btnPlay‘).on(‘click‘, function() {
if(video[0].paused) {
video[0].play();
}
else {
video[0].pause();
}
return false;
};
html代码
<div class="control">
<a href="#" class="btnPlay">Play/Pause</a>
</div>
显示视频播放时间和持续时间
看视频肯定最好要有个时间的概念啦!!!
jQuery代码
video.on(‘loadedmetadata‘, function() {
$(‘.duration‘).text(video[0].duration);
});
//update HTML5 video current play time
video.on(‘timeupdate‘, function() {
$(‘.current‘).text(video[0].currentTime);
});
html代码
<div class="progressTime">
当前播放时间: <span class="current"></span>
总时间: <span class="duration"></span>
</div>
视频进度条
动态模拟时间
css样式
.progressBar
{
position: relative;
width: 100%;
height: height:10px;
backgroud-color: #000;
}
.timeBar
{
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #ccc;
}
jQuery代码
//get HTML5 video time duration
video.on(‘loadedmetadata‘, function() {
$(‘.duration‘).text(video[0].duration));
});
//update HTML5 video current play time
video.on(‘timeupdate‘, function() {
var currentPos = video[0].currentTime; //Get currenttime
var maxduration = video[0].duration; //Get video duration
var percentage = 100 * currentPos / maxduration; //in %
$(‘.timeBar‘).css(‘width‘, percentage+‘%‘);
});
var timeDrag = false; /* Drag status */
$(‘.progressBar‘).mousedown(function(e) {
timeDrag = true;
updatebar(e.pageX);
});
$(document).mouseup(function(e) {
if(timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).mousemove(function(e) {
if(timeDrag) {
updatebar(e.pageX);
}
});
//update Progress Bar control
var updatebar = function(x) {
var progress = $(‘.progressBar‘);
var maxduration = video[0].duration; //Video duraiton
var position = x - progress.offset().left; //Click pos
var percentage = 100 * position / progress.width();
//Check within range
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
//Update progress bar and video currenttime
$(‘.timeBar‘).css(‘width‘, percentage+‘%‘);
video[0].currentTime = maxduration * percentage / 100;
};
html代码
<div class="progressBar">
<div class="timeBar"></div>
</div>
缓冲栏
看视频时缓冲加载了多少
样式
<style>
.progressBar {
position: relative;
width: 100%;
height: height:10px;
backgroud-color: #000;
}
.bufferBar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #ccc;
}
</style>
<div class="progressBar">
<div class="bufferBar"></div>
</div>
Html5 Video缓冲属性将返回一个对象的缓存范围.因此,我们将使用缓存数据的最后一个值.
//loop to get HTML5 video buffered data
var startBuffer = function() {
var maxduration = video[0].duration;
var currentBuffer = video[0].buffered.end(0);
var percentage = 100 * currentBuffer / maxduration;
$(‘.bufferBar‘).css(‘width‘, percentage+‘%‘);
if(currentBuffer < maxduration) {
setTimeout(startBuffer, 1000);
}
};
setTimeout(startBuffer, 1000);
音量控制
当然啦!看视频肯定得调个音量哦!!!
html代码
<a href="#" class="muted" >Mute/Unmute</a>
<div class="volumeBar">
<div class="volume"></div>
</div>
jQuery代码
//Mute/Unmute control clicked
$(‘.muted‘).click(function() {
video[0].muted = !video[0].muted;
return false;
});
//Volume control clicked
$(‘.volumeBar‘).on(‘mousedown‘, function(e) {
var position = e.pageX - volume.offset().left;
var percentage = 100 * position / volume.width();
$(‘.volumeBar‘).css(‘width‘, percentage+‘%‘);
video[0].volume = percentage / 100;
});
快进/快退 倒带控制
Video有个属性playbackrate来控制视屏的播放进程
html代码
<div class="control">
<a href="#" class="ff">Fast Forward</a>
<a href="#" class="rw">Rewind</a>
<a href="#" class="sl">Slow Motion</a>
</div>
jQuery代码
//Fast forward control
$(‘.ff‘).on(‘click‘, function() {
video[0].playbackrate = 3;
return false;
});
//Rewind control
$(‘.rw‘).on(‘click‘, function() {
video[0].playbackrate = -3;
return false;
});
//Slow motion control
$(‘.sl‘).on(‘click‘, function() {
video[0].playbackrate = 0.5;
return false;
});
然而很不幸的是:FireFox不支持playbackrate属性.以及有些版本的chrome浏览器不支持负值(倒带).到目前为止,只有Safri浏览器完全支持.所以请大家注意啦!
全屏播放
jQuery代码
$(‘.fullscreen‘).on(‘click‘, function() {
//For Webkit
video[0].webkitEnterFullscreen();
//For Firefox
video[0].mozRequestFullScreen();
return false;
});
开灯关灯控制
jQuery代码
$(‘.btnLight‘).click(function() {
if($(this).hasClass(‘on‘)) {
$(this).removeClass(‘on‘);
$(‘body‘).append(‘<div class="overlay"></div>‘);
$(‘.overlay‘).css({
‘position‘:‘absolute‘,
‘width‘:100+‘%‘,
‘height‘:$(document).height(),
‘background‘:‘#000‘,
‘opacity‘:0.9,
‘top‘:0,
‘left‘:0,
‘z-index‘:999
});
$(‘#myVideo‘).css({
‘z-index‘:1000
});
}
else {
$(this).addClass(‘on‘);
$(‘.overlay‘).remove();
}
return false;
});
好了!终于给整的差不多了!!!
原文地址:https://www.cnblogs.com/Firesun/p/10127158.html
时间: 2024-11-05 14:42:05