2017年1月21日土曜日

HTML による動画の連続再生(2)

2016年2月14日の記事、「Google ドライブに置いた動画の連続再生」をバージョンアップ した。登録した動画数が増えたため、好きなところから再生開始出来るようにしないと勝手が悪い。次の機能追加。
  1. スキップボタンの種類を増やす
  2. 再生画面サイズを3種類から選択
  3. 再生中のファイル名を表示する
  4. ランダム再生のチェックボックス
    いわゆる再生リストであり、「パソコンに付いてくるソフトでも済むこと」なので無くても困らないわけで、途中で何度もめげそうになった。

    1.スキップボタンに、5, 10, 20 を追加
    「クリックした行から再生開始」にしたかったが、難しそうだったのでこの方法にした。

    ↓スキップボタン毎にスキップ数を渡す
    <form>
    <input type="button" value="スキップ" onclick="NextVideo(1)">
    <input type="button" value="スキップ5" onclick="NextVideo(5)">
    <input type="button" value="スキップ10" onclick="NextVideo(10)">
    <input type="button" value="スキップ20" onclick="NextVideo(20)">
    </form>

    2.動画再生サイズを3種類から選択出来る
    ラジオボタンによる選択方法にしたかったが、簡単なボタン方式にした。

    ↓ボタンから画面サイズを指定する関数に値を渡す
    <form>
    <input type="button" value="640W"onclick="setWidth('640');">
    <input type="button" value="960W"onclick="setWidth('960');">
    <input type="button" value="1280W"onclick="setWidth('1280');">
    </form>

    ↓ 画面サイズの width を書き換える関数(id="Videoplay の width に $width を適用する)
    function setWidth( $width ) {
        var $elementReference = document.getElementById( "Videoplay" );
        $elementReference.width = $width;
    }

    3.再生中のファイル名を表示する
    ↓ id="VideoTitle"を書き換える(配列にファイル名が入っている)
    document.getElementById( "VideoTitle" ).innerHTML = mp4Array[n];

    4.ランダム再生
    ランダム再生は、再生開始時に調べて分岐すればOK
    ↓チェックボックスを調べる
    flagrand = document.getElementById("ds").checked;

    ↓ 乱数を返す関数を使う(ファイル名配列の要素数の間でランダムな数値を返す)
    function getRandomInt(max) {
      return Math.floor( Math.random() * (max - 1) );
    }

    結び
    前作は、ほぼコピペみたいなものだったが、「画像サイズを変える」機能が「該当する id の要素の属性を書き換える」と理解出来たことでステップアップ。ファイル名表示も同じ事。