Как сделать что бы при нажатие на элемент полоски заменялись на треугольник

Question

Хай, у меня есть один элемент с плеера(2 полоски) можно ли как ни будь сделать что при нажатие эти полоски менялись на треугольник( и обратно),

var myVideo = document.getElementById("video"); 
    
function playPause() { 
  if (myVideo.paused) 
    myVideo.play(); 
  else 
    myVideo.pause(); 
}

body {
  background: darkblue;
}

video {
  margin-top: 10%;
  margin-left: 30%;
}

#r {
  border-left: 3px solid white;
  height: 20px;
  position: absolute;
}

#r2 {
  border-left: 3px solid white;
  height: 20px;
  margin-left: 10px;
}

#pl {
  width:30px;
}

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>xz</title>
  </head>
  <body>
    <video id="video" width="750" height="500"  src="1.mkv" autoplay  loop></video>
    <p ></p> 
    <div onclick="playPause()" id="pl">
        <div id="r"></div>
        <div id="r2"></div>
    </div>
  </body>
</html>

БЛОГ НА HUSL

Как сделать что бы при нажатие на элемент полоски заменялись на треугольник

Ответы (0 шт):