随机youtube视频和API

Random youtube video and API

本文关键字：API 视频 youtube 随机      更新时间：2023-11-15

我一直在我的网站上摆弄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>

为什么要刷新页面？也许你的意思是自动播放另一个视频？刷新只需重新加载页面，所有的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>
相关文章：