自定义视频播放组件
css部分
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.container {
80%;
margin: 0 auto;
}
.videoBox {
800px;
left: 50%;
margin-left: -400px;
position: relative;
}
.videoBox svg {
20px;
height: 20px;
fill: #ffffff;
}
.videoBox svg:hover {
fill: #ff6429;
}
.mediaControls {
position: absolute;
100%;
bottom: 15px;
}
.progress_box:hover .loadingCri {
10px;
height: 10px;
border-radius: 5px;
bottom: -2px;
}
.progress {
100%;
height: 6px;
background-image: linear-gradient(to right, orange, orange 0%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .5));
border-radius: 8px;
}
.progress::-webkit-progress-bar {
background-color: rgba(255, 255, 255, .5);
border-radius: 8px;
}
.progress.loading::-webkit-progress-value {
background: #ff6429;
}
.progress_box {
position: relative;
bottom: 10px;
}
.loadingCri {
position: absolute;
bottom: -1px;
8px;
height: 8px;
border-radius: 4px;
background-color: #ff6429;
left: 0;
}
.control_wrap {
color: #ececec;
cursor: pointer;
}
.play_time_mod {
font-size: 12px;
}
.control_wrap .left_control {
float: left;
}
.control_wrap .right_control {
float: right;
}
.right_control div,
.left_control div {
float: left;
}
.left_control div {
margin: 0 0 0 15px;
}
.right_control div {
margin: 0 15px 0 0;
}
.button_speed {
min- 52px;
height: 26px;
line-height: 26px;
border-radius: 99em;
text-align: center;
background: orange;
box-sizing: border-box;
position: relative;
font-size: 14px;
}
.button_speed:hover {
background: #ff6429;
}
.speed_list_wrap {
padding: 0 12px;
124px;
background-color: transparent;
padding-bottom: 44px;
color: #ececec;
position: absolute;
bottom: 0px;
left: -52px;
font-size: 14px;
text-align: center;
display: none;
}
.speed_list {
background-color: rgba(0, 0, 0, .8);
border-radius: 6px;
}
.speed_list .s_select {
color: orange;
}
.speed_list li {
height: 40px;
line-height: 40px;
}
.speed_list li:hover {
color: orange;
}
.time_duration,
.time_separator {
color: rgba(255, 255, 255, .5)
}
.button_volume {
position: relative;
}
.volume_wrap {
42px;
color: #ececec;
position: absolute;
bottom: 0;
left: -50%;
font-size: 14px;
border-radius: 6px;
text-align: center;
padding-bottom: 44px;
background-color: transparent;
display: none;
}
.button_volume .volume_control {
background-color: rgba(0, 0, 0, .8);
border-radius: 6px;
height: 100px;
}
.button_volume .volume_control .bar {
height: 80px;
4px;
background-image: linear-gradient(to top, orange, orange 0%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .5));
margin-left: 19px;
margin-top: 10px;
position: relative;
}
.volume_dot {
background-color: orange;
position: absolute;
8px;
height: 8px;
left: -2px;
bottom: -2px;
border-radius: 4px;
}
</style>
html部分
<div class="container">
<div class="videoBox">
<video width="100%">
<source src="./static/v1.mp4" type="video/mp4" />
</video>
<div class="mediaControls">
<div class="progress_box">
<!-- 可替换 -->
<!-- <progress class="progress loading" value="0" max="100"></progress> -->
<div class="progress loading" value="0" max="100"></div>
<div class="loadingCri"></div>
</div>
<div class="control_wrap">
<div class="left_control">
<div class="play_btn" title="播放">
<svg t="1588766121795" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="7908" width="20" height="20">
<path
d="M882.734114 459.147258l0.024559-0.024559L244.016061 21.12718l-0.199545 0.188288C230.582097 8.748245 212.62819 1.014096 192.840518 1.014096c-40.704051 0-73.699536 32.66905-73.699536 72.996524 0 22.148439-0.954745 65.513086 0 64.572668l0 373.422851 0 393.071354c0 0.325411 0 25.249057 0 44.935422 0 40.302915 32.995485 72.972988 73.699536 72.972988 19.862373 0 37.892005-7.78429 51.125401-20.466124l0.050142 0.025583 638.742613-437.982216-0.024559-0.038886c13.886265-13.270235 22.549575-31.889291 22.549575-52.531424 0-0.050142 0-0.088004 0-0.150426 0-0.050142 0-0.11154 0-0.149403C905.28369 491.048829 896.620379 472.41647 882.734114 459.147258z"
p-id="7909"></path>
</svg>
</div>
<div class="play_next" title="下一页">
<svg t="1588766140872" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="8119" width="20" height="20">
<path d="M192 896V128l512 384-512 384z m576-768h64v768h-64V128z" p-id="8120"></path>
</svg>
</div>
<div class="play_loop" title="打开循环播放">
<svg t="1588776669166" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="3694" width="16" height="16">
<path
d="M668.16 798.72h-312.32C216.064 798.72 102.4 685.056 102.4 545.28v-35.84C102.4 369.664 216.064 256 355.84 256H808.96c16.9984 0 30.72 13.7216 30.72 30.72s-13.7216 30.72-30.72 30.72H355.84C249.9584 317.44 163.84 403.5584 163.84 509.44v35.84C163.84 651.1616 249.9584 737.28 355.84 737.28h312.32C774.0416 737.28 860.16 651.1616 860.16 545.28V522.24c0-16.9984 13.7216-30.72 30.72-30.72s30.72 13.7216 30.72 30.72v23.04C921.6 685.056 807.936 798.72 668.16 798.72z"
p-id="3695"></path>
<path
d="M798.72 389.12V174.08l107.52 107.52zM348.16 880.64a30.7712 30.7712 0 0 1-27.4432-44.544l327.68-655.36a30.68928 30.68928 0 0 1 41.1648-13.7216c15.1552 7.5776 21.2992 26.0096 13.7216 41.2672l-327.68 655.36A30.6176 30.6176 0 0 1 348.16 880.64z"
p-id="3696"></path>
</svg>
</div>
<div class="play_time_mod">
<span class="time_current">00:00:00</span>
<span class="time_separator">/</span>
<span class="time_duration">00:00</span>
</div>
</div>
<div class="right_control">
<div class="button_speed">
<span>倍速</span>
<div class="speed_list_wrap">
<ul class="speed_list">
<li class="speed_item" data-value="0.5">0.5x</li>
<li class="speed_item s_select" data-value="1">1.0x</li>
<li class="speed_item" data-value="1.5">1.5x</li>
<li class="speed_item" data-value="2.0">2.0x</li>
</ul>
</div>
</div>
<div class="button_volume">
<svg t="1588766082343" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="7695" width="20" height="20">
<path
d="M218.495828 334.609871c-0.390903-0.019443-0.773619-0.019443-1.164522-0.019443L100.022553 334.590428c-21.744233 0-39.087227 17.448394-39.087227 39.001269l0 273.866415c0 21.551852 17.505699 38.999223 39.087227 38.999223l117.308753 0c0.057305 0 0.113587 0 0.171915 0l0 0.153496 287.22056 185.975668c6.824429 5.842055 15.691377 9.354042 25.370831 9.354042 21.590737 0 39.096437-17.505699 39.096437-39.095413 0-1.794879-0.124843-3.551896-0.354064-5.270027L568.836985 183.473685c0.229221-1.718131 0.354064-3.475148 0.354064-5.269004 0-21.590737-17.505699-39.096437-39.096437-39.096437-8.895601 0-17.105586 2.977821-23.682375 7.979742L218.495828 334.609871z"
p-id="7696"></path>
<path
d="M757.858012 953.491133l0.085958 0.075725c123.876332-107.514689 202.211445-266.13329 202.211445-443.041442 0-177.214121-78.603219-336.062965-202.851011-443.61654l-0.11461 0.11461c-4.963035-3.817955-11.17655-6.109138-17.925255-6.109138-16.197914 0-29.322839 13.133112-29.322839 29.321816 0 6.757914 2.28095 12.981662 6.109138 17.926278l-0.333598 0.342808c0.821715 0.706081 1.641383 1.393743 2.462075 2.119267 1.173732 1.202385 2.452865 2.329045 3.817955 3.321652 110.054535 96.710622 179.51349 238.550071 179.51349 396.578224 0 158.02713-69.458955 299.866578-179.51349 396.577201-1.36509 0.99363-2.644223 2.118244-3.817955 3.321652-0.600681 0.533143-1.212618 1.048889-1.822508 1.564635l0.229221 0.230244c-4.152577 5.058203-6.643304 11.530614-6.643304 18.593474 0 16.188704 13.124925 29.321816 29.322839 29.321816C746.317165 960.134437 752.798786 957.651896 757.858012 953.491133z"
p-id="7697"></path>
<path
d="M713.998085 729.35433l0.23843 0.24764c55.380308-56.43022 89.532129-133.76454 89.532129-219.077577 0-85.409229-34.228569-162.800853-89.704045-219.249493l-0.268106 0.267083c-4.886287-3.64604-10.966773-5.821589-17.543561-5.821589-16.197914 0-29.322839 13.133112-29.322839 29.321816 0 6.566556 2.166339 12.657274 5.822612 17.544585l-0.162706 0.170892c0.773619 0.782829 1.547239 1.584078 2.310625 2.38635 0.075725 0.076748 0.152473 0.171915 0.23843 0.248663 43.3626 45.587268 69.983911 107.248629 69.983911 175.132716 0 67.884087-26.621311 129.544425-69.983911 175.131693-0.085958 0.077771-0.162706 0.171915-0.23843 0.24764-0.706081 0.74599-1.422396 1.471514-2.13871 2.214435l0.144286 0.134053c-3.751441 4.926196-5.976108 11.092639-5.976108 17.754363 0 16.188704 13.124925 29.321816 29.322839 29.321816C702.925912 735.328391 709.072913 733.113957 713.998085 729.35433z"
p-id="7698"></path>
</svg>
<div class="volume_wrap">
<div class="volume_control">
<div class="bar">
<div class="volume_dot"></div>
</div>
</div>
</div>
</div>
<div class="button_fullscreen">
<svg t="1588765937602" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="7128" width="20" height="20">
<path
d="M919.920093 725.414549q3.014188 26.122962 7.033105 58.776664t7.53547 66.814498 7.53547 67.819227 7.033105 60.786122q6.028376 47.222277-41.193901 44.208089-25.118232-2.009459-56.767205-5.526011t-64.805039-7.53547-65.809769-8.037834-59.781393-7.033105q-29.137149-3.014188-37.174984-16.578033t9.042564-30.644243q11.052022-10.047293 27.127691-27.630056t27.127691-28.634785q11.052022-12.056752 7.033105-22.104044t-16.075669-23.108774q-28.13242-27.127691-51.241194-49.231735t-51.241194-51.241194q-6.028376-6.028376-12.056752-13.061481t-9.042564-15.573304-1.004729-18.085127 13.061481-20.59695q6.028376-6.028376 10.047293-10.549658t8.037834-8.037834 8.540199-8.037834 11.554387-12.559116q20.094586-20.094586 37.174984-17.080398t37.174984 23.108774 41.193901 40.691536 47.222277 46.719912q19.089857 18.085127 32.653702 25.118232t26.625326-6.028376q9.042564-9.042564 22.606409-21.60168t23.611138-22.606409q17.080398-17.080398 30.644243-13.061481t16.578033 30.141879zM43.79615 383.80659q-3.014188-26.122962-7.033105-58.776664t-7.53547-66.814498-7.53547-67.819227-7.033105-60.786122q-3.014188-26.122962 6.53074-36.170255t33.658431-8.037834q25.118232 2.009459 56.767205 5.526011t64.805039 7.53547 65.809769 8.037834 59.781393 7.033105q30.141879 3.014188 37.677348 16.578033t-9.544928 30.644243q-10.047293 10.047293-24.615868 26.122962t-25.620597 27.127691q-12.056752 12.056752-8.037834 22.104044t17.080398 23.108774q13.061481 14.06621 24.615868 24.615868t22.606409 21.099315 23.108774 22.606409l25.118232 25.118232q6.028376 6.028376 11.554387 14.06621t8.037834 17.080398-0.502365 19.089857-13.061481 20.094586l-11.052022 11.052022q-4.018917 4.018917-7.53547 8.037834t-8.540199 8.037834l-11.052022 12.056752q-20.094586 20.094586-34.663161 15.070939t-34.663161-25.118232-38.179713-37.677348-44.208089-43.705724q-18.085127-18.085127-32.151337-25.118232t-27.127691 6.028376q-9.042564 10.047293-25.118232 24.615868t-26.122962 24.615868q-17.080398 17.080398-30.141879 13.061481t-16.075669-30.141879zM905.853883 84.397261q26.122962-3.014188 36.170255 6.53074t8.037834 34.663161-5.526011 56.767205-7.53547 64.805039-8.037834 65.809769-7.033105 59.781393q-3.014188 29.137149-16.578033 37.174984t-30.644243-10.047293q-10.047293-10.047293-26.122962-24.615868t-27.127691-25.620597q-12.056752-11.052022-22.104044-7.53547t-23.108774 16.578033q-27.127691 27.127691-47.724641 49.231735t-48.729371 50.236465q-6.028376 6.028376-14.06621 11.554387t-17.080398 8.037834-19.089857-0.502365-20.094586-14.06621q-6.028376-6.028376-10.549658-10.047293t-8.540199-8.037834-8.540199-8.037834-11.554387-12.056752q-20.094586-20.094586-16.075669-35.165525t25.118232-35.165525l38.179713-40.189172q19.089857-20.094586 45.212818-46.217547 19.089857-18.085127 26.122962-32.151337t-7.033105-26.122962q-9.042564-9.042564-23.108774-24.615868t-24.113503-25.620597q-17.080398-17.080398-13.061481-30.141879t30.141879-16.075669 58.776664-7.033105 67.316863-7.53547 67.819227-7.53547 60.283758-7.033105zM350.238584 640.012559q6.028376 6.028376 10.549658 10.047293t8.540199 8.037834l8.037834 9.042564 12.056752 11.052022q20.094586 20.094586 17.582763 36.672619t-23.611138 37.677348q-19.089857 19.089857-40.189172 40.691536t-47.222277 47.724641q-18.085127 18.085127-22.606409 29.639514t8.540199 24.615868q10.047293 9.042564 22.606409 22.606409t22.606409 23.611138q17.080398 17.080398 12.559116 30.141879t-30.644243 16.075669-58.274299 7.033105-66.814498 8.037834-68.321592 8.037834-60.786122 7.033105q-25.118232 2.009459-35.66789-7.53547t-8.540199-33.658431q2.009459-25.118232 5.526011-56.767205t7.53547-64.805039 8.037834-65.809769 7.033105-59.781393q3.014188-30.141879 16.578033-37.677348t30.644243 9.544928q10.047293 10.047293 27.630056 26.122962t28.634785 27.127691q12.056752 12.056752 20.094586 10.549658t20.094586-14.568575q13.061481-13.061481 25.118232-25.620597t24.113503-24.615868 24.615868-25.118232 26.625326-27.127691q6.028376-6.028376 13.061481-12.056752t15.573304-9.042564 18.085127-0.502365 20.59695 13.563845z"
p-id="7129"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
以上svg部分都是网络资源，可以下载下来使用，svg图标库推荐阿里矢量图标库
js部分
<script type="text/javascript">
let videoBox_ele = document.querySelector(".videoBox");
let video = document.querySelector(".videoBox video");
let play_btn_ele = document.querySelector(".play_btn");
let play_next_ele = document.querySelector(".play_next");
let play_loop_ele = document.querySelector(".play_loop");
let play_time_mod = document.querySelector(".play_time_mod");
let button_speed_ele = document.querySelector(".button_speed");
let button_volume_ele = document.querySelector(".button_volume");
let button_fullscreen_ele = document.querySelector(".button_fullscreen");
let speed_list_ele = document.querySelector(".speed_list_wrap");
let progress_ele = document.querySelector(".progress");
let volume_bar_ele = document.querySelector(".volume_control .bar");
window.onload = function () {
video.dispatchEvent(new Event("canplay"));
}
// 播放暂停的时间监听
play_btn_ele.addEventListener("click", () => {
if (video.paused) {
video.play();
play_btn_ele.innerHTML = '<svg t="1588767533964" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8581" width="16" height="16"><path d="M243.2 208h166.4v608H243.2zM614.4 208h166.4v608h-166.4z" p-id="8582"></path></svg>';
play_btn_ele.setAttribute("title", "暂停");
} else {
video.pause();
play_btn_ele.innerHTML = '<svg t="1588766121795" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7908" width="20" height="20"><path d="M882.734114 459.147258l0.024559-0.024559L244.016061 21.12718l-0.199545 0.188288C230.582097 8.748245 212.62819 1.014096 192.840518 1.014096c-40.704051 0-73.699536 32.66905-73.699536 72.996524 0 22.148439-0.954745 65.513086 0 64.572668l0 373.422851 0 393.071354c0 0.325411 0 25.249057 0 44.935422 0 40.302915 32.995485 72.972988 73.699536 72.972988 19.862373 0 37.892005-7.78429 51.125401-20.466124l0.050142 0.025583 638.742613-437.982216-0.024559-0.038886c13.886265-13.270235 22.549575-31.889291 22.549575-52.531424 0-0.050142 0-0.088004 0-0.150426 0-0.050142 0-0.11154 0-0.149403C905.28369 491.048829 896.620379 472.41647 882.734114 459.147258z" p-id="7909" ></path></svg>';
play_btn_ele.setAttribute("title", "播放");
}
});
// 下一个视频
play_next_ele.addEventListener("click", () => {
video.src = "./static/v2.mp4";
play_btn_ele.dispatchEvent(new Event("click"));
});
// 开启视频循环
play_loop_ele.addEventListener("click", () => {
// 如果是true说明已经开启了
if (video.loop) {
video.loop = false;
play_loop_ele.innerHTML = `<svg t="1588776669166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3694" width="16" height="16"><path d="M668.16 798.72h-312.32C216.064 798.72 102.4 685.056 102.4 545.28v-35.84C102.4 369.664 216.064 256 355.84 256H808.96c16.9984 0 30.72 13.7216 30.72 30.72s-13.7216 30.72-30.72 30.72H355.84C249.9584 317.44 163.84 403.5584 163.84 509.44v35.84C163.84 651.1616 249.9584 737.28 355.84 737.28h312.32C774.0416 737.28 860.16 651.1616 860.16 545.28V522.24c0-16.9984 13.7216-30.72 30.72-30.72s30.72 13.7216 30.72 30.72v23.04C921.6 685.056 807.936 798.72 668.16 798.72z" p-id="3695"></path><path d="M798.72 389.12V174.08l107.52 107.52zM348.16 880.64a30.7712 30.7712 0 0 1-27.4432-44.544l327.68-655.36a30.68928 30.68928 0 0 1 41.1648-13.7216c15.1552 7.5776 21.2992 26.0096 13.7216 41.2672l-327.68 655.36A30.6176 30.6176 0 0 1 348.16 880.64z" p-id="3696"></path></svg>`;
play_loop_ele.setAttribute("title", "打开循环播放")
} else {
video.loop = true;
play_loop_ele.innerHTML = `<svg t="1588776795190" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3823" width="16" height="16"><path d="M943.985778 740.579556a34.759111 34.759111 0 0 0-47.872 10.410666c-106.183111 164.522667-312.888889 241.550222-502.471111 187.306667C226.588444 890.538667 103.424 749.624889 75.377778 583.253333l131.299555 88.064a35.100444 35.100444 0 0 0 48.241778-9.159111 34.417778 34.417778 0 0 0-9.272889-47.758222L54.044444 485.944889a35.470222 35.470222 0 0 0-6.115555-3.299556 35.413333 35.413333 0 0 0-4.636445-1.393777c-0.568889-0.113778-1.137778-0.455111-1.848888-0.568889a34.503111 34.503111 0 0 0-6.826667-0.682667h-0.113778c-0.711111 0-1.393778 0.227556-2.076444 0.227556-1.507556 0.113778-3.128889 0.227556-4.636445 0.455111-1.052444 0.227556-1.991111 0.568889-3.015111 0.910222-1.137778 0.341333-2.417778 0.682667-3.584 1.137778-0.796444 0.369778-1.507556 0.824889-2.304 1.137777-1.28 0.711111-2.56 1.28-3.697778 2.076445-0.483556 0.341333-0.824889 0.682667-1.28 1.052444-1.393778 1.024-2.787556 2.048-3.925333 3.299556l-0.341333 0.455111c-1.28 1.393778-2.673778 2.759111-3.697778 4.352-4.067556 5.973333-5.916444 12.714667-5.916445 19.342222v0.142222c1.393778 225.507556 155.335111 426.894222 374.442667 489.528889 218.965333 62.606222 457.585778-26.225778 580.209778-216.263111a34.190222 34.190222 0 0 0-10.666667-47.274666zM1024 509.411556v-0.113778c-1.507556-225.393778-155.448889-426.666667-374.385778-489.415111C430.648889-42.723556 192.170667 46.108444 69.404444 236.088889a34.304 34.304 0 0 0 10.524445 47.502222 34.844444 34.844444 0 0 0 47.872-10.410667c106.325333-164.551111 312.888889-241.493333 502.471111-187.192888C797.297778 133.688889 920.462222 274.375111 948.593778 440.604444l-131.271111-88.064a34.929778 34.929778 0 0 0-48.128 9.159112 34.417778 34.417778 0 0 0 9.244444 47.758222l191.544889 128.455111s0.113778 0 0.113778 0.113778c1.848889 1.137778 3.697778 2.161778 5.774222 3.072 1.735111 0.711111 3.612444 1.28 5.461333 1.706666 0.455111 0.142222 0.910222 0.369778 1.365334 0.483556 2.332444 0.455111 4.522667 0.682667 6.826666 0.682667h0.113778c0.711111 0 1.422222-0.227556 2.104889-0.227556 1.479111-0.113778 2.986667-0.227556 4.494222-0.455111 1.052444-0.227556 1.991111-0.568889 3.015111-0.910222 1.137778-0.341333 2.417778-0.682667 3.584-1.137778 0.796444-0.369778 1.507556-0.824889 2.304-1.137778 1.28-0.711111 2.56-1.28 3.697778-2.076444 0.483556-0.341333 0.824889-0.682667 1.28-1.052445a27.306667 27.306667 0 0 0 3.925333-3.299555c0.113778-0.113778 0.227556-0.341333 0.369778-0.455111 1.251556-1.393778 2.645333-2.759111 3.697778-4.352 4.039111-6.087111 5.888-12.828444 5.888-19.484445z" p-id="3824"></path></svg>`;
play_loop_ele.setAttribute("title", "关闭循环播放");
}
});
// 时间计算
video.addEventListener("play", () => {
});
// 视频时间更新事件
video.addEventListener("timeupdate", () => {
let progress_width = $(".progress").width();
let currentTime = video.currentTime;
let duration = video.duration;
let h_currentTime = parseInt(currentTime / 3600);
let m_currentTime = parseInt(currentTime / 60 % 60);
let s_currentTime = parseInt(currentTime % 60);
play_time_mod.querySelector(".time_current").innerHTML = `${h_currentTime < 10 ? "0" + h_currentTime : h_currentTime}:${m_currentTime < 10 ? "0" + m_currentTime : m_currentTime}:${s_currentTime < 10 ? "0" + s_currentTime : s_currentTime}`;
// 计算时间百分比
let percentage = Math.round(currentTime / duration * 100);
// 获取进度条节点
// progress_ele.setAttribute("value", percentage);
progress_ele.style.backgroundImage = `linear-gradient(to right, orange, orange ${percentage}%, #ffffff80 ${percentage}%, #ffffff80`;
$(".loadingCri").css({
left: parseInt(progress_width / 100) * percentage,
});
})
// 鼠标移动进度条改变
$(".mediaControls").on("mousedown", ".loadingCri", function (e) {
let progressWidth = $(".progress").width() - $(this).width();
let diff_value = e.clientX - this.offsetLeft;
$(document).on("mousemove", function (e) {
let leftVal = e.clientX - diff_value;
if (leftVal < 0) {
leftVal = 0
}
if (leftVal > progressWidth) {
leftVal = progressWidth;
}
$(".loadingCri").css({
left: leftVal
});
let p = leftVal / $(".progress").width();
video.currentTime = video.duration * p;
progress_ele.style.backgroundImage = `linear-gradient(to right, orange, orange ${p * 100}%, #ffffff80 ${p * 100}%, #ffffff80`;
});
});
// 加载条鼠标抬起清空事件
$(document).on("mouseup", function (e) {
$(document).unbind("mousemove");
});
// 判断是否可以开启静音是的变量
let isVolOff = false;
// 音量调节控制
$(".volume_control").on('mousedown', ".volume_dot", function (e) {
let volume_bar_height = $(".volume_control .bar").height() - $(this).height();
// 同时获取当前的音量值去初始化现在的音量显示
let video_volume = video.volume;
// 将滑块也设置到=对应音量的位置
$(".volume_dot").css({
top: volume_bar_height * (1 - video_volume)
});
volume_bar_ele.style.backgroundImage = `linear-gradient(to top, orange, orange ${video_volume * 100}%, #ffffff80 ${video_volume * 100}%, #ffffff80`;
let diff_value = e.clientY - this.offsetTop;
$(document).on("mousemove", function (e) {
let topVal = e.clientY - diff_value;
if (topVal < 0) {
topVal = 0
}
if (topVal > volume_bar_height) {
topVal = volume_bar_height;
}
$(".volume_dot").css({
top: topVal
});
let p = topVal / $(".volume_control .bar").height();
video.volume = 1 - p;
// video.currentTime = video.duration * p;
volume_bar_ele.style.backgroundImage = `linear-gradient(to top, orange, orange ${100 - p * 100}%, #ffffff80 ${100 - p * 100}%, #ffffff80`;
});
});
// 视频暂停
video.addEventListener("pause", () => {
})
// 视频加载成功事件监听
video.addEventListener("canplay", () => {
let duration = video.duration;
let h_duration = parseInt(duration / 3600);
let m_duration = parseInt(duration / 60 % 60);
let s_duration = parseInt(duration % 60);
play_time_mod.querySelector(".time_duration").innerHTML = `${h_duration < 10 ? "0" + h_duration : h_duration}:${m_duration < 10 ? "0" + m_duration : m_duration}:${s_duration < 10 ? "0" + s_duration : s_duration}`;
});
// 倍速按钮的事件
button_speed_ele.addEventListener("click", () => {
speed_list_ele.style.display = "block";
});
speed_list_ele.addEventListener("mouseleave", (e) => {
speed_list_ele.style.display = "none";
})
$(".speed_item").on("click", function () {
let value = $(this).attr("data-value");
$(this).addClass("s_select").siblings().removeClass("s_select");
video.playbackRate = value;
});
// 视频放大
button_fullscreen_ele.addEventListener("click", function () {
// 这里需要注意退出全屏的时候不能在给一个元素节点执行退出函数全屏状态需要使用document退出全屏
// 判断当前元素是否是全屏状态
if (document.webkitIsFullScreen || document.mozFullScreen || document.fullScreen) {
$(this).find("svg").replaceWith('')
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else {
alert("你的浏览器不支持退出全屏");
return false;
}
$(this).html('<svg t="1588852448418" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2060" width="16" height="16"><path d="M919.920093 725.414549q3.014188 26.122962 7.033105 58.776664t7.53547 66.814498 7.53547 67.819227 7.033105 60.786122q6.028376 47.222277-41.193901 44.208089-25.118232-2.009459-56.767205-5.526011t-64.805039-7.53547-65.809769-8.037834-59.781393-7.033105q-29.137149-3.014188-37.174984-16.578033t9.042564-30.644243q11.052022-10.047293 27.127691-27.630056t27.127691-28.634785q11.052022-12.056752 7.033105-22.104044t-16.075669-23.108774q-28.13242-27.127691-51.241194-49.231735t-51.241194-51.241194q-6.028376-6.028376-12.056752-13.061481t-9.042564-15.573304-1.004729-18.085127 13.061481-20.59695q6.028376-6.028376 10.047293-10.549658t8.037834-8.037834 8.540199-8.037834 11.554387-12.559116q20.094586-20.094586 37.174984-17.080398t37.174984 23.108774 41.193901 40.691536 47.222277 46.719912q19.089857 18.085127 32.653702 25.118232t26.625326-6.028376q9.042564-9.042564 22.606409-21.60168t23.611138-22.606409q17.080398-17.080398 30.644243-13.061481t16.578033 30.141879zM43.79615 383.80659q-3.014188-26.122962-7.033105-58.776664t-7.53547-66.814498-7.53547-67.819227-7.033105-60.786122q-3.014188-26.122962 6.53074-36.170255t33.658431-8.037834q25.118232 2.009459 56.767205 5.526011t64.805039 7.53547 65.809769 8.037834 59.781393 7.033105q30.141879 3.014188 37.677348 16.578033t-9.544928 30.644243q-10.047293 10.047293-24.615868 26.122962t-25.620597 27.127691q-12.056752 12.056752-8.037834 22.104044t17.080398 23.108774q13.061481 14.06621 24.615868 24.615868t22.606409 21.099315 23.108774 22.606409l25.118232 25.118232q6.028376 6.028376 11.554387 14.06621t8.037834 17.080398-0.502365 19.089857-13.061481 20.094586l-11.052022 11.052022q-4.018917 4.018917-7.53547 8.037834t-8.540199 8.037834l-11.052022 12.056752q-20.094586 20.094586-34.663161 15.070939t-34.663161-25.118232-38.179713-37.677348-44.208089-43.705724q-18.085127-18.085127-32.151337-25.118232t-27.127691 6.028376q-9.042564 10.047293-25.118232 24.615868t-26.122962 24.615868q-17.080398 17.080398-30.141879 13.061481t-16.075669-30.141879zM905.853883 84.397261q26.122962-3.014188 36.170255 6.53074t8.037834 34.663161-5.526011 56.767205-7.53547 64.805039-8.037834 65.809769-7.033105 59.781393q-3.014188 29.137149-16.578033 37.174984t-30.644243-10.047293q-10.047293-10.047293-26.122962-24.615868t-27.127691-25.620597q-12.056752-11.052022-22.104044-7.53547t-23.108774 16.578033q-27.127691 27.127691-47.724641 49.231735t-48.729371 50.236465q-6.028376 6.028376-14.06621 11.554387t-17.080398 8.037834-19.089857-0.502365-20.094586-14.06621q-6.028376-6.028376-10.549658-10.047293t-8.540199-8.037834-8.540199-8.037834-11.554387-12.056752q-20.094586-20.094586-16.075669-35.165525t25.118232-35.165525l38.179713-40.189172q19.089857-20.094586 45.212818-46.217547 19.089857-18.085127 26.122962-32.151337t-7.033105-26.122962q-9.042564-9.042564-23.108774-24.615868t-24.113503-25.620597q-17.080398-17.080398-13.061481-30.141879t30.141879-16.075669 58.776664-7.033105 67.316863-7.53547 67.819227-7.53547 60.283758-7.033105zM350.238584 640.012559q6.028376 6.028376 10.549658 10.047293t8.540199 8.037834l8.037834 9.042564 12.056752 11.052022q20.094586 20.094586 17.582763 36.672619t-23.611138 37.677348q-19.089857 19.089857-40.189172 40.691536t-47.222277 47.724641q-18.085127 18.085127-22.606409 29.639514t8.540199 24.615868q10.047293 9.042564 22.606409 22.606409t22.606409 23.611138q17.080398 17.080398 12.559116 30.141879t-30.644243 16.075669-58.274299 7.033105-66.814498 8.037834-68.321592 8.037834-60.786122 7.033105q-25.118232 2.009459-35.66789-7.53547t-8.540199-33.658431q2.009459-25.118232 5.526011-56.767205t7.53547-64.805039 8.037834-65.809769 7.033105-59.781393q3.014188-30.141879 16.578033-37.677348t30.644243 9.544928q10.047293 10.047293 27.630056 26.122962t28.634785 27.127691q12.056752 12.056752 20.094586 10.549658t20.094586-14.568575q13.061481-13.061481 25.118232-25.620597t24.113503-24.615868 24.615868-25.118232 26.625326-27.127691q6.028376-6.028376 13.061481-12.056752t15.573304-9.042564 18.085127-0.502365 20.59695 13.563845z" p-id="2061"></path></svg>');
} else {
if (videoBox_ele.requestFullscreen) {
videoBox_ele.requestFullscreen();
} else if (videoBox_ele.webkitRequestFullScreen) {
videoBox_ele.webkitRequestFullScreen();
} else if (videoBox_ele.mozRequestFullScreen) {
videoBox_ele.mozRequestFullScreen();
} else if (videoBox_ele.msRequestFullScreen) {
videoBox_ele.msRequestFullScreen();
} else {
alert("你的浏览器不支持全屏");
return false;
}
$(this).html('<svg t="1588852227574" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1932" width="16" height="16"><path d="M400.595 345.365l-0.948-245.022c-0.42-18.881-16.018-30.215-34.956-30.637h-25.406c-18.88-0.42-33.874 16.018-33.457 34.881l1.061 133.251L138.772 72.417c-18.274-18.311-47.844-18.311-66.119 0-18.218 18.314-18.218 47.907 0 66.236l166.575 164.885-127.697 0.512c-18.88-0.477-36.394 12.606-39.26 34.899v24.08c0.477 18.917 16.077 34.558 34.957 34.972l243.826-1.438c0.362 0.035 0.608 0.171 0.928 0.171l17.1 0.378c9.441 0.226 17.9-3.467 23.923-9.593 6.124-6.083 8.382-14.58 8.131-24.078l-1.821-17.138c0.001-0.335 1.27-0.562 1.27-0.945z m365.616 356.086l127.524-0.512c18.88 0.421 36.357-11.183 39.26-33.474v-24.077c-0.478-18.922-16.134-34.558-34.957-35.037l-240.702 1.458c-0.378 0-0.605-0.151-0.967-0.151l-17.062-0.42c-9.441-0.226-17.95 3.469-23.98 9.611-6.159 6.03-8.361 14.559-8.173 24.057l1.881 17.1c0.033 0.42-1.234 0.661-1.234 0.986l0.986 241.248c0.477 18.863 16.078 30.162 34.957 30.576l24.017 0.037c18.827 0.433 33.874-16.055 33.403-34.941l-1.062-130.388 168.117 166.502c18.276 18.314 47.809 18.314 66.085 0 18.255-18.31 18.255-47.906 0-66.218L766.209 701.442z m-373.219-82.596c-6.028-6.14-14.541-9.834-23.923-9.61l-17.104 0.42c-0.346 0-0.566 0.151-0.948 0.151l-243.81-1.458c-18.881 0.478-34.503 16.112-34.956 35.034v24.078c2.843 22.292 20.357 33.892 39.206 33.474l129.158 0.42-167.983 166.37c-18.234 18.255-18.234 47.906 0 66.218 18.256 18.314 47.845 18.314 66.102 0l168.137-165.418-1.079 131.185c-0.42 18.922 14.579 35.413 33.424 34.938h25.406c18.937-0.477 34.54-11.713 34.956-30.637l0.987-243.05c0-0.346-1.267-0.571-1.267-0.949l1.821-17.104c0.206-9.495-1.993-18.025-8.116-24.053z m222.442-231.296c6.03 6.123 14.541 9.819 23.965 9.553l17.06-0.378c0.378 0 0.608-0.132 0.986-0.19l244.19 1.457c18.88-0.434 34.482-16.078 34.956-34.994l0.058-24.078c-2.898-22.331-20.439-35.355-39.26-34.939l-129.573-0.511 166.483-164.893c18.31-18.235 18.31-47.83 0.054-66.143-18.276-18.311-47.809-18.311-66.084 0L700.152 238.89l1.079-134.276c0.454-18.863-14.598-35.355-33.424-34.939H643.79c-18.881 0.477-34.484 11.773-34.957 30.637l-0.967 245.075c0 0.378 1.251 0.608 1.251 0.948l-1.859 17.138c-0.192 9.499 2.007 17.991 8.173 24.078z" p-id="1933"></path></svg>');
}
});
window.onresize = function () {
if (video.paused) {
play_btn_ele.innerHTML = '<svg t="1588766121795" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7908" width="20" height="20"><path d="M882.734114 459.147258l0.024559-0.024559L244.016061 21.12718l-0.199545 0.188288C230.582097 8.748245 212.62819 1.014096 192.840518 1.014096c-40.704051 0-73.699536 32.66905-73.699536 72.996524 0 22.148439-0.954745 65.513086 0 64.572668l0 373.422851 0 393.071354c0 0.325411 0 25.249057 0 44.935422 0 40.302915 32.995485 72.972988 73.699536 72.972988 19.862373 0 37.892005-7.78429 51.125401-20.466124l0.050142 0.025583 638.742613-437.982216-0.024559-0.038886c13.886265-13.270235 22.549575-31.889291 22.549575-52.531424 0-0.050142 0-0.088004 0-0.150426 0-0.050142 0-0.11154 0-0.149403C905.28369 491.048829 896.620379 472.41647 882.734114 459.147258z" p-id="7909" ></path></svg>';
play_btn_ele.setAttribute("title", "暂停");
} else {
play_btn_ele.innerHTML = '<svg t="1588767533964" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8581" width="16" height="16"><path d="M243.2 208h166.4v608H243.2zM614.4 208h166.4v608h-166.4z" p-id="8582"></path></svg>';
play_btn_ele.setAttribute("title", "播放");
}
video.dispatchEvent(new Event("timeupdate"));
}
// 音量控制
$(button_volume_ele).on("click","svg", () => {
$(".volume_wrap").show();
$(".volume_dot").trigger("mousedown").trigger("mouseup");
// 保证每次音量开启是点击两次才可以切换至静音状态
if (!isVolOff) {
isVolOff = !isVolOff;
return false;
}
if (video.muted) {
video.muted = false;
$(button_volume_ele).find("svg").replaceWith(`<svg t="1588776383799" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1460" width="16" height="16"><path d="M218.495828 334.609871c-0.390903-0.019443-0.773619-0.019443-1.164522-0.019443L100.022553 334.590428c-21.744233 0-39.087227 17.448394-39.087227 39.001269l0 273.866415c0 21.551852 17.505699 38.999223 39.087227 38.999223l117.308753 0c0.057305 0 0.113587 0 0.171915 0l0 0.153496 287.22056 185.975668c6.824429 5.842055 15.691377 9.354042 25.370831 9.354042 21.590737 0 39.096437-17.505699 39.096437-39.095413 0-1.794879-0.124843-3.551896-0.354064-5.270027L568.836985 183.473685c0.229221-1.718131 0.354064-3.475148 0.354064-5.269004 0-21.590737-17.505699-39.096437-39.096437-39.096437-8.895601 0-17.105586 2.977821-23.682375 7.979742L218.495828 334.609871z" p-id="1461"></path><path d="M757.858012 953.491133l0.085958 0.075725c123.876332-107.514689 202.211445-266.13329 202.211445-443.041442 0-177.214121-78.603219-336.062965-202.851011-443.61654l-0.11461 0.11461c-4.963035-3.817955-11.17655-6.109138-17.925255-6.109138-16.197914 0-29.322839 13.133112-29.322839 29.321816 0 6.757914 2.28095 12.981662 6.109138 17.926278l-0.333598 0.342808c0.821715 0.706081 1.641383 1.393743 2.462075 2.119267 1.173732 1.202385 2.452865 2.329045 3.817955 3.321652 110.054535 96.710622 179.51349 238.550071 179.51349 396.578224 0 158.02713-69.458955 299.866578-179.51349 396.577201-1.36509 0.99363-2.644223 2.118244-3.817955 3.321652-0.600681 0.533143-1.212618 1.048889-1.822508 1.564635l0.229221 0.230244c-4.152577 5.058203-6.643304 11.530614-6.643304 18.593474 0 16.188704 13.124925 29.321816 29.322839 29.321816C746.317165 960.134437 752.798786 957.651896 757.858012 953.491133z" p-id="1462"></path><path d="M713.998085 729.35433l0.23843 0.24764c55.380308-56.43022 89.532129-133.76454 89.532129-219.077577 0-85.409229-34.228569-162.800853-89.704045-219.249493l-0.268106 0.267083c-4.886287-3.64604-10.966773-5.821589-17.543561-5.821589-16.197914 0-29.322839 13.133112-29.322839 29.321816 0 6.566556 2.166339 12.657274 5.822612 17.544585l-0.162706 0.170892c0.773619 0.782829 1.547239 1.584078 2.310625 2.38635 0.075725 0.076748 0.152473 0.171915 0.23843 0.248663 43.3626 45.587268 69.983911 107.248629 69.983911 175.132716 0 67.884087-26.621311 129.544425-69.983911 175.131693-0.085958 0.077771-0.162706 0.171915-0.23843 0.24764-0.706081 0.74599-1.422396 1.471514-2.13871 2.214435l0.144286 0.134053c-3.751441 4.926196-5.976108 11.092639-5.976108 17.754363 0 16.188704 13.124925 29.321816 29.322839 29.321816C702.925912 735.328391 709.072913 733.113957 713.998085 729.35433z" p-id="1463"></path></svg>`)
} else {
$(".volume_wrap").hide();
isVolOff = !isVolOff;
video.muted = true;
$(button_volume_ele).find("svg").replaceWith('<svg t="1588776130184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1156" width="16" height="16"><path d="M469.726 139.266v0l-217.47 163.104h-135.985c-37.804 0-67.889 30.141-67.889 67.327v273.082c0 36.683 30.397 67.327 67.889 67.327h135.985l217.47 163.104c30.237 22.675 54.353 10.267 54.353-27.359v-679.232c0-37.152-24.338-49.873-54.353-27.359z" p-id="1157"></path><path d="M887.187 538.378l69.126-69.126c22.907-22.907 22.907-60.044 0-82.958v0c-22.907-22.907-60.044-22.907-82.958 0l-69.126 69.126-69.126-69.126c-22.907-22.907-60.044-22.907-82.958 0s-22.907 60.044 0 82.958l69.126 69.126-69.126 69.126c-22.907 22.907-22.907 60.044 0 82.958v0c22.907 22.907 60.044 22.907 82.958 0l69.126-69.126 69.126 69.126c22.907 22.907 60.044 22.907 82.958 0v0c22.907-22.907 22.907-60.044 0-82.958l-69.126-69.126z" p-id="1158"></path></svg>')
}
});
$(".volume_wrap").on("mouseleave", function () {
isVolOff = !isVolOff;
$(this).hide();
})
</script>
功能实现详解
播放功能
播放操作我们需要使用video.play()api
暂停功能
暂停功能我们需要video.pause()api
时间更新操作
需要timeupdate的监听然后重新计算媒体的时间
时间拖拽功能
需要自定拖拽组件，具体功能如何实现请看上面代码
倍速设置
需要使用video.playbackRateapi
声音设置
和时间拖拽原理一样，需要使用apivideo.volume
放大缩放操作
对不同的浏览器需要使用不同的兼容处理问题
if (document.webkitIsFullScreen || document.mozFullScreen || document.fullScreen) {
$(this).find("svg").replaceWith('')
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else {
alert("你的浏览器不支持退出全屏");
return false;
}
} else {
if (videoBox_ele.requestFullscreen) {
videoBox_ele.requestFullscreen();
} else if (videoBox_ele.webkitRequestFullScreen) {
videoBox_ele.webkitRequestFullScreen();
} else if (videoBox_ele.mozRequestFullScreen) {
videoBox_ele.mozRequestFullScreen();
} else if (videoBox_ele.msRequestFullScreen) {
videoBox_ele.msRequestFullScreen();
} else {
alert("你的浏览器不支持全屏");
return false;
}
}