自定义HTML5 video标签视频播放器的皮肤样式
HTML5 视频标签 video 在不同浏览器会有不同的控件样式，想要统一 video 视频控件的样式，可以利用 HTML5 Video 的 Api，用 JavaScript 访问 html video api，将其作为控制视频的媒介，就可以实现 video 视频控件皮肤样式的自定义。
jQuery 是如何获取 video 标签的（基础可以跳过）
在原生 javaScript 中使用 getElementById('videoID') 获取 video 标签会得到一个 Dom 对象，在 jQuery 中使用 $("videoID") 会返回一个 jQuery 对象，jQuery 对象 ≠ Dom 对象，因此不能直接使用 jQuery 选择器调用或使用 Html5 Video 的 Dom 属性和功能，需要把 jquery 对象转换为 DOM 对象。
html5 Video 基础标签
<video id="videoID" controls poster="video.jpg" width="600" height="400" >
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webM" />
<source src="video.ogv" type="video/ogg" />
<p>Your browser does not support the video tag.</p>
</video>
原生 js 和 jquery 获取对象的代码
//return a DOM object
var video = document.getElementById('videoID'); //or
var video = $('#videoID').get(0); //or
var video = $('#videoID')[0];
//return a jQuery object
var video = $('#videoID');
下面是正文
自定义 video 播放暂停按钮（Play/Pause）
HTML代码
<div class="control">
<a href="javascript:void(0);" class="btnPlay">Play/Pause</a>
</div>
js代码
//Play/Pause control clicked
$('.btnPlay').on('click', function() {
if(video[0].paused) {
video[0].play();
}
else {
video[0].pause();
}
return false;
};
显示视频播放时间和持续时间
Html5 Video 支持视频回放，这里要显示视频的当前播放时间和总时间。
HTML代码
<div class="progressTime"> Current play time: <span class="current"></span> Video duration: <span class="duration"></span> </div>
js代码
为了得到视频的总时间，要确保视频元数据已经加载，这个时候要用到 html5 Video 的 loadedmetadata 事件。
对于当前的视频播放时间，可以用Html5 Video timeupdate 事件来保证他的更新。
//get HTML5 video time duration
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="progressBar">
<div class="timeBar"></div>
</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;
}
js代码
通过视频的总时间与当前时间的计算，获得播放进度条。
//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="bufferBar"></div> </div>
CSS代码
.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;
}
js代码
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, 500);
}
};
setTimeout(startBuffer, 500);
音量控制
有两种不同的音量控制方法，静音按钮和音量栏
HTML代码
<a href="#" class="muted" >Mute/Unmute</a> <div class="volumeBar"> <div class="volume"></div> </div>
js代码
//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;
});
快进/快退 倒带控制
Html5 Video支持播放速度的改变，可以使用 playbackrate 属性来控制。
但是 FireFox 浏览器不支持 playbackrate 属性，有些版本的 chrome 浏览器部分版本不支持负值（倒带），目前只有 Safri 浏览器完全支持，后续其它浏览器也许会支持。
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>
js代码
//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;
});
其它额外控制的js代码
全屏播放
$('.fullscreen').on('click', function() {
//For Webkit
video[0].webkitEnterFullscreen();
//For Firefox
video[0].mozRequestFullScreen();
return false;
});
开灯关灯控制
$('.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;
});
附：html5 video jquery插件
http://www.inwebson.com/jquery/best-jquery-plugins-for-creating-html5-video/
原文：https://www.cnblogs.com/fengluzheweb/p/11719073.html
<< 上一篇
下一篇 >>