HTML5 自定义视频播放器

2024-07-15 04:23| 来源: 网络整理| 查看: 265

HTML5 自定义视频播放器第一步：获取播放器第二步：实现播放与暂停第三步：实现全屏操作第四步：实现播放的逻辑第五步：实现播放过程的逻辑第六步：实现视频的跳播第七步：播放完毕后重置播放器的状态在html5中播放视频和音频有单独的语义标签

//播放视频 //播放音频

其中 controls 属性可以控制播放但是遗憾的是在每个浏览器中的显示效果却并不相同我们可以自定义视频播放器使视频播放器在所有浏览器都有相同样式 html5中提供了很多多媒体接口常用方法:

load() 加载

play() 播放

pause() 暂停

常用属性:

currentTime 视频播放的当前进度

duration 视频的总时间 100000/60 (以秒为单位，同时带有小数点)

paused 视频播放的状态

常用事件：

oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。

ontimeupdate: 通过该事件来报告当前的播放进度.

onended: 播放完时触发—重置

有了HTML5提供的多媒体接口，我们可以开始自定义播放器了我使用了jquery来创建，因为操纵元素比较方便，但是由于JQuery中没有提供视频音频的控件，所以要将jq元素转化为原生的js—DOM元素

结构：

Title 视频播放器 00:00:00 \ 00:00:00 第一步：获取播放器

将jq对象转化为DOM对象

$(function ($) { var video = $("video")[0]; 第二步：实现播放与暂停

如果此时是暂停，那么显示播放，此时播放，显示暂停判断当前播放状态: paused 播放：play() 暂停：pause()

$(".switch").on("click",function () { if (video.paused) { video.play(); /*移除暂停样式添加播放样式*/ }else{ video.pause(); /*移除播放样式，添加暂停样式*/ } /*设置标签的样式*/ $(this).toggleClass("fa-play fa-pause"); }); 第三步：实现全屏操作

由于html5在浏览器中兼容性不强，所以要实现全屏操作使用 requestFullscreen 方法需要添加浏览器前缀

$(".expand").on("click",function () { /*全屏>>不同浏览器添加不同前缀*/ if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.webkitRequestFullscreen) { video.webkitRequestFullscreen(); } else if (video.mozRequestFullScreen) { video.mozRequestFullScreen(); } else if (video.mozRequestFullscreen) { video.mozRequestFullscreen(); } }); 第四步：实现播放的逻辑

当视频文件可以播放时触发 oncanplay 事件此时可以将视频显示出来，但是突然显示会有些突兀，所以需要控制时间

video.oncanplay = function () { setTimeout(function () { /*1.将视频文件设置为显示*/ video.style.display = "block"; /*2.获取当前文件的总时长 : 计算出时分秒 * duration:是以秒为单位，同时获取了小数值 * */ var total = video.duration; /*3.计算时分秒*/ var result = getResult(total); /*4.将计算结果展示在DOM元素中*/ $(".totalTime").html(result); },2000); };

将计算时分秒的方法封装成函数，使用更加方便

function getResult(totalTime){ /*时*/ var hour =Math.floor(totalTime / 3600); /*补0操作*/ hour = hour /*1.获取当前鼠标相对于父元素的left值--- 偏移值*/ var offset = e.offsetX; /*2.计算偏移值相对于总父元素宽度的比例*/ var percent = offset / $(this).width(); /*3.计算这个位置对应的视频进度值*/ var current = percent * video.duration; /*4.设置当前视频的currentTime*/ video.currentTime = current; }) 第七步：播放完毕后重置播放器的状态 video.onended = function () { video.currentTime = 0; $(".switch").removeClass("fa-pause").addClass("fa-play"); }

注意：使用webstrom打开网页有坑，不能跳播，因为webstrom对视频播放的支持度比较少，所以直接找到文件打开，就可以跳播了

最后附上css样式

body { padding: 0; margin: 0; font-family: 'microsoft yahei', 'Helvetica', simhei, simsun, sans-serif; background-color: #F7F7F7; } a { text-decoration: none; } .playerTitle{ width:100%; margin: 0 auto; line-height:100px; font-size: 40px; text-align: center; } .player{ width: 720px; height: 360px; margin: 0 auto; background: url("../images/loading.gif") center no-repeat; background-size: cover; position: relative; } video{ height:100%; margin: 0 auto; display: none; } .controls { width: 720px; height: 40px; position: absolute; left: 0px; bottom: -40px; background-color: #000; } .controls > .switch{ width: 20px; height: 20px; display: block; font-size: 20px; color: #fff; position: absolute; left: 10px; top: 10px; } .controls > .expand{ width: 20px; height: 20px; display: block; font-size: 20px; color: #fff; position: absolute; right: 10px; top: 10px; } .controls > .progress{ width: 430px; height: 10px; position: absolute; left:40px; bottom:15px; background-color: #555; } .controls > .progress > .bar{ width:100%; height:100%; border-radius: 3px; cursor: pointer; position: absolute; left: 0; top: 0; opacity: 0; z-index: 999; } .controls > .progress > .loaded{ width:60%; height:100%; background-color: #999; border-radius: 3px; position: absolute; left: 0; top: 0; z-index: 2; } .controls > .progress > .elapse{ width:0%; height:100%; background-color: #fff; border-radius: 3px; position: absolute; left: 0; top: 0; z-index: 3; } .controls > .time{ height: 20px; position: absolute; left:490px; top: 10px; color: #fff; font-size: 14px; }

【本文地址】

公司简介

联系我们