ChatGPT解决这个技术问题 Extra ChatGPT

How to detect when a youtube video finishes playing?

I am working on a site that has a ton of embedded youtube videos, the client wants to show a popup whenever a video stops splaying.

I looked at the youtube api and there seems to be a way to detect when a video ends:

http://code.google.com/apis/youtube/js_api_reference.html

but I can't embed the videos like they mentioned on that page since the videos are all already on the site (thousands that have been added manually by pasting embed code).

Is there a way to detect the ending of these videos without changing any of the existing videos (using javascript)?

The only thing I could suggest is programmatically changing the embed entries to include enablejsapi=1. If they are in a database it should be fairly easy to change the src attribute. You might need some regex if they are statically inserted into HTML files.

l
l2aelba

This can be done through the youtube player API:

http://jsfiddle.net/7Gznb/

Working example:

    <div id="player"></div>

    <script src="http://www.youtube.com/player_api"></script>

    <script>

        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              width: '640',
              height: '390',
              videoId: '0Bmhjf0rKe8',
              events: {
                onReady: onPlayerReady,
                onStateChange: onPlayerStateChange
              }
            });
        }

        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                alert('done');
            }
        }

    </script>

How did you integrate this with multiple videos on one page?
@motoxer4533 well I didn't have to deal with multiple videos on the same page but only one per page. Not sure if the API allows multiple players to be created and their individual endpoints detected.
should not be hard to setup for multiple players - just setup multiple var player1, var player2, var player 3 etc then run the setup code multiple times - with each new var
For readability, I'd advice YT.PlayerState.ENDED when checking state.
If you're just trying to play the video as soon as it's ready, the API now offers the autoplay parameter -- add playerVars: { autoplay: '1' } to the initialization arguments. See developers.google.com/youtube/player_parameters for more information.
y
yshouman

What you may want to do is include a script on all pages that does the following ... 1. find the youtube-iframe : searching for it by width and height by title or by finding www.youtube.com in its source. You can do that by ... - looping through the window.frames by a for-in loop and then filter out by the properties

inject jscript in the iframe of the current page adding the onYoutubePlayerReady must-include-function http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx Add the event listeners etc..

Hope this helps


not sure if this is possible due to cross-domain rules

关注公众号,不定期副业成功案例分享
Follow WeChat

Success story sharing

Want to stay one step ahead of the latest teleworks?

Subscribe Now