使用html5 video定制视频
2013-12-23 16:32
555 查看
今天看了一下html5的video标签,还有它的属性事件方法等,就想自己定制一个视频播放器,练练手。
思路:
1、首先使用video标签,不使用默认的controls
2、定制视频的播放暂停,使用play()、pause()
3、进度条:
使用loadedmetadata事件,使用duration属性获取视频总长,使用timeupdate事件来更新进度,获取视频的currentTime
我们还要让进度条能够拖动,我们可以监听mousedown,mouseup和mousemove这几个事件完成相关的功能
4、音量,主要是使用volumechange事件和属性volume,以及mousedown,mouseup和mousemove这几个事件实现拖动
demo下载
demo中有全屏功能,不过实现的不大好,要是有什么好的方法的,希望大家指点哦!!
在此也附上video标签的各种属性详解:
思路:
1、首先使用video标签,不使用默认的controls
<video width="640" height="267" id="myVideo"> <source src="cars.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <p>Your browser does not support the video tag</p> </video>
2、定制视频的播放暂停,使用play()、pause()
function playPause(video, videoPlayBtnId){ if(video.paused) { if(videoPlayBtnId) $("#"+videoPlayBtnId).hide(); $("#playPauseBtn").addClass("pause_b"); video.play(); } else { if(videoPlayBtnId) $("#"+videoPlayBtnId).show(); $("#playPauseBtn").removeClass("pause_b"); video.pause(); } } $("#myVideo,#playBtn,#playPauseBtn").bind("click", function(){ playPause(myVideo, "playBtn"); return false; });
3、进度条:
使用loadedmetadata事件,使用duration属性获取视频总长,使用timeupdate事件来更新进度,获取视频的currentTime
<div class="progress_bar"> <span class="time_bar"></span> <span class="cur_positon" id="progressDrag"></span> </div> function updatebar(x,video) { //更新进度 var progress = $('.progress_bar'); var maxduration = video.duration; var position = x - progress.offset().left; var videoWidth = $(video).width(); var currentPosition = $("#progressDrag").width(); var percentage = 100 * position/videoWidth; //检查拖动进度条的范围是否合法 if(percentage > 100) { percentage = 100; } if(percentage < 0) { percentage = 0; } //Update progress bar and video currenttime $('.time_bar').css('width', percentage+'%'); $('.cur_positon').css('left', videoWidth*percentage/100-(currentPosition/2)); video.currentTime = maxduration * percentage / 100; };
我们还要让进度条能够拖动,我们可以监听mousedown,mouseup和mousemove这几个事件完成相关的功能
var timeDrag = false; /*初始默认的拖动状态为false*/ $('#progressDrag').mousedown(function(e) { timeDrag = true; updatebar(e.pageX, myVideo); }); $("#videoBox").mouseup(function(e) { if(timeDrag) { timeDrag = false; //停止拖动,设置timeDrag为false updatebar(e.pageX, myVideo); } }); $("#videoBox").mousemove(function(e) { if(timeDrag) { updatebar(e.pageX, myVideo); } }); $(".progress_bar").bind("click", function(e){ timeDrag = true; updatebar(e.pageX, myVideo); timeDrag = false; });
4、音量,主要是使用volumechange事件和属性volume,以及mousedown,mouseup和mousemove这几个事件实现拖动
<div class="volume_box"> <span class="volume_icon"></span> <div class="volume_bar"> <span></span> </div> </div>单击喇叭静音,再次单击时给个默认的声音
$(".volume_icon").bind("click", function(){ var volumeBarPos = $(".volume_bar").offset().left; if($(this).hasClass("un_volume")) { updateVolumeBar(volumeBarPos + $(".volume_bar").width()*0.2, myVideo); } else { updateVolumeBar(volumeBarPos, myVideo); } }); //更新声音进度 function updateVolumeBar(x, video){ var volume = $(".volume_bar"); var borderRadius = 2;//2为边框圆角 var position = x - volume.offset().left; var volumeWidth = volume.width()-borderRadius; var percentage = 100 * position/volumeWidth; //检查拖动进度条的范围是否合法 if(percentage > 100) { percentage = 100; } if(percentage < 0) { percentage = 0; video.muted = true; } video.volume = percentage/100; volume.find("span").css('width', percentage+'%'); if(video.volume) { $(".volume_icon").removeClass("un_volume"); } else { $(".volume_icon").addClass("un_volume"); } } $(myVideo).bind("volumechange", function(){ var currentPos = myVideo.volume; //当前音量 var percentage = 100*currentPos; //百分比 $(".volume_bar span").css("width", percentage+"%"); }); var volumeFlag = false; $('.volume_bar').mousedown(function(e) { volumeFlag = true; updateVolumeBar(e.pageX, myVideo); }); $(".volume_bar").mouseup(function(e) { if(volumeFlag) { volumeFlag = false; //停止拖动,设置volumeFlag为false updateVolumeBar(e.pageX, myVideo); } }); $(".volume_bar").mousemove(function(e) { if(volumeFlag) { updateVolumeBar(e.pageX, myVideo); } });
demo下载
demo中有全屏功能,不过实现的不大好,要是有什么好的方法的,希望大家指点哦!!
在此也附上video标签的各种属性详解:
方法
方法 | 描述 |
---|---|
addTextTrack() | 为音视频加入一个新的文本轨迹 |
canPlayType() | 检查指定的音视频格式是否得到支持 |
load() | 重新加载音视频标签 |
play() | 播放音视频 |
pause() | 暂停播放当前的音视频 |
属性
属性 | 描述 |
---|---|
audioTracks | 返回可用的音轨列表(MultipleTrackList对象) |
autoplay | 媒体加载后自动播放 |
buffered | 返回缓冲部件的时间范围(TimeRanges对象) |
controller | 返回当前的媒体控制器(MediaController对象) |
controls | 显示播控控件 |
crossOrigin | CORS设置 |
currentSrc | 返回当前媒体的URL |
currentTime | 当前播放的时间,单位秒 |
defaultMuted | 缺省是否静音 |
defaultPlaybackRate | 播控的缺省倍速 |
duration | 返回媒体的播放总时长,单位秒 |
ended | 返回当前播放是否结束标志 |
error | 返回当前播放的错误状态 |
initialTime | 返回初始播放的位置 |
loop | 是否循环播放 |
mediaGroup | 当前音视频所属媒体组 (用来链接多个音视频标签) |
muted | 是否静音 |
networkState | 返回当前网络状态 |
paused | 是否暂停 |
playbackRate | 播放的倍速 |
played | 当前播放部件已经播放的时间范围(TimeRanges对象) |
preload | 页面加载时是否同时加载音视频 |
readyState | 返回当前的准备状态 |
seekable | 返回当前可跳转部件的时间范围(TimeRanges对象) |
seeking | 返回用户是否做了跳转操作 |
src | 当前音视频源的URL |
startOffsetTime | 返回当前的时间偏移(Date对象) |
textTracks | 返回可用的文本轨迹(TextTrackList对象) |
videoTracks | 返回可用的视频轨迹(VideoTrackList对象) |
volume | 音量值 |
事件
事件 | 描述 |
---|---|
abort | 当音视频加载被异常终止时产生该事件 |
canplay | 当浏览器可以开始播放该音视频时产生该事件 |
canplaythrough | 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件 |
durationchange | 当媒体的总时长改变时产生该事件 |
emptied | 当前播放列表为空时产生该事件 |
ended | 当前播放列表结束时产生该事件 |
error | 当加载媒体发生错误时产生该事件 |
loadeddata | 当加载媒体数据时产生该事件 |
loadedmetadata | 当收到总时长,分辨率和字轨等metadata时产生该事件 |
loadstart | 当开始查找媒体数据时产生该事件 |
pause | 当媒体暂停时产生该事件 |
play | 当媒体播放时产生该事件 |
playing | 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件 |
progress | 当获取到媒体数据时产生该事件 |
ratechange | 当播放倍数改变时产生该事件 |
seeked | 当用户完成跳转时产生该事件 |
seeking | 当用户正执行跳转时操作的时候产生该事件 |
stalled | 当试图获取媒体数据,但数据还不可用时产生该事件 |
suspend | 当获取不到数据时产生该事件 |
timeupdate | 当前播放位置发生改变时产生该事件 |
volumechange | 当前音量发生改变时产生该事件 |
waiting | 当视频因缓冲下一帧而停止时产生该事件 |
相关文章推荐
- 直接在低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频的办法
- html5视频video标签的使用格式和属性
- IIS7下,使用html5的video,无法播放视频
- 使用 video.js 开发 HTML5 视频页面
- 关于HTML5中video标签在webstorm中使用绝对路径不能播放视频的解析
- 低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频
- HTML5视频播放插件Video.js使用详解
- HTML5 video 视频标签使用介绍
- 直接在低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频的办法
- 在使用html5的video标签播放视频时为何只有声音却没有图像
- 控制webview使用html5的video播放视频不全屏(inline)的方法
- 使用HTML5的video标签播放视频
- html5视频video的使用
- 在使用html5 的audio,video播放语音,视频的一些总结心得
- HTML5 video 视频标签使用介绍
- HTML5 - 使用<video>播放视频
- html5开发<video>视频标签的使用--…
- Html5初探-视频元素video示例
- DayDayUP之HTML5学习笔记四----使用Video标签制作简单的播放器
- HTML5 Video(视频)