使用从列表中选择的视频嵌入 YouTube

Question

好的 - 首先让我说我不是 Web 开发人员，我对 HTML 做的很少，对 javascript 完全没有做，而且我的开发活动都是很小，因为这不是我的工作，而是副业。我的任务是接管我教会的网站，其中一项要求是嵌入视频，并有一个选择器来选择要播放的视频。例如，当页面加载时，我会让它加载最新的视频，并在旁边或下方显示一个列表，其中有其他视频可供选择。选择其中一个视频将在同一个播放器中播放，而无需转到 YouTube。

我已经尝试了几件事，但我在网上寻找想法时一无所获，所以这可能是不可能的，但如果是这样的话我会感到惊讶。这是我尝试过的最新方法，只是试图让播放器加载第二个视频（稍后我可以弄清楚如何在 javascript 中使用变量来处理多个视频）。说白了，这个按钮好像什么也做不了。如果有人能给我任何建议，我将不胜感激。

<!doctype html>
<html lang="en">
 <head>
  <title>
   Sample FPC Oakwood
  </title>
 </head>

        <div id="ytplayer"></div>

        <script>
            // Load the IFrame Player API code asynchronously.
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/player_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            // Replace the 'ytplayer' element with an <iframe> and
            // YouTube player after the API code downloads.
            var player;
            function onYouTubePlayerAPIReady() {
                player = new YT.Player('ytplayer', {
                    height: '390',
                    width: '640',
                    videoId: 'RYDpE0SgXOw'
                });
            }

            function onYouTubePlayerSelectOther() {
                player = new YT.Player('ytplayer', {
                    height: '390',
                    width: '640',
                    videoId: '1HsmP-Gk7c4'
                });
            }
        </script>
        <input id="submit" type="button" value="Sis Bernardini" onclick="onYouTubePlayerSelectOther();"/>
</body>
</html>

感谢您的帮助。

Answer 1

这样的事情怎么样？

HTML:

<iframe id="youtube" width="560" height="315" src="https://www.youtube.com/embed/RYDpE0SgXOw" frameborder="0" allowfullscreen></iframe>
<button onclick="changeVideo('1HsmP-Gk7c4');">Change Video</button>

JS:

function changeVideo(videoId) {
    var ytString = "https://www.youtube.com/embed/" + videoId;
    document.getElementById('youtube').src = ytString;
}

使用从列表中选择的视频嵌入 YouTube

Embed YouTube with Video Selected from List

html

javascript

youtube