自己动手做一款HTML5视频播放器

2024-07-10 07:25| 来源: 网络整理| 查看: 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 < 10 ? "0" +hour : hour; /*分*/ var minute = Math.floor(totalTime % 3600 / 60); minute = minute < 10 ? "0" +minute : minute; /*秒*/ var second = Math.floor(totalTime % 60); second = second < 10 ? "0" +second : second; /*返回结果*/ return hour+":"+minute+":"+second; }

第五步：实现播放过程的逻辑

在播放的过程中，当前时间以及进度条都会变化当视频播放时会触发 ontimeupdate事件，并且修改 currentTime 值也会触发这个事件说白了只要currentTime 变化就会触发这个事件进度条的变化就是元素宽度值的变化，将元素宽度值设置为百分比元素宽度百分比等于当前时间占总时间的比值的百分比

video.ontimeupdate = function () { /*1.获取当前的播放时间*/ var current = video.currentTime; /*2.计算出时分秒*/ var result = getResult(current); /*3.将结果展示在指定的DOM中*/ $(".currentTime").html(result); /*4.设置当前播放进度条样式例如0.12 >> 0.12*100 = 12 + % >> 12% */ var percent = current / video.duration * 100 + "%"; $(".elapse").css("width",percent); }

第六步：实现视频的跳播

如何跳播？

在整个进度条上添加一个透明的div，放在最高层( 点击时点击到的是最高层的透明div ) 显示点击之后的进度条点击时使用事件处理函数e来获取到鼠标点击的位置

$(".bar").on("click",function(e){ /*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; }

来源：https://blog.csdn.net/weixin_44159735/article/details/86438590

【本文地址】

公司简介

联系我们