jquery和css自定义video播放控件 - 风雨后见彩虹_H5之家

下面介绍一下通过jquery和css自定义video播放控件。

Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中有一个相同的Html5视频控件而不受默认视频控件的控制.

实际上,自定义视频控件并不困难.本文将告诉你如何用jQuery自定义视频控件,希望对你有用!

HTML5 Video 基础标签　　

Your browser does not support the video tag.

幸运的是HTML5 Video 的Api可以用JavaScript访问,并使用他们来作为控制视频的媒介.

　　在编码之前让我简单的介绍一下jQuery是如何获取video标签的.

　　在JavaScript中我们使用getElementById('videoID')来获取Video标签,作为结果,我们会获取到一个Dom对象.但是这不是等价的jQuery对象.$("videoID")会返回一个jQuery对象.不是Dom对象.这就是为什么在将其转换为Dom对象之前我们不能直接使用jQuery选择器调用/使用Html5 Video的Dom属性和功能.　　

video = document.getElementById('videoID'); video = $('#videoID').get(0); video = $('#videoID')[0]; video = $('#videoID');

　Video Play/Pause Controls 播放/暂停按钮

　　好的,这是所有的介绍.现在让我们来编码.首先,我们要创建一个简单的播放/暂停按钮.　　

Play/Pause

我们可以轻松的控制Html5 Video的播放与暂停状态.

//Play/Pause control clicked $('.btnPlay').on('click', function() { if(video[0].paused) { video[0].play(); } else { video[0].pause(); } return false; };

显示视频播放时间和持续时间

Html5 Video支持视频回放.这里我们要显示视频的当前播放时间和总时间.

Current play time: Video duration:

为了得到视频的总时间,我们要确保视频元数据已经加载.这个时候我们要用到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); });

　视频进度条

　　在这里我们将会把当前播放时间和总的时间长度转换为更人性化的进度条.

.progressBar { position width height backgroud-color .timeBar { position top left width height background-color

下面的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() { maxduration = video[0].duration; percentage = 100 * currentPos / maxduration; //in % $('.timeBar').css('width', percentage+'%'); });

下面实现播放进度条的拖拽，来播放视频

$('.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); } }); updatebar = function(x) { var progress = $('.progressBar'); position = x - progress.offset().left; percentage = 100 * position / progress.width(); (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; };

进阶-显示缓冲栏

我们需要给视频制作一个缓冲栏让用户知道视频加载了多少.

.progressBar { position width height backgroud-color .bufferBar { position top left width height background-color

Html5 Video缓冲属性将返回一个对象的缓存范围.因此,我们将使用缓存数据的最后一个值.