使用html5 video定制视频

时间：2022-12-28 09:20:22

今天看了一下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 显示播控控件
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 当视频因缓冲下一帧而停止时产生该事件

标签：

相关文章