自定义HTML5 video标签视频播放器的皮肤样式

HTML5 视频标签 video 在不同浏览器会有不同的控件样式,想要统一 video 视频控件的样式,可以利用 HTML5 Video 的 Api,用 JavaScript 访问 html video api,将其作为控制视频的媒介,就可以实现 video 视频控件皮肤样式的自定义。

自定义HTML5 video标签视频播放器的皮肤样式

jQuery 是如何获取 video 标签的(基础可以跳过)

在原生 javaScript 中使用 getElementById('videoID') 获取 video 标签会得到一个 Dom 对象,在 jQuery 中使用 $("videoID") 会返回一个 jQuery 对象,jQuery 对象 ≠ Dom 对象,因此不能直接使用 jQuery 选择器调用或使用 Html5 Video 的 Dom 属性和功能,需要把 jquery 对象转换为 DOM 对象。

html5 Video 基础标签

  1. <video id="videoID" controls poster="video.jpg" width="600" height="400" >
  2. <source src="video.mp4" type="video/mp4" />
  3. <source src="video.webm" type="video/webM" />
  4. <source src="video.ogv" type="video/ogg" />
  5. <p>Your browser does not support the video tag.</p>
  6. </video>

原生 js 和 jquery 获取对象的代码

  1. //return a DOM object
  2. var video = document.getElementById('videoID'); //or
  3. var video = $('#videoID').get(0); //or
  4. var video = $('#videoID')[0];
  5. //return a jQuery object
  6. var video = $('#videoID');

下面是正文

自定义 video 播放暂停按钮(Play/Pause)

HTML代码

  1. <div class="control">
  2. <a href="javascript:void(0);" class="btnPlay">Play/Pause</a>
  3. </div>

js代码

  1. //Play/Pause control clicked
  2. $('.btnPlay').on('click', function() {
  3. if(video[0].paused) {
  4. video[0].play();
  5. }
  6. else {
  7. video[0].pause();
  8. }
  9. return false;
  10. };
显示视频播放时间和持续时间

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

HTML代码

  1. <div class="progressTime">
  2. Current play time: <span class="current"></span>
  3. Video duration: <span class="duration"></span>
  4. </div>

js代码

为了得到视频的总时间,要确保视频元数据已经加载,这个时候要用到 html5 Video 的 loadedmetadata 事件。

对于当前的视频播放时间,可以用Html5 Video timeupdate 事件来保证他的更新。

  1. //get HTML5 video time duration
  2. video.on('loadedmetadata', function() {
  3. $('.duration').text(video[0].duration);
  4. });
  5. //update HTML5 video current play time
  6. video.on('timeupdate', function() {
  7. $('.current').text(video[0].currentTime);
  8. });
视频进度条

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

HTML代码

  1. <div class="progressBar">
  2. <div class="timeBar"></div>
  3. </div>

CSS代码

  1. .progressBar {
  2. position: relative;
  3. width: 100%;
  4. height: height:10px;
  5. backgroud-color: #000;
  6. }
  7. .timeBar {
  8. position: absolute;
  9. top: 0;
  10. left: 0;
  11. width: 0;
  12. height: 100%;
  13. background-color: #ccc;
  14. }

js代码

通过视频的总时间与当前时间的计算,获得播放进度条。

  1. //get HTML5 video time duration
  2. video.on('loadedmetadata', function() {
  3. $('.duration').text(video[0].duration));
  4. });
  5. //update HTML5 video current play time
  6. video.on('timeupdate', function() {
  7. var currentPos = video[0].currentTime; //Get currenttime
  8. var maxduration = video[0].duration; //Get video duration
  9. var percentage = 100 * currentPos / maxduration; //in %
  10. $('.timeBar').css('width', percentage+'%');
  11. });

下面的代码实现播放进度条的拖拽,来播放视频

  1. var timeDrag = false; /* Drag status */
  2. $('.progressBar').mousedown(function(e) {
  3. timeDrag = true;
  4. updatebar(e.pageX);
  5. });
  6. $(document).mouseup(function(e) {
  7. if(timeDrag) {
  8. timeDrag = false;
  9. updatebar(e.pageX);
  10. }
  11. });
  12. $(document).mousemove(function(e) {
  13. if(timeDrag) {
  14. updatebar(e.pageX);
  15. }
  16. });
  17. //update Progress Bar control
  18. var updatebar = function(x) {
  19. var progress = $('.progressBar');
  20. var maxduration = video[0].duration; //Video duraiton
  21. var position = x - progress.offset().left; //Click pos
  22. var percentage = 100 * position / progress.width();
  23. //Check within range
  24. if(percentage > 100) {
  25. percentage = 100;
  26. }
  27. if(percentage < 0) {
  28. percentage = 0;
  29. }
  30. //Update progress bar and video currenttime
  31. $('.timeBar').css('width', percentage+'%');
  32. video[0].currentTime = maxduration * percentage / 100;
  33. };
进阶-显示缓冲栏

给视频制作一个缓冲栏让用户知道视频加载了多少。

HTML代码

  1. <div class="progressBar">
  2. <div class="bufferBar"></div>
  3. </div>

CSS代码

  1. .progressBar {
  2. position: relative;
  3. width: 100%;
  4. height: height:10px;
  5. backgroud-color: #000;
  6. }
  7. .bufferBar {
  8. position: absolute;
  9. top: 0;
  10. left: 0;
  11. width: 0;
  12. height: 100%;
  13. background-color: #ccc;
  14. }

js代码

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

  1. //loop to get HTML5 video buffered data
  2. var startBuffer = function() {
  3. var maxduration = video[0].duration;
  4. var currentBuffer = video[0].buffered.end(0);
  5. var percentage = 100 * currentBuffer / maxduration;
  6. $('.bufferBar').css('width', percentage+'%');
  7. if(currentBuffer < maxduration) {
  8. setTimeout(startBuffer, 500);
  9. }
  10. };
  11. setTimeout(startBuffer, 500);
音量控制

有两种不同的音量控制方法,静音按钮和音量栏

HTML代码

  1. <a href="#" class="muted" >Mute/Unmute</a>
  2. <div class="volumeBar">
  3. <div class="volume"></div>
  4. </div>

js代码

  1. //Mute/Unmute control clicked
  2. $('.muted').click(function() {
  3. video[0].muted = !video[0].muted;
  4. return false;
  5. });
  6. //Volume control clicked
  7. $('.volumeBar').on('mousedown', function(e) {
  8. var position = e.pageX - volume.offset().left;
  9. var percentage = 100 * position / volume.width();
  10. $('.volumeBar').css('width', percentage+'%');
  11. video[0].volume = percentage / 100;
  12. });
快进/快退 倒带控制

Html5 Video支持播放速度的改变,可以使用 playbackrate 属性来控制。

但是 FireFox 浏览器不支持 playbackrate 属性,有些版本的 chrome 浏览器部分版本不支持负值(倒带),目前只有 Safri 浏览器完全支持,后续其它浏览器也许会支持。

HTML代码

  1. <div class="control">
  2. <a href="#" class="ff">Fast Forward</a>
  3. <a href="#" class="rw">Rewind</a>
  4. <a href="#" class="sl">Slow Motion</a>
  5. </div>

js代码

  1. //Fast forward control
  2. $('.ff').on('click', function() {
  3. video[0].playbackrate = 3;
  4. return false;
  5. });
  6. //Rewind control
  7. $('.rw').on('click', function() {
  8. video[0].playbackrate = -3;
  9. return false;
  10. });
  11. //Slow motion control
  12. $('.sl').on('click', function() {
  13. video[0].playbackrate = 0.5;
  14. return false;
  15. });

其它额外控制的js代码

全屏播放
  1. $('.fullscreen').on('click', function() {
  2. //For Webkit
  3. video[0].webkitEnterFullscreen();
  4. //For Firefox
  5. video[0].mozRequestFullScreen();
  6. return false;
  7. });
开灯关灯控制
  1. $('.btnLight').click(function() {
  2. if($(this).hasClass('on')) {
  3. $(this).removeClass('on');
  4. $('body').append('<div class="overlay"></div>');
  5. $('.overlay').css({
  6. 'position':'absolute',
  7. 'width':100+'%',
  8. 'height':$(document).height(),
  9. 'background':'#000',
  10. 'opacity':0.9,
  11. 'top':0,
  12. 'left':0,
  13. 'z-index':999
  14. });
  15. $('#myVideo').css({
  16. 'z-index':1000
  17. });
  18. }
  19. else {
  20. $(this).addClass('on');
  21. $('.overlay').remove();
  22. }
  23. return false;
  24. });

附:html5 video jquery插件

http://www.inwebson.com/jquery/best-jquery-plugins-for-creating-html5-video/

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《自定义HTML5 video标签视频播放器的皮肤样式》
文章链接:https://www.vvso.cn/xlbk/18237.html
分享到: 更多 (0)

热门文章

评论 抢沙发

切换注册

登录

忘记密码 ?

切换登录

注册