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

カテゴリ 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. 関連モジュール タイトル降順で並び替える
テーマ 8.3x Contribute themes drupal8-寄贈テーマの動向
拡張機能 8.3x Contribute modules drupal8-寄贈モジュールの動向
Viewsプログラミング 8.4x Views drupal8におけるViewsプログラミング
サイト情報 8.9.x api Drupal::request() メモ
チューニング 7.26 PHP DrupalはNginxで動く?
サイトの構築 8.9.x Webform drupalを使用した登録、一覧表示の方法について
PHP 8.9.x drush drush sql:cli < が機能しない場合の対処
アップデート 7.34 Distribution(Commerce Kickstart) drushでcommerce_kickstartのアップデートに失敗する
drush 7.54 Drush Drushでdrupalサイトをインストールする方法
サイトの構築 7.34 ECK Entityの使い方について
コンテンツの管理 8.4x Entity EntityをPropertyで探す(クエリする)方法
コンテンツの作成 8.4x PhpSpreadsheet Excelを読み書きする方法
表示 7.34 Views Infinite Scroll Facebookページのようにスクロールするとコンテンツが追加されるようなコントロール
フォーム 8.9.x api GET/POSTされた情報を得る方法
Gmian 8.8.x Gmail Gmail:外部メールサーバー経由のメール送信ができなくなった場合の対処方法
Google 7.38 robots.txt Google Search Console Teamから「CSS および JS ファイルに Googlebot がアクセスできません」
Initial 8.4x Subscriber hook_init() 〜 drupal_goto() を drupal8でやる方法
GoogleMaps 7.28 Javascript IE9でGoogle Map APIを利用した住所情報所得がうまくゆかない
サイト情報 8.4x JavaScript JavaScriptに変数を渡す方法
jQuery Revolution 7.50 jQuery Revolutionのリンクがスマホで機能しない

ページ