ステップ 2: カスタム動画コントロールを追加する

クリエイティブにカスタム ボタンを設定して、動画コントロールを追加します。

カスタム動画再生ボタンを追加する

1. <div> タグを使用して、クリエイティブに要素を 2 つ作成します。HTML ファイルに要素を作成し、CSS ファイルでスタイルを設定します。各要素に個別の ID と共通のクラス名を割り当てます。
   

   HTML ファイルの <div> タグの例:

   <div id="play-btn" class="video-controls">PLAY</div>
<div id="pause-btn" class="video-controls">PAUSE</div>
<div id="mute-btn" class="video-controls">MUTE</div>
<div id="unmute-btn" class="video-controls">UNMUTE</div>
<div id="stop-btn" class="video-controls">STOP</div>
<div id="replay-btn" class="video-controls">REPLAY</div>

   CSS ファイルのスタイル設定と ID セレクタの例:

   .video-controls {
   position: absolute;
   width: 50px;
   height: 20px;
   cursor: pointer;
   background-color: #FFF;
   border: 1px solid #000;
}

#play-btn {
   left: 5px;
}

#pause-btn {
   left: 5px;
}

#mute-btn {
   left: 60px;
}

#unmute-btn {
   left: 60px;
}

#stop-btn {
   left: 115px;
}

#replay-btn {
   left: 115px;
}
2. JavaScript に動画コントロールを追加します。
   
   HTML5 動画では、一部の機能が利用できません。適切に対応してください。
   

   • ミュート/ミュート解除は、デスクトップでのみ利用できます。モバイルでは、ハードウェアレベルで制御されます。
   • stop メソッドは利用できません。この問題を回避するには、動画を一時停止して、currentTime を「0」に設定します。
   • replay メソッドは利用できません。この問題を回避するには、currentTime を「0」に設定して、動画をもう一度再生します。
   
   

   コード

   var playBtn = document.getElementById('play-btn');
var pauseBtn = document.getElementById('pause-btn');
var muteBtn = document.getElementById('mute-btn');
var unmuteBtn = document.getElementById('unmute-btn');
var stopBtn = document.getElementById('stop-btn');
var replayBtn = document.getElementById('replay-btn');

playBtn.addEventListener('click', pausePlayHandler, false);
pauseBtn.addEventListener('click', pausePlayHandler, false);
muteBtn.addEventListener('click', muteUnmuteHandler, false);
unmuteBtn.addEventListener('click', muteUnmuteHandler, false);
stopBtn.addEventListener('click', stopHandler, false);

   replayBtn.addEventListener('click', replayHandler, false);

function pausePlayHandler(e) {
   if (video1.paused) {
       // 一時停止状態の場合、再生
       video1.play();
        // 一時停止ボタンを表示して、再生ボタンを非表示
       pauseBtn.style.visibility = 'visible';
       playBtn.style.visibility = 'hidden';
   } else {
       // 再生中の場合、一時停止
       video1.pause();
       // 再生ボタンを表示して、一時停止ボタンを非表示
       pauseBtn.style.visibility = 'hidden';
       playBtn.style.visibility = 'visible';
   }　
}

function muteUnmuteHandler(e) {
   if (video1.volume == 0.0) {
       // ミュート状態の場合、音声をオン
       video1.volume = 1.0;
       // ミュート ボタンを表示して、ミュート解除ボタンを非表示
       muteBtn.style.visibility = 'visible';
       unmuteBtn.style.visibility = 'hidden';
   } else {
       // ミュート解除状態の場合、音声をオフ
       video1.volume = 0.0;
       // ミュート解除ボタンを表示して、ミュート ボタンを非表示
       muteBtn.style.visibility = 'hidden';
       unmuteBtn.style.visibility = 'visible';
   }　
}

function stopHandler(e) {
   // HTML5 動画には stop メソッドがない
   // 回避策として、動画を一時停止
   // そして、currentTime を「0」に設定
   video1.currentTime = 0;
   video1.pause();
   // 必要に応じて、他の動画ボタンの表示/非表示を設定
}

function replayHandler(e) {
   // HTML5 動画には replay メソッドがない
   // 回避策として、currentTime を「0」に設定
   // そして、動画を再生
   video1.currentTime = 0;
   video1.play();
   // 必要に応じて、他の動画ボタンの表示/非表示を設定
}