LoginSignup
24

More than 5 years have passed since last update.

いまさらHTML5 (簡易プレイヤー編)

Posted at

はじめに

mp3やmp4のプレイヤーは、世間的には「Windows Media Player」が一番利用されているのではないかと思いますが
HTML5をやってみて、ブラウザでも再生できるのではと思い、AUDIOタグとVIDEOタグを利用して、プレイヤーを作ってみます。

簡易プレイヤー

以下を満たすものを作成します。

  • 1ファイルで作成(JQueryとか使わない)
  • ファイル追加はドラッグ・アンド・ドロップ
  • 連続再生(ファイル順に再生)

JQueryが使えないのでaddEventListenerでイベント設定を行います。
連続再生は、AUDIOタグやVIDEOタグのendedイベントを受信したら次を再生する仕組みにしています。
(シークしまくっていたら、endedイベントが来ない事があったので、次へボタンを作成しました。)

simpleplayer.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>簡易プレイヤー</title>
    <script type="text/javascript">
        // VIDEOタグ
        var video = null;
        // AUDIOタグ
        var audio = null;
        // ファイル一覧
        var list = [];
        // 初期処理
        function init() {
            // ファイルドロップイベント設定
            document.getElementById("drop").addEventListener("dragover", eventStop, false);
            document.getElementById("drop").addEventListener("drop", filedrop, false);
            // VIDEOタグ取得
            video = document.getElementById("video");
            // 終了イベント取得設定
            video.addEventListener("ended", playerEvent, false);
            // VIDEO非表示
            video.style.display = "none";
            // AUDIOタグ取得
            audio = document.getElementById("audio");
            // 終了イベント取得設定
            audio.addEventListener("ended", playerEvent, false);
            // AUDIO非表示
            audio.style.display = "none";
            // 次へボタン押下イベント設定
            document.getElementById("next").addEventListener("click", next, false);
            // 次へボタン非表示
            document.getElementById("next").style.display = "none";
        }
        // ファイルがドラッグされた場合
        function eventStop(event) {
            // イベントキャンセル
            event.stopPropagation();
            event.preventDefault();
            // 操作をリンクに変更
            event.dataTransfer.dropEffect = "link";
        }
        // ファイルがドロップされた場合
        function filedrop(event) {
            try {
                // イベントキャンセル
                event.stopPropagation();
                event.preventDefault();
                // ファイル存在チェック
                if (event.dataTransfer.files) {
                    var old = list.length;
                    // ファイル一覧取得
                    var files = event.dataTransfer.files;
                    // ファイル数分ループ
                    for (var i = 0; i < files.length; i++) {
                        // ファイル取得
                        var file = files[i];
                        // 再生可能ファイルであるか判定
                        if (video.canPlayType(file.type) || audio.canPlayType(file.type)) {
                            // ファイル情報生成
                            var item = {
                                name: file.name,
                                type: file.type,
                                url: URL.createObjectURL(file)
                            };
                            // ファイル追加
                            list.push(item);
                        }
                    }
                    // 表示
                    view();
                    // 最初であるか判定
                    if (old == 0 && list.length > 0) {
                        // 次へボタン表示
                        document.getElementById("next").style.display = "block";
                        // 次を再生(最初)
                        next();
                    }
                }
            } catch (e) {
                // エラーの場合
                alert(e.message);
            }
        }
        // 次を再生
        function next() {
            // ファイル数チェック
            if (list.length > 0) {
                // 最初のファイルを設定
                var item = list[0];
                // ファイル数分ループ
                for (var i = 0; i < list.length; i++) {
                    // VIDEOタグかAUDIOタグと一致するか判定
                    if (video.src === list[i].url || audio.src === list[i].url) {
                        // 最後のファイルか判定
                        if (i != list.length - 1) {
                            // 次のファイルを設定
                            item = list[i + 1];
                            break;
                        }
                    }
                }
                // AUDIO停止
                audio.pause();
                // VIDEO停止
                video.pause();
                // タイプ判断
                if (item.type.indexOf("audio/") == 0) {
                    // AUDIOなので、VIDEO初期化
                    video.src = "";
                    video.style.display = "none";
                    // AUDIO表示
                    audio.style.display = "block";
                    // 前回とURLが異なるか判定
                    if (audio.src != item.url) {
                        // URL更新
                        audio.src = item.url;
                    }
                    // AUDIO再生
                    audio.play();
                } else if (item.type.indexOf("video/") == 0) {
                    // VIDEOなので、AUDIO初期化
                    audio.src = "";
                    audio.style.display = "none";
                    // VIDEO表示
                    video.style.display = "block";
                    // 前回とURLが異なるか判定
                    if (video.src != item.url) {
                        // URL更新
                        video.src = item.url;
                    }
                    // VIDEO再生
                    video.play();
                }
                // ファイル名表示
                document.getElementById("playfilename").textContent = item.name;
            }
        }
        // イベント取得
        function playerEvent(event) {
            // イベントタイプ判定
            if (event.type == "ended") {
                // 終了なので、次へ
                next();
            }
        }
        // 表示
        function view() {
            // 表示されているリスト取得
            var nodes = document.getElementById("playlist").childNodes;
            // 全部削除
            while (nodes.length > 0) {
                document.getElementById("playlist").removeChild(nodes[0]);
            }
            // リスト数分追加
            for (var i = 0; i < list.length; i++) {
                var div = document.createElement("div");
                div.textContent = list[i].name;
                document.getElementById("playlist").appendChild(div);
            }
            // 表示幅調整
            document.getElementById("playlist").style.width = "100%";
        }
        // ロードイベント登録
        window.addEventListener("load", init, false);
    </script>
</head>
<body>
    <div id="drop" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; overflow: auto;">
        <table>
            <tbody>
                <!-- ファイル名&次へ部分 -->
                <tr>
                    <td colspan="2"><div id="playfilename"></div></td>
                    <td style="width: 50px"><button id="next" style="width: 50px">次へ</button></td>
                </tr>
                <!-- プレイヤー部分 -->
                <tr>
                    <td colspan="3" style="width: 400px; height: 40px;">
                        <div style="resize: both; overflow: auto; width: 100%;">
                            <video id="video" controls style="width: 99%; height: 99%;"></video>
                            <audio id="audio" controls style="width: 99%; height: 40px"></audio>
                        </div>
                    </td>
                </tr>
                <!-- ドロップ&一覧部分 -->
                <tr>
                    <td style="white-space: nowrap;" colspan="3">
                        <div id="playlist" style="width: 100px; height: 100px; overflow: auto;"></div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

感想

思ったより簡単に出来ました。
デザインセンスが無いのはお察し下さい。
一度、ブラウザを閉じてしまうと全部初期化してしまいます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24