如何在 videojs 中的 30,60,90,120 ....e.t.c 秒后显示弹出窗口。我需要使用类似设置时间间隔的事件监听器来检查用户是否确实在观看视频。
$(document).ready(function() {
//Create the instance of the video
var myPlayer = videojs('my-video');
// get the current time of the video
// get
myPlayer.on('play', function() {
alert("You click on play event");
});
myPlayer.on('pause', function() {
alert("You click on pause event");
});
myPlayer.on('timeupdate', function() {
var getcurrentTime = this.currentTime();
console.log(this.currentTime());
});
});<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<link href="video-js.css" rel="stylesheet" type="text/css" />
<script src="//vjs.zencdn.net/5.8/video.min.js" type="text/javascript"></script>
</body>最佳答案
不太明白你的问题，如果你知道如何处理代码，我认为 @Rob Wood 的答案非常好，但我会尽力而为:
var playing = false;
var lastPopup = 0;
function showPopup() {
alert("Popup test");
}
function checkPopup(time) {
if (playing && time-lastPopup >= 30) {
showPopup();
lastPopup = time;
}
}
$(document).ready(function() {
var myPlayer = videojs('my-video');
myPlayer.on('play', function() {
playing = true;
});
myPlayer.on('pause', function() {
playing = false;
});
myPlayer.on('timeupdate', function() {
var currentTime = this.currentTime();
checkPopup(currentTime);
});
});<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<link href="video-js.css" rel="stylesheet" type="text/css" />
<script src="//vjs.zencdn.net/5.8/video.min.js" type="text/javascript"></script>
</body>这样，如果满足两个条件，就会调用 showPopup():视频正在播放，并且自上次弹出(或开始)以来的秒数差异为 30 或更多。
关于javascript - 如何在视频js中在时间间隔后显示弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39765216/