<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://players.brightcove.net/5785763993001/default_default/index.min.js"></script>
</head>
<body>
<div style="position: relative; display: block; max-width: 960px;">
<div id="myPlayer" style="padding-top: 56.25%;">
<iframe
id="brightcove-iframe"
src="https://players.brightcove.net/5785763993001/default_default/index.html?videoId=6336141823112"
allowfullscreen=""
allow="encrypted-media"
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
</div>
</div>
<script>
var player;
// Initialize the Brightcove player
videojs("myPlayer", {}, function () {
player = this;
// Add event listeners to track play, pause, and ended events
player.on("play", function () {
alert('Video is playing');
});
player.on("pause", function () {
alert('Video is paused');
});
player.on("ended", function () {
alert('Video has ended');
});
});
</script>
</body>
</html>
I'm attempting to embed a Brightcove video player within an iframe, and I want to capture events like play and pause in order to track the amount of time viewers spend watching the video. I've successfully obtained the var player object, but I'm encountering difficulties when trying to implement event handling for these actions. I am not enter in the play function.It seems play and pause function is not working.I expect that when I click the play button, it will provide information about the amount of time I've spent watching the video.