Как показать всплывающее окно в видео js после временного интервала

Как показать всплывающее сообщение после 30,60,90,120 .... и т.д. секунд в videojs. Мне нужно использовать как установленный временной интервал, например, прослушиватель событий, который проверяет использование фактически видя видео или нет.Как показать всплывающее окно в видео js после временного интервала

$(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>

источник

2016-09-29 dev

Не понимаю ваш вопрос, и я думаю, что @Rob Вуд ответ очень хорошо, если вы знаете, что делать с кодом, но я сделаю все возможное:

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 или более.

источник

2016-10-03 07:39:01

Текущее время не в секундах, мне нужно работать на секундных или минутных базах – dev

Текущее время ** IS ** в секундах, как вы можете видеть в официальной документации: http: //docs.vide ojs.com/docs/api/player.html#MethodscurrentTime Кроме того, я прошу не завышать из-за таких вещей. Downvote не для этого. –

, пожалуйста, проверьте кусок кода в моем вопросе – dev

var poll = window.setInterval(function(){ 
    //popup code here 
}, 30000)

Или, добавив к событию timeupdate ...

myPlayer.on('timeupdate', function() { 
    var getcurrentTime = this.currentTime(); 
    console.log(this.currentTime()); 

    //assuming getcurrentTime is in seconds... 
    if(getcurrentTime >= 30 && getcurrentTime < 60) { 
    //popup code here 
    } 

    //the rest should be self explanatory. If this function polls every 
    //second, you could simply use getcurrentTime == 30, etc... 

});

источник

2016-09-29 08:32:55

мне нужно использовать интервальную время события, когда воспроизводится видео – dev

Эй просто изменить вам сценарий, как показано ниже,



    myPlayer.on('timeupdate', function() { 
    var getcurrentTime = this.currentTime(); 
    var dc = getcurrentTime.toFixed(0); 
    if(dc != 0 && ((dc%30).toFixed(1)) == 0.0){ // here you can mention your time interval 
    myPlayer.pause(); 
    $("#hoverDemo").show(); 
    console.log(getcurrentTime+ " ---- "+((dc%30))); 
    }});

И добавить два DIV, как показано ниже в HTML,

<div style="position: relative;width:640px;height: 360px"> 
<div id="user23Demo" style="height:360px;width:640px;"> 
    <video id="my-video" class="video-js" controls preload="auto" style="height:200px;" width="360" height="200" 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> 
</div> 
<div id="hoverDemo" style="height:50px;position: absolute;top: 10px;background:none;display:none;" align="center"> 
    <div align="center" style="color:white;background: red;max-width: 300px;min-height: 40px;"> 
     <div>You have seen this before.<br/></div> 
    </div> 
</div>

источник

2016-10-04 11:37:02 PSabuwala

Как показать всплывающее окно в видео js после временного интервала

ответ

Смежные вопросы