Hi, 请登录   我要注册   找回密码

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

2022-01-23 分类：网页代码 阅读(2.19K) 评论(0) 扫描二维码 隐藏侧边

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];
  6. //return a jQuery object
  7. 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. });
  6. //update HTML5 video current play time
  7. video.on('timeupdate', function() {
  8. $('.current').text(video[0].currentTime);
  9. });
视频进度条

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

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. });
  6. //update HTML5 video current play time
  7. video.on('timeupdate', function() {
  8. var currentPos = video[0].currentTime; //Get currenttime
  9. var maxduration = video[0].duration; //Get video duration
  10. var percentage = 100 * currentPos / maxduration; //in %
  11. $('.timeBar').css('width', percentage+'%');
  12. });

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

  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. });
  18. //update Progress Bar control
  19. var updatebar = function(x) {
  20. var progress = $('.progressBar');
  21. var maxduration = video[0].duration; //Video duraiton
  22. var position = x - progress.offset().left; //Click pos
  23. var percentage = 100 * position / progress.width();
  25. //Check within range
  26. if(percentage > 100) {
  27. percentage = 100;
  28. }
  29. if(percentage < 0) {
  30. percentage = 0;
  31. }
  33. //Update progress bar and video currenttime
  34. $('.timeBar').css('width', percentage+'%');
  35. video[0].currentTime = maxduration * percentage / 100;
  36. };
进阶-显示缓冲栏

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

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+'%');
  8. if(currentBuffer < maxduration) {
  9. setTimeout(startBuffer, 500);
  10. }
  11. };
  12. 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. });
  7. //Volume control clicked
  8. $('.volumeBar').on('mousedown', function(e) {
  9. var position = e.pageX - volume.offset().left;
  10. var percentage = 100 * position / volume.width();
  11. $('.volumeBar').css('width', percentage+'%');
  12. video[0].volume = percentage / 100;
  13. });
快进/快退 倒带控制

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. });
  7. //Rewind control
  8. $('.rw').on('click', function() {
  9. video[0].playbackrate = -3;
  10. return false;
  11. });
  13. //Slow motion control
  14. $('.sl').on('click', function() {
  15. video[0].playbackrate = 0.5;
  16. return false;
  17. });

其它额外控制的js代码

全屏播放
  1. $('.fullscreen').on('click', function() {
  2. //For Webkit
  3. video[0].webkitEnterFullscreen();
  5. //For Firefox
  6. video[0].mozRequestFullScreen();
  8. return false;
  9. });
开灯关灯控制
  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/

微海报分享

AD：【小林博客】本站文件大多收集于互联网，如有版权问题，请联系博主及时删除！

 收藏 (0) 打赏

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

支付宝扫一扫赞助

微信钱包扫描赞助

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

相关推荐

热门文章

评论 抢沙发

取消

切换注册

登录

忘记密码 ?

切换登录

注册