Clever Geek Handbook

JavaScriptでの画像とビデオファイルのフルスクリーンループスライドショー

最近、メモリカードのスペースを節約するために、必要なGIFの束をMP4形式に変換するとよいと思いました。結果のビデオファイルをループで視聴できるようにしたかったのです。悲しいことに、MacのQuickLookはこれを行いません。





スライドショー



それで、私は自分の問題に取り組み、必要なものを提供する純粋なJavaScriptで小さなプロジェクトをすばやく作成しました 。 ここでそれを試すことができます。そして、 ここでのアクションでそれを証明するビデオがあります。



機会



ループスライドショーを整理するためのJavaScriptプロジェクトの可能性の中で、次の点に注意したいと思います。



  • .
  • . (- «» «» , «» .)
  • - X .
  • - , .
  • -. , .




HTMLページでスライドショーを使用するには、プログラムが要素を作成するコンテナを提供し、オブジェクトプロパティの値を設定してパラメータを設定する必要があります slideshow



。これらのプロパティは次のとおりです。



  • container



    ：スライドショーを配置するDOM内のHTML要素への参照。
  • media



    ：表示するビデオファイルと画像の名前を含む配列。
  • folder



    ：上記の資料を含むフォルダー。スライドショー機能を実装するファイルを含むフォルダーのサブディレクトリである必要があります。
  • autoplay



    ：スライドショーを自動的に再生するかどうかを示すプロパティ。yes



    （自動再生を有効にする）またはno



    （自動再生を無効にする）の2つの値のいずれかを含めることができます。
  • speed



    ：次の資料の表示に進む前にプログラムが保持するミリ秒単位の時間（たとえば、値1000は1秒を意味します）。


<div id="slideshow-container"></div>
<script>
  let slideshow = {
    container: '#slideshow-container',
    media: [
    'ball.mp4','dinowalk.mp4','dirty.mp4',
    'goldiejump.mp4','step.mp4','tippy.mp4','wag.mp4'
    ],
    folder: 'imgs/',
    autoplay: 'yes'
  }
</script>
<script src="slideshow.js"></script>


メディアファイルのコレクションを自動的に処理



私は現在、スクリプトを使用してローカルサーバーでこのプロジェクトを使用しています index.php



。Macを使用している人の場合、PHPはすでにインストールされています。したがって、プロジェクトを開始するには、ターミナルを開き、プロジェクトマテリアルのあるフォルダーに移動して、次のコマンドを実行するだけです。 



$ php -S localhost:8000


次に、ブラウザを使用してアドレスlocalhost:8000



に移動すると、プログラムが残りの作業を自動的に実行 します。



特に、スクリプトindex.php



はスクリプト と同じディレクトリ内のすべてのフォルダを検索し、それらを一覧表示します。いずれかのフォルダの名前をクリックすると、そのフォルダからファイルの再生が開始されます。このスクリプトのコードは簡単に見ることができますが、特別なことは何もないとすぐに言います。



コードは index.php



で見つけることができ 、プロジェクトのリポジトリ。独自のスライドショーの表示を開始するには、リポジトリのクローンを作成するか 、ZIPアーカイブとしてダウンロードします。



ループしたスライドショーを表示する問題をどのように解決しますか？





More articles:


All Articles