自定义的HTML5视频控制,而不是使用默认控件
HTML5视频基本元素标记
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" id="myVideo" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support video
</video>
</body>
</html>
提示:由于ipad中有个bug,所以你必须要把MP4格式放在第一,视频才能在ipad中正常工作.
控制视频的播放和停止
</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(function(){
var video = $('#myVideo');//获取视频
$('.btnPlay').click(function(){
if(video[0].paused) {
video[0].play();//播放
}
else {
video[0].pause();//停止
}
return false;})
})
</script>
<body>
<video width="320" height="240" id="myVideo">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support video
</video>
<div class="control">
<a href="javascript:(void)" class="btnPlay">Play/Pause</a>
</div>
</body>
</html>获取视频总时间和当前播放时间
<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(function(){
var video = $('#myVideo');//获取视频
$('.btnPlay').click(function(){
if(video[0].paused) {
video[0].play();//播放
}
else {
video[0].pause();//停止
}
return false;})
//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);
});
})
</script>
<body>
<video width="320" height="240" id="myVideo">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support video
</video>
<div class="control">
<a href="javascript:(void)" class="btnPlay">Play/Pause</a>
</div>
<div class="progressTime">
当前播放时间: <span class="current"></span><br/>
视频持续播放时间: <span class="duration"></span>
</div>
</body>
</html>
视频进度条
<!DOCTYPE html>
<html>
<style>
.progressBar
{
position: relative;
width: 100%;
height: 10px;
background-color: #000;
}
.timeBar
{
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #ccc;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(function(){
var video = $('#myVideo');//获取视频
$('.btnPlay').click(function(){
if(video[0].paused) {
video[0].play();//播放
}
else {
video[0].pause();//停止
}
return false;})
//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);
});
//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+'%');
});
})
</script>
<body>
<video width="320" height="240" id="myVideo">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support video
</video>
<div class="control">
<a href="javascript:(void)" class="btnPlay">Play/Pause</a>
</div>
<br/>
<div class="progressTime">
当前播放时间: <span class="current"></span><br/>
视频持续播放时间: <span class="duration"></span>
</div>
<br/>
<div class="progressBar">
<div class="timeBar"></div>
</div>
</body>
</html>设置可以拖拉进度的进度条
<!DOCTYPE html>
<html>
<style>
.progressBar
{
position: relative;
width: 100%;
height: 10px;
background-color: #000;
}
.timeBar
{
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #ccc;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(function(){
var video = $('#myVideo');//获取视频
$('.btnPlay').click(function(){
if(video[0].paused) {
video[0].play();//播放
}
else {
video[0].pause();//停止
}
return false;})
//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);
});
//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;
};
})
</script>
<body>
<video width="320" height="240" id="myVideo">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support video
</video>
<div class="control">
<a href="javascript:(void)" class="btnPlay">Play/Pause</a>
</div>
<br/>
<div class="progressTime">
当前播放时间: <span class="current"></span><br/>
视频持续播放时间: <span class="duration"></span>
</div>
<br/>
<div class="progressBar">
<div class="timeBar"></div>
</div>
</body>
</html>显示缓冲栏
<!DOCTYPE html>
<html>
<style>
.progressBar
{
position: relative;
width: 100%;
height: 10px;
background-color: #000;
}
.timeBar
{
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #ccc;
}
//缓冲
<style>
.progressBar {
position: relative;
width: 100%;
height:10px;
background-color: #000;
}
.bufferBar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #ccc;
}
</style>
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(function(){
var video = $('#myVideo');//获取视频
$('.btnPlay').click(function(){
if(video[0].paused) {
video[0].play();//播放
}
else {
video[0].pause();//停止
}
return false;})
//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);
});
//进度条
//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;
};
//缓冲
//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);
})
</script>
<body>
<video width="320" height="240" id="myVideo">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support video
</video>
<div class="control">
<a href="javascript:(void)" class="btnPlay">Play/Pause</a>
</div>
<br/>
<div class="progressTime">
当前播放时间: <span class="current"></span><br/>
视频持续播放时间: <span class="duration"></span>
</div>
<br/>
<div class="progressBar">
<div class="timeBar"></div>
</div>
<br/>
<div class="progressBar">
<div class="bufferBar"></div>
</div>
</body>
</html>设置音量
<!DOCTYPE html>
<html>
<style>
.progressBar
{
position: relative;
width: 100%;
height: 10px;
background-color: #000;
}
.timeBar
{
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #ccc;
}
//缓冲
<style>
.progressBar {
position: relative;
width: 100%;
height:10px;
background-color: #000;
}
.bufferBar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #ccc;
}
</style>
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(function(){
var video = $('#myVideo');//获取视频
$('.btnPlay').click(function(){
if(video[0].paused) {
video[0].play();//播放
}
else {
video[0].pause();//停止
}
return false;})
//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);
});
//进度条
//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;
};
//缓冲
//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);
//设置音量
//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;
});
})
</script>
<body>
<video width="320" height="240" id="myVideo">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support video
</video>
<div class="control">
<a href="javascript:(void)" class="btnPlay">Play/Pause</a>
</div>
<br/>
<div class="progressTime">
当前播放时间: <span class="current"></span><br/>
视频持续播放时间: <span class="duration"></span>
</div>
<br/>
<div class="progressBar">
<div class="timeBar"></div>
</div>
<br/>
<div class="progressBar">
<div class="bufferBar"></div>
</div>
<a href="#" class="muted" >Mute/Unmute</a>
<div class="volumeBar">
<div class="volume"></div>
</div>
</body>
</html>快进,慢运动,和回放控制
<!DOCTYPE html>
<html>
<style>
.progressBar
{
position: relative;
width: 100%;
height: 10px;
background-color: #000;
}
.timeBar
{
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #ccc;
}
//缓冲
<style>
.progressBar {
position: relative;
width: 100%;
height:10px;
background-color: #000;
}
.bufferBar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #ccc;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(function(){
var video = $('#myVideo');//获取视频
$('.btnPlay').click(function(){
if(video[0].paused) {
video[0].play();//播放
}
else {
video[0].pause();//停止
}
return false;})
//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);
});
//进度条
//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;
};
//缓冲
//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);
//设置音量
//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;
});
//快进,慢运动,和回放控制
//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() {
alert(666)
video[0].playbackrate = 0.5;
return false;
});
})
</script>
<body>
<video width="320" height="240" id="myVideo">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support video
</video>
<div class="control">
<a href="javascript:(void)" class="btnPlay">Play/Pause</a>
</div>
<br/>
<div class="progressTime">
当前播放时间: <span class="current"></span><br/>
视频持续播放时间: <span class="duration"></span>
</div>
<br/>
<div class="progressBar">
<div class="timeBar"></div>
</div>
<br/>
<div class="progressBar">
<div class="bufferBar"></div>
</div>
<a href="#" class="muted" >Mute/Unmute</a>
<div class="volumeBar">
<div class="volume"></div>
</div>
<br/>
<div class="control">
<a href="#" class="ff">Fast Forward</a>
<a href="#" class="rw">Rewind</a>
<a href="#" class="sl">Slow Motion</a>
</div>
</body>
</html>
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
