Question

我一直在网站上乱搞JavaScript和HTML。我试图让它从我制作的列表中播放随机视频，当视频结束时刷新页面并播放另一个视频。我一直在关注YouTube嵌入式API但无法让它工作。比特已经在其他帖子上找到了这个代码。随机视频有效，但不是自动刷新，所以我把那部分放了出来。

<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>

Answer 1

为什么要刷新页面？也许你的意思是自动播放另一个视频？刷新只会重新加载您的页面，您的所有js代码都将重新加载。

试试youtube iframe api。您可以向播放器添加事件监听器。视频播放完毕后，再加载另一个视频。

// 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>

随机youtube视频和API

1 个答案: