Random youtube video and API

Question

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>

score 1 · Answer 1 · answered Apr 03 '16 at 07:11

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>

answered Apr 03 '16 at 07:11

Kai Hao

669
5
12

That seems to play the same video every time you visit the webpage. I'm trying to make it so when you visit the webpage it displays a different video every time from a list of videos I made. And when one video ends it refreshes the page to display a different video. – User Apr 03 '16 at 07:39
then simply random the `videoId` in `onYouTubeIframeAPIReady()` while first open. Again, refreshing page will reload all your web content, including youtube api and iframe, which can be very heavy overload. You still can do it if you insist, in fact youtube did it, but needless to say, you know how it works out. – Kai Hao Apr 03 '16 at 07:43
Well if there is a better way than refreshing the page then could you possibly explain? Also an example would be very helpful. Thanks for the help! – User Apr 03 '16 at 07:48
well, I just show you in the answer. Use the api and add and event listener with your player. Listen when the video is ended, load another random video. Just like what I've showed you in the **5th** step. – Kai Hao Apr 03 '16 at 07:51
How do I random the videoId... Sorry, first time attempting to work with javascript. – User Apr 03 '16 at 08:28
How do I get videoId to show a variable? I have "var test = 'FO7Re3mKNj4';" I have tried things like, "videoId: 'test[index]'," but it has not worked. – User Apr 03 '16 at 09:27
I suppose you have a list of videoId `list` to random. When you call the `YT.Player` function, randomly select one of your id like so: `player = new YT.Player('player', { videoId: list[Math.floor(Math.random() * list.length)], ... });`. What you did won't work because your `test` is a string, not an array. – Kai Hao Apr 03 '16 at 11:33

Random youtube video and API

1 Answers1

Linked