HTML5ビデオコントロールエリアの再生ボタンをクリックして追跡する

bugfix> javascript > 投稿

ポスターがクリックされたとき、およびコントロールバーの再生ボタンがクリックされたときに再生されるHTML5ビデオがあります。ビデオが再生されるたびに起動するトラッキングピクセルが必要です。ビデオをdivでラップし、ピクセルを起動するonlickをdivに追加しました。ポスター/ビデオ領域がクリックされると起動します。しかし、divがコントロールをカバーしていても、コントロール領域をクリックしても起動しません。コントロールへのクリックをキャッチするにはどうすればよいですか？または、ビデオがいつ再生されるかを決定し、ピクセルを発射します。

コードは次のとおりです。

<div onclick="obApi('track', 'Watch Video');">
<video controls="controls" style="width: 100%;" poster="https://cdn.shopify.com/s/files/1/0315/7737/t/2/assets/poster_fox.jpg" onclick="this.play();">
<source src="https://cdn.shopify.com/s/files/1/0315/7737/files/fw_fox.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>

javascript

html5-video

回答 1 件

  • ビデオタグには、聞くことができる多くのイベントがあります。 1つは play です  ビデオが一時停止されなくなると起動します。そのイベントをリッスンする方法の例を次に示します。

    let clicks = 0;
let video = document.getElementById("myVideo");
video.addEventListener("play", obApi);
function obApi() {
  clicks++;
  console.log(`I've been played ${clicks} time/s`);
}


    <video id="myVideo" controls="controls" style="width: 100%;" poster="https://cdn.shopify.com/s/files/1/0315/7737/t/2/assets/poster_fox.jpg" onclick="this.play();">
<source src="https://cdn.shopify.com/s/files/1/0315/7737/files/fw_fox.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

あなたの答え

関連記事