搜索

+

87

-

如何编写一个多个视频合并的时间轴任意位置指针播放预览效果的html代码？

html5 javascript 音视频

如何编写一个多个视频合并的时间轴任意位置指针播放预览效果的html代码？

可以本地选择多个视频到时间轴，然后预览的时候可以从任意位置开始预览合并后的视频？

网友回复

+

10

-

参考这个

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>时间轴剪辑播放器</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 20px;
    }

    #preview {
      width: 600px;
      height: 340px;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #preview img, #preview video {
      max-width: 100%;
      max-height: 100%;
    }

    #timelineWrapper {
      position: relative;
      width: 100%;
      margin-top: 20px;
      overflow-x: auto;
    }

    #timeline {
      display: flex;
      height: 100px;
      border: 2px dashed #ccc;
      padding: 10px;
      position: relative;
      min-width: 600px;
    }

    .clip {
      width: 100px;
      height: 80px;
      margin-right: 5px;
      border: 1px solid #999;
      background-size: cover;
      background-position: center;
      position: relative;
    }

    #pointer {
      position: absolute;
      width: 2px;
      background: red;
      top: 0;
      bottom: 0;
      left: 0;
      cursor: ew-resize;
    }

    #controls {
      margin-top: 20px;
    }

    button {
      margin-right: 10px;
    }
  </style>
</head>
<body>

<h2>剪辑时间轴播放器</h2>

<div id="preview"></div>

<div id="timelineWrapper">
  <div id="timeline" ondragover="event.preventDefault()" ondrop="handleDrop(event)">
    <div id="pointer"></div>
  </div>
</div>

<div id="controls">
  <button onclick="playSequence()">播放</button>
  <button onclick="pauseSequence()">暂停</button>
  <button onclick="stopSequence()">停止</button>
</div>

<script>
  const timeline = document.getElementById('timeline');
  const pointer = document.getElementById('pointer');
  const preview = document.getElementById('preview');

  let clips = [];
  let totalDuration = 0;
  let currentIndex = 0;
  let currentTime = 0;
  let isPaused = false;
  let isStopped = false;
  let pointerInterval = null;

  function handleDrop(event) {
    event.preventDefault();
    const files = Array.from(event.dataTransfer.files);

    files.forEach(file => {
      const url = URL.createObjectURL(file);
      const ext = file.name.split('.').pop().toLowerCase();
      let type = '';

      if (['mp4', 'webm', 'ogg'].includes(ext)) {
        type = 'video'...

点击查看剩余70%

by 钱端世界

我知道答案，我要回答

我有问题

私活外包

最新提问