H5视频播放，左右滑手势控制播放进度。
水平有限，这篇文章中对H5视频播放做了简单的搭建。因产品经理要求，加入了手势控制，左滑后退播放10秒，右滑快进10秒。因为上下滑动可能会影响页面的滑动，如果用到iscroll或者batterscorll等插件更需要小心谨慎。固未添加控制音量的上下滑动事件。
下面这段代码主要是css部分和一个video标签。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>视频进度条title>
<script src="js/jquery.js">script>
<script src="js/index.js">script>
<style type="text/css">
#box{
width: 100%;
position: relative;
background: rgba(0,0,0,.5);
color: white;
}
video{
width: 100%;height: 100%;
}
.list_menu{width: 100%;height: 30px;position: relative;}
#play{
position: absolute;bottom: 5px;left: 3px;
width: 25px;
height: 25px;
}
#volume{
position: absolute;bottom: 5px;right:25px;
width: 25px;
height: 25px;
}
#cur_time{
position: absolute;bottom: 8px;left: 30px;
}
#total_time{
position: absolute;bottom: 8px;left: 270px;
}
#time_line ,#volume_line{
-webkit-appearance: none;
width: 200px;
position: absolute;
top: 10px;
left: 60px;
}
#volume_line{
position: absolute;top: -30px;left: 300px;width: 80px;transform: rotate(-90deg ) ;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 1px;
/*box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; 轨道内置阴影效果*/
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 10px;
width: 10px;
margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
background: #ffffff;
border-radius: 50%; /*外观设置为圆形*/
border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}
#volume_line{
}
style>
head>
<body>
<div id="box">
<video src="http://img.ksbbs.com/asset/Mon_1605/0ec8cc80112a2d6.mp4" id="video">video>
<div class="list_menu">
<img src="img/pause.png" alt="" id="play">
<span id="cur_time">0span><span id="total_time">0span>
<input type="range" max="0" min="0" value="0" id="time_line">
<img src="img/vol.png" alt="" id="volume">
<input type="range" id="volume_line">
div>
div>
body>
html>下面这段代码主要是一些视频播放的控件，最基本的一些操作，暂停，播放，音量，全屏等。
var
oBox = $('#box')[0],
oVideo = $('#video')[0],
oPlay = $('#play'),
oVolume = $('#volume'),
oTotalTime = $('#total_time'),
oCurTime = $('#cur_time'),
oTimeLine = $('#time_line'),
oVolumeLine = $('#volume_line'),
oFullScreen = $('#fullScreen'),
iCurVol = 0.5,
isfullScreen = false,
isVolume = false,
isPlay = false;
/*初始化页面*/
oVideo.volume = iCurVol;
oVolumeLine.val(iCurVol * 100);
//oTotalTime.html(parseInt(oVideo.duration/60)+":"+(Math.ceil(oVideo.duration))%60);
//setTimeout("oTotalTime.html(Math.ceil(oVideo.duration))",1000)
oTimeLine.attr('max',Math.ceil(oVideo.duration));
setTimeout(function(){oTotalTime.html(parseInt(oVideo.duration/60)+":"+(Math.ceil(oVideo.duration))%60)},100);
/*点击播放/暂停*/
oPlay.click(function () {
if(isPlay){
oVideo.pause();
$(this).attr('src','img/pause.png');
}else{
oVideo.play();
$(this).attr('src','img/play.png');
}
isPlay = ! isPlay;
});
/*改变视频播放的进度条*/
oVideo.addEventListener('timeupdate',playTime,true);
/*视频进度条的点击事件*/
oTimeLine.bind("touchstart",function(){
oVideo.removeEventListener('timeupdate',playTime,true)
}).bind("touchend",function(){
oVideo.currentTime = $(this).val();
oVideo.addEventListener('timeupdate',playTime,true)
});
function playTime(){
var
iCurTime = Math.ceil(oVideo.currentTime);
if(iCurTime<=60){oCurTime.html(iCurTime);}else{
oCurTime.html(parseInt(iCurTime/60)+":"+(Math.ceil(iCurTime))%60);
}
oTimeLine.val(iCurTime)
}
// 静音
oVolume.bind("touchstart",function(){
if(isVolume){
oVideo.volume = iCurVol;
oVolumeLine.val(iCurVol * 100);
oVolume.attr('src','img/vol.png');
}else{
oVideo.volume = 0;
oVolumeLine.val(0);
oVolume.attr('src','img/novol.png');
}
isVolume = ! isVolume;
});
/*点击音量滚动条*/
oVolumeLine.change(function () {
oVideo.volume = oVolumeLine.val() / 100;
oVolume.attr('src',$(this).val() == 0 ? 'img/novol.png' : 'img/vol.png' );//使用三木运算
});
/*点击全屏/正常*/
oFullScreen.click(function () {
if(isfullScreen){
document.mozCancelFullScreen();//兼容火狐
oBox.style.width = '600px';
}else{
oBox.mozRequestFullScreen();
oBox.style.width = '1000px';
}
isfullScreen = !isfullScreen;
});下面这段代码是左右滑动的控制，各位观众可以手动调节到需要的秒数。代码简单，欢迎搬运。
(function(){
var LSwiperMaker = function(o){
var that = this;
this.config = o;
this.control = false;
this.sPos = {};
this.mPos = {};
this.dire;
// this.config.bind.addEventListener('touchstart', function(){ return that.start(); } ,false);
// 这样不对的，event对象只在事件发生的过程中才有效;
this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);
this.config.bind.addEventListener('touchmove', function(e){ return that.move(e); } ,false);
this.config.bind.addEventListener('touchend', function(e){ return that.end(e); } ,false);
}
LSwiperMaker.prototype.start = function(e){
var point = e.touches ? e.touches[0] : e;
this.sPos.x = point.screenX;
this.sPos.y = point.screenY;
//document.getElementById("start").innerHTML = "开始位置是:"+this.sPos.x +" "+ this.sPos.y ;
}
LSwiperMaker.prototype.move = function(e){
var point = e.touches ? e.touches[0] : e;
this.control = true;
this.mPos.x = point.screenX;
this.mPos.y = point.screenY;
//document.getElementById("move").innerHTML = "您的位置是："+this.mPos.x +" "+ this.mPos.y ;
}
LSwiperMaker.prototype.end = function(e){
this.config.dire_h && (!this.control ? this.dire = null : this.mPos.x > this.sPos.x ? this.dire = 'R' : this.dire = 'L')
this.config.dire_h || (!this.control ? this.dire = null : this.mPos.y > this.sPos.y ? this.dire = 'D' : this.dire = 'U')
this.control = false;
this.config.backfn(this);
}
window.LSwiperMaker = LSwiperMaker;
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);// 禁止微信touchmove冲突
}())
var a = new LSwiperMaker({
bind:document.getElementById("video"), // 绑定的DOM对象
dire_h:true, //true 判断左右， false 判断上下
backfn:function(o){ //回调事件
// document.getElementById("dire").innerHTML = "向"+ o.dire + "滑";
if(o.dire=="R"){
console.log("R");
oVideo.currentTime = oVideo.currentTime+5;
//this.currentTime += 5;
}else if(o.dire=="L"){
oVideo.currentTime = oVideo.currentTime-5;
//this.currentTime -= 5;
}
}
})