Random youtube video and API

2020-08-08 07:54发布

站内问答 / JavaScript
1056 1 4

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条回答
戒情不戒烟
2楼-- · 2020-08-08 08:39

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)