Random youtube video and API

2020-08-08 08:21发布

问题:

I have been messing around with JavaScript and HTML on my website. I am trying to get it to play a random video from a list I made and when the video ends to refresh the page and play another video. I have been looking at the YouTube embed API but could not get it to work. Bits have this code have been found on other posts. The random video works but not the auto refresh so I left that part out.

<html>
    <head>
        <title>Test</title>
        <script type='text/javascript' src='http://www.youtube.com/player_api'></script>
        <script type="text/javascript">
            var player = [
            '<iframe width="100%" height="100%" src="https://www.youtube.com/embed/dxnl-TGq6Sk?autoplay=1&modestbranding=1&autohide=1&showinfo=0&controls=0&iv_load_policy=3&enablejsapi=1" scrolling-="no" frameborder="0" id="player"></iframe>',
            '<iframe width="100%" height="100%" src="https://www.youtube.com/embed/2dbR2JZmlWo?autoplay=1&modestbranding=1&autohide=1&showinfo=0&controls=0&iv_load_policy=3&enablejsapi=1" scrolling-="no" frameborder="0" id="player"></iframe>'
            ];
            function Random() {
                var rannum= Math.floor(Math.random()*player.length);
                document.getElementById('player').innerHTML=player[rannum];
            }
            onload = function() { Random(); }
        </script>
        <!--Mouse-->
        <script language="javascript">
            document.onmousedown=disableclick;
            function disableclick(event)
            {
                if(event.button==2)
                {
                    return false;    
                }
            }
        </script>
        <!--Style-->
        <style type="text/css">
            #overlay {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                margin-top: 0px;
                cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='),
                url(images/blank.cur),
                none !important;
            }
        </style>
    </head>
    <body style="background-color:black;" oncontextmenu="return false">
        <?php include_once("analyticstracking.php") ?>
        <div id="player"></div>
        <div id="overlay">
    </body>
</html>

回答1:

Why you want to refresh your page? Perhaps what you mean is to auto-play another video? Refreshing would simply reload your page, which all your js code would be reload.

Try youtube iframe api. you can add an event listener to your player. When the video done playing, load another video.

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: '6hcSBJFaXGs',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
  event.target.playVideo();
}

// 5. load another video, you can perform your random code here.
function onPlayerStateChange(event) {
  if (event.data == 0) {
    player.loadVideoById("S176AKQhcCk");
  }
}
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>