Hi, how can I not realize this idea. On the page there are several video clips. They are output from the database. Here is a piece of iframe code as I output them

 <iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/yxjo4MHTLNU?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

Help to catch the playback of the video, so that when the movie was launched a message was displayed, for example Hello world. I want to implement this all miracle on JavaScript well or on JQuery Thank you in advance for your help.

    1 answer 1

    Taken from here and modified, referring :

    The codepen example works http://codepen.io/anon/pen/PNVYVZ It does not seem to plow here, because the script is not inserted into the html-example, but the html page of this site stackoverflow.

    Specifically, you are interested in the onPlayerStateChange (event) function - its rules.

    Link to the documentation https://developers.google.com/youtube/iframe_api_reference?hl=en

     var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'M7lc1UVf-VE', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { //event.target.playVideo(); document.getElementById('play').innerHTML = '<a href="#" onclick="play();">Play Video</a>'; } function play() { player.playVideo(); } var done = false; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING) { alert('играет'); } } function stopVideo() { player.stopVideo(); } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div id="player"></div> <div id="play"></div> </body> </html>