動画上にクリッカブルマップを作成する方法

カテゴリ video コアバージョン 8.4x 関連モジュール video map

 

コメント

ユーザー actbrain の写真

動画の上にクリッカブルなレイアーを配置することで実現可能です。
下の動画の「左上」「左下」「右上」「右下」でクリックしてみてください。

この例は動画の上にセルが4つのtableを配置しalertしているだけですが、tableの代わりにクリッカブルマップを配置するような事もできると思います。

<style>
    div.wrapper { position: relative; width: 600px; height: 400px; }
    div.wrapper #map { position: absolute; left: 0; top: 0; z-index: 1; width: 600px; height: 400px; }
    #map td { width: 300px; heigth: 200px; }
</style>
<div class="wrapper">
    <video id="test1" width="600" height="400" controls autoplay>
        <source src="./sites/default/files/mini-3.mp4" type="video/mp4">
        <p>※ご利用のブラウザでは再生できません</p>
    </video>
    <table id="map">
        <tbody>
        <tr>
            <td onclick="alert('左上')"></td>
            <td onclick="alert('右上')"></td>
        </tr>
        <tr>
            <td onclick="alert('左下')"></td>
            <td onclick="alert('右下')"></td>
        </tr>
        </tbody>
    </table>
</div>

ページ

OTHER FAQ

Drupal開発・運用の疑問/質問の答えはここに

無料ユーザー登録すると質問できます。

カテゴリ降順で並び替える Core Ver. 関連モジュール タイトル
コンテンツの作成 7.50 Inline Entity Form Drupal6のフィールドグループのようなモジュールはありませんか?
コンテンツの作成 8.7.x CkEditor CKEditorエディタ内に Colorboxポップアップ を簡単に挿入する方法
コンテンツの作成 7.50 Expanding Textareas Textareaフォームの行サイズを自動調整するモジュール
コンテンツの作成 8.4x node node保存前に色々やる方法
コンテンツの作成 8.9.x CKEditor CKEditor編集中の見た目をフロントと全く同様にする方法
コンテンツの作成 6.x Views カルーセルのように回転するコンテンツを作りたい
コンテンツの作成 8.9.x node ノード保存時の前回値の参照方法
コンテンツの作成 7.23 maxlength テキストフィールドの最大長のチェック&カウントダウン
コンテンツの作成 8.4x json jQueryにjsonで渡す方法
コンテンツの作成 7.38 Webform Webformでテーブル形式にしたい
コンテンツの作成 8.4x archiver zipファイル圧縮・解凍する方法
コンテンツの作成 7.38 node 代理投稿を可能にしたい
コンテンツの作成 7.22 node Views ノードに付いたコメントに関する情報を得る
コンテンツの作成 8.9.x vim nkf ファイルのエンコーディングを確認、変更する方法
コンテンツの作成 7.26 PHP ノード内の一部(フィールド)を変更する
コンテンツの作成 7.34 CCK ノード入力フォームへパラメータを渡す
コンテンツの作成 8.9.x CSS キャプション付きの(右寄/左寄)画像を画像サイズを基準にきれいに表示する方法
コンテンツの作成 7.34 Entityreference prepopulate 新規ノード作成時のリファレンス方法
コンテンツの作成 8.4x コンテンツ作成時のフォームレイアウトの変更
コンテンツの作成 7.31 CKEditor CKEditorの新規生成ダイアログ内の初期値の変更

ページ