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

カテゴリ 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.15 Darty Form 編集ページでの操作ミス
フォーム 7.15 Webform WebformのEntity Translation
フォーム 7.15 DefaultTextForNode 新しいページの作成方法を一から教えてください
コンテンツの作成 7.15 Form API Validation フォームの入力内容を細かくチェックしたい
言語 7.15 Entity Translation デフォルトの言語 - Entity Translation
タクソノミー 7.15 Taxonomy manager タクソノミーを効率よく管理したい
テーマ 7.15 CSS Injector 簡単にCSSを追加したい
見栄え 7.15 js Injector 簡単にJavascriptを追加する方法は?
コンテンツの管理 7.15 Content Access 簡単に閲覧制限を行うには?
ユーザの管理 7.15 Devel 簡単に指定ユーザにログインしなおす方法
アップデート 7.15 Webform Backup_and_Migrate drupal7.12 -> drupal7.14アップデートメモ
フォーム 7.15 Webform Template Webformを複写したい
権限 7.15 Path_Access Content_Access 特定のページ(パス)をアクセス制限したい
コンテンツの作成 7.15 Automatic_Nodetitles Automatic_Entity_Label ノード投稿フォームにタイトル入力フォームを表示しない方法
コンテンツの作成 7.15 Mailhandler メールを通じてnodeの投稿をするには
言語 7.15 Entity Translation 各フィールドのラベルの多言語切り替え漏れ(フィールド・ラベル)
タクソノミー 7.15 Hirarchical Select タクソノミー(ターム)の選択を楽にできないでしょうか
言語 7.15 Entity Translation nodeのEntity Translation
コンテンツの管理 7.16 PHP 好きなところにノードを埋め込みたい
フォーム 7.16 Webform, Mail System, Mime Mail, Jp Mail Helper 送信メールのサブジェクトが長いと文字化けする

ページ