使用html5 video定制视频

来源：互联网发布：godaddy域名优惠编辑：程序博客网时间：2024/06/05 20:59

今天看了一下html5的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显示播控控件crossOriginCORS设置currentSrc返回当前媒体的URLcurrentTime当前播放的时间，单位秒defaultMuted缺省是否静音defaultPlaybackRate播控的缺省倍速duration返回媒体的播放总时长，单位秒ended返回当前播放是否结束标志error返回当前播放的错误状态initialTime返回初始播放的位置loop是否循环播放mediaGroup当前音视频所属媒体组 (用来链接多个音视频标签)muted是否静音networkState返回当前网络状态paused是否暂停playbackRate播放的倍速played当前播放部件已经播放的时间范围(TimeRanges对象)preload页面加载时是否同时加载音视频readyState返回当前的准备状态seekable返回当前可跳转部件的时间范围(TimeRanges对象)seeking返回用户是否做了跳转操作src当前音视频源的URLstartOffsetTime返回当前的时间偏移(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当视频因缓冲下一帧而停止时产生该事件

0 0