使用jQuery和CSS自定义HTML5 Video 控件 简单适用
来源:互联网 发布:linux下gcc安装包在吗 编辑:程序博客网 时间:2024/05/21 18:47
使用jQuery和CSS自定义HTML5 Video 控件 简单适用
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 object2 var video = document.getElementById('videoID'); //or3 var video = $('#videoID').get(0); //or4 var video = $('#videoID')[0];5 6 //return a jQuery object7 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 durationvideo.on('loadedmetadata', function() { $('.duration').text(video[0].duration);}); //update HTML5 video current play timevideo.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 durationvideo.on('loadedmetadata', function() { $('.duration').text(video[0].duration));}); //update HTML5 video current play timevideo.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 controlvar 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 datavar 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>
js
//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;});
轮到你了!
...
原文地址:http://www.inwebson.com/html5/custom-html5-video-controls-with-jquery/#comment-form
- 使用jQuery和CSS自定义HTML5 Video 控件 简单适用
- 使用jQuery和CSS自定义HTML5 Video 控件 简单适用
- 使用jQuery和CSS自定义HTML5 Video 控件
- html5 video 兼容性和使用
- CSS & HTML5 video switch
- 自定义HTML5 Video 标签
- HTML5 <video> - 使用 DOM 进行自定义控制示例
- HTML5 video标签使用
- 使用 HTML5 video 事件
- <html5>video和audio
- HTML5 Video和Audio
- HTML5 audio 和 video
- Android简单了解自定义控件和自定义属性如何使用
- 使用Javascript,CSS和Ajax创建ASP.NET自定义控件
- 使用Javascript,CSS和Ajax创建ASP.NET自定义控件
- 使用Javascript,CSS和Ajax创建ASP.NET自定义控件
- 使用Javascript,CSS和Ajax创建ASP_NET自定义控件
- html5视频video标签的使用格式和属性
- ios 设置状态栏背景颜色
- 使用四大方案保障域名安全
- java实现万年历<51cto学院学习笔记>
- 第七周项目2求圆柱体的表面积
- HTTP协议(1)—HTTP的连接
- 使用jQuery和CSS自定义HTML5 Video 控件 简单适用
- saas相关说明解释
- 推荐的机器学习的网址
- docker windows install 下载
- String.getBytes()
- PIXELFORMATDESCRIPTOR说明
- 线性表 笔记
- 媒体驳中石油气价倒挂谎言:300亿利润哪来的
- IT忍者神龟之Photoshop解析新手抠图的5个快速选择工具