自定义教程：自己动手做一款HTML5视频播放器

自己动手做一款HTML5视频播放器第一步：获取播放器第二步：实现播放与暂停第三步：实现全屏操作第四步：实现播放的逻辑第五步：实现播放过程的逻...

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

        第一步：获取播放器
        第二步：实现播放与暂停
        第三步：实现全屏操作
        第四步：实现播放的逻辑
        第五步：实现播放过程的逻辑
        第六步：实现视频的跳播
        第七步：播放完毕后重置播放器的状态

在html5中播放视频和音频有单独的语义标签

//播放视频
<video src="" controls autoplay loop></video>
//播放音频
<audio  src="" controls loop></audio>

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

load() 加载

play() 播放

pause() 暂停

常用属性:

currentTime 视频播放的当前进度

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

paused 视频播放的状态

常用事件：

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

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

onended: 播放完时触发—重置

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

结构：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<h3 class="playerTitle">视频播放器</h3>
<div class="player">
<video src="mp4/chrome.mp4"></video>
<div class="controls">
<a href="javascript:;" class="switch fa fa-play"></a>
<a href="javascript:;" class="expand fa fa-expand"></a>
<div class="progress">
<div class="bar"></div>
<div class="loaded"></div>
<div class="elapse"></div>
</div>
<div class="time">
<span class="currentTime">00:00:00</span>
            \
<span class="totalTime">00:00:00</span>
</div>
</div>
</div>
<script src="jquery.min.js"></script>

第一步：获取播放器

将jq对象转化为DOM对象

<script src="jquery.min.js"></script>
<script>
$(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;
}

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-06-25 11:19
阅读 ( 289 )
分类：WEB前端开发