画像の表示時間が不規則なアニメーション GIF を作成するにはどうすればよいですか?

Question

別の方法を見つけました。どうやら、アニメーション GIF のフレームはすべて同じ時間だけ表示されるようです。

写真を表示し、同時に音楽を再生するために、JavaScript を少し書きました。興味のある方のために、完全なコードを以下に示します。

<HTML>
<head>

<title>FuzzyWuzzy</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

table {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

</head>

<body>

<audio id="SONG">
  <source src="Fuzzy_Wuzzy_Was_A_Bear_10sec.ogg" type="audio/ogg">
  <source src="Fuzzy_Wuzzy_Was_A_Bear_10sec.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>


<table style="width:100%" id="table" name="table">
<tr>
<div> <img src="PNG/bear1_vid.png" id="pic" style="height:80%"></div>
</tr>
<tr>
<div id="text"><div>
</tr>
<tr>
<button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>
</tr>
</table>

<script>

document.getElementById("text").innerHTML = " ";

video();

function video() {
  var x = document.getElementById("SONG"); 
  x.play(); 
    
setTimeout(function () {
    document.getElementById("pic").src = "PNG/bear1_vid.png"; 
    
  setTimeout(function () {
    document.getElementById("pic").src = "PNG/bear2_vid.png";
    setTimeout(function () {
      document.getElementById("pic").src = "PNG/bear3_vid.png";
      setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear4_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear5_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear6_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/worm1_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/worm2_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/worm3_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/worm4_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse1_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse2_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse3_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse4_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse5_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse6_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear2_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear3_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear4_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear5_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear6_vid.png";
        }, 2400); // Bear
        }, 2350);
        }, 2450);
        }, 2400);
        }, 4800);
        
        }, 2450); // Mouse
        }, 2350);
        }, 2450);
        }, 2350);
        }, 4800);
        }, 9600);
        
        }, 4800); // Worm
        }, 4900);
        }, 4300);
        }, 10000);
        
        }, 2450); // Bear
        }, 2350);
        }, 2450);
      }, 2300);
    }, 5250);
  }, 10000);
  }

var elem = document.getElementById("pic");
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
  
</script>

</body>
</HTML>

PNG というサブディレクトリに同じ名前の PNG 画像 (例: bear1_vid.png) がある場合は、正常に動作するはずです。期間はミリ秒単位で、逆順に記述されます (ネストされた setTimeout のため)。その後、必要に応じて調整します。ファイルを「something.html」に保存し、ブラウザで開きます (私は Firefox を使用しています)。

その後、フルスクリーンで再生できるようになりました。オーディオファイルの先頭に 10 秒間の無音を追加し、最初の画像を 10 秒間追加表示するようにしました。画像については、コードで確認できます。オーディオに無音を追加するには、Audacity を使用しました (ファイルの先頭にカーソルを置き、[生成/無音] を選択します)。

フルスクリーンで録画するには、これらの秒数を追加する必要がありましたが、これが最も簡単なオプションです。私は、使いやすい SimpleScreenRecorder を使用しました。「カーソルを録画」ボックスの選択を解除することを忘れないようにするだけです。録画の初めに、Firefox が開き、「このビデオは現在フルスクリーンです」というばかげたメッセージが表示されました。このメッセージを削除する方法がまだわかりません (まだ?)。まるで、ビデオがフルスクリーンであることを知らなかったかのようです。

とにかく、最終的に .mkv ビデオが完成し、「もうすぐ完成だ。あとはビデオの最初と最後を切り取る方法を見つけるだけだ」と思いました。

はは。

animationmaker が PC をクラッシュさせました。avidemux がインストールされませんでした。パイプが壊れました。vidcutter は保存したい部分を削除し続け、削除したい部分を保存します。oneshot は 10 秒で止まりませんでした。9 秒から 10.3 秒にジャンプし続けました。kdenlive で「カット」コマンドが見つかりませんでした。開始時間と継続時間を慎重に設定したにもかかわらず、ffmpeg はビデオ全体をコピーしました。avconv は apt-cache 検索で見つかりませんでした。

Pitivi がついにそのトリックを成功させました。これならとても簡単です。左側の小さなサブウィンドウにビデオファイルを読み込み、トラックにドラッグして、カットしたい場所にカーソルを置きます。カットボタンと削除ボタンはウィンドウの右側にあります。カットされた部分はクリックして選択し、削除をクリックします。カットした部分がビデオの先頭にある場合は、残りの部分を開始位置に向かってドラッグします。

保存するには、「保存」をクリックせずに、「レンダリング」をクリックします。出力形式を選択できます。私は mp4 と ogv を選択しました。mp4 はサイズが小さく、ogv は品質が優れています。レンダリングにはしばらく時間がかかります。

しかし、私がそれをすべて理解するのに要した時間に比べれば、はるかに短い時間でした :)。

Answer 1