使用jQuery和CSS自定义HTML5 Video 控件简单适用

最新推荐文章于 2022-10-09 11:05:51 发布

dragonlkl

最新推荐文章于 2022-10-09 11:05:51 发布

阅读量664

点赞数

文章标签： video 美化 H5+css

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

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

　　DEMO DOWNLOAD　　

　HTML5 `Video` 基础标签　　

1 <video id="myVideo" 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>

　　video标签最好包含mp4、webM和ogg这三种源视频文件-可以跨浏览器。如果浏览器不支持html5，你可以使用flash作为后备！　　

　开始制作 HTML5 Video Controls

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

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

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

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  
6 //return a jQuery object
7 var video = $('#videoID');

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

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

1 <div class="control">
2    <a href="#" class="btnPlay">Play/Pause</a>
3 </div>

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

 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支持视频回放.这里我们要显示视频的当前播放时间和总时间.

<div class="progressTime">
   Current play time: <span class="current"></span>
   Video duration: <span class="duration"></span>
</div>

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

　视频进度条

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

<style>
.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;
}
</style>
<div class="progressBar">
   <div class="timeBar"></div>
</div>

...

//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;
};

　　完成!

　进阶-显示缓冲栏

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

<style>
.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;
}
</style>
<div class="progressBar">
   <div class="bufferBar"></div>
</div>

　　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);

　音量控制

　　现在,我们要增加声音控制.有两种不同的音量控制方法.静音按钮/音量栏

<a href="#" class="muted" >Mute/Unmute</a>
<div class="volumeBar">
   <div class="volume"></div>
</div>

//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属性来控制.

<div class="control">
   <a href="#" class="ff">Fast Forward</a>
   <a href="#" class="rw">Rewind</a>
   <a href="#" class="sl">Slow Motion</a>
</div>

　　不幸的是FireFox不支持playbackrate属性.以及有些版本的chrome浏览器不支持负值(倒带).到目前为止,只有Safri浏览器完全支持.

//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;
});

　更多重要的

　　Html5 Video还有更多其他重要的事件和属性可用于控制视频,我不能涵盖所有.你可以自己去看Html5 Video Dom属性及事件列表

　　HTML5 video ended Event
　　- Event fired when video has ended.

　　HTML5 video canplay Event
　　- Event fired when video can be played, but the buffering process still ongoing.

　　HTML5 video canplaythrough Event
　　- Event fired when whole video can be played.

　　HTML5 video seeking Event
　　- Event fired when browser seeks for a position of video.

　　HTML5 video waiting Event
　　- Event fired when waiting for more data to play the video.

　其他

　　除了主要的控制插件.还可以做一些额外的控制.例如全屏播放

$('.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;
});

dragonlkl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery和CSS自定义HTML5 Video 控件简单适用

Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中有一个相同的Html5视频控件而不受默认视频控件的控制.　实际上,自定义视频控件并不困难.本文将告诉你如何用jQuery自定义视频控件,希望对你有用!　　DEMO DOWN
复制链接

扫一扫