Как я могу создать график, похожий на видеоредактор, в HTML? - PullRequest
Новая
       131

Как я могу создать график, похожий на видеоредактор, в HTML?

0 голосов
/ 24 апреля 2020

Я пытаюсь создать временную шкалу с указателем воспроизведения (с треугольником сверху, поэтому его легко перетаскивать). У меня база написана на моем сайте , и я пытаюсь добавить туда клипы с изменяемым размером, с миниатюрами и именами, похожими на Cyberlink PowerDirector, но я не могу заставить клипы перетаскивать. Кроме того, любые советы, которые я должен использовать для предварительного просмотра: <video> или <canvas>?

HTML: 

<!DOCTYPE html>
<html>
<head>
<title>awesomeVideo</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>

<ul>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">File</a>
    <div class="dropdown-content">
      <a href="#">New</a>
      <a href="#">Open</a>
      <a href="#">Save</a>
      <a href="#">Save As...</a>
      <a href="#">Etc.</a>
      <a href="#">These don't do anything</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Edit</a>
    <div class="dropdown-content">
      <a href="#">Undo</a>
      <a href="#">Redo</a>
      <a href="#">History...</a>
      <a href="#">Etc.</a>
      <a href="#">These don't do anything</a>
    </div>
  </li>
</ul>

<div class="timeline"></div>

</body>
</html>

CSS: 

* {
    font-family: Verdana, Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #444455;
    color: #FFFFFF;
    margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(#444455, #333333);
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 4px;
  text-decoration: none;
  border-radius: 4px;
}

li a:hover, .dropdown:hover .dropbtn {
  background: linear-gradient(#444444, #555566);
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333333;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  padding: 4px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
    background-color: #555566;
}

.dropbtn:hover + .dropdown-content {
  display: block;
}

.dropdown-content:hover{
  display: block;
}

.timeline {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50vh;
  background: linear-gradient(#555566, #444444);
  cursor: move;
}

JS:
...