Hello, I need help. I am beginner.<!DOCTYPE html>
<html lang="lt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
button{
position: relative;
top: 26px;
width:30px;
background-color:#ffffff;
border:none;
}
button i i{
display: inline-block;
width: 2px;
height: 20px;
background:#00B875;
animation: mymove 1.2s infinite;
}
.play1 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
.play2 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
.play3 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
.play4 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
.play5 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
@keyframes mymove {
from {height: 6px;}
to {height: 12px;}
}
.pause1 {animation-timing-function: step-end;}
.pause2 {animation-timing-function: step-end;}
.pause3 {animation-timing-function: step-end;}
.pause4 {animation-timing-function: step-end;}
.pause5 {animation-timing-function: step-end;}
</style>
</head>
<body>
<button onclick="myFunction()">
<i id = 1 class="play">
<i class="play1"></i>
<i class="play2"></i>
<i class="play3"></i>
<i class="play4"></i>
<i class="play5"></i>
</i>
<i id = 2 class="pause">
<i class="pause1"></i>
<i class="pause2"></i>
<i class="pause3"></i>
<i class="pause4"></i>
<i class="pause5"></i>
</i>
</div>
</button>
<script>
var myVideo = document.getElementById("9");
var isPlaying = false;
function myFunction(){
if (isPlaying) {
myVideo.pause();
document.getElementById("1").style.opacity = "0";
} else {
myVideo.play();
document.getElementById("2").style.opacity = "0";
}
};
myVideo.onplaying = function() {
isPlaying = true;
};
myVideo.onpause = function() {
isPlaying = false;
};
</script>
</body>
</html>
There are two buttons here, it's not good. Thank you.