Question

如何使用YouTube API在网页上的不同位置嵌入不同的YouTube视频？（这意味着他们可以不共享相同的<div>“播放器”。）它们也会根据不同的onclick事件在不同时间开始。当页面上只有一个视频时，我的代码工作正常，但对于我的生活，我无法弄清楚代码让这一切都能用于2个或更多！

起初我试图简单地添加我想要的每个代码的多个实例，但那不起作用。我读到需要将所有玩家添加到一个<script>，所以我尝试了这个：

（另外，<script>在页面上的位置和<div>的位置是否重要？<script>可以写入<div>否他们在页面上的位置？）

无论如何，这是我正在使用的代码：

// inside other containers with with relative and absolute positioning
// that fadeIn and fadeOut using jQuery
<div id="video1"></div>

// inside other containers with with relative and absolute positioning
// that fadeIn and fadeOut using jQuery
<div id="video2"></div>


<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player1;
var player2;

function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('video1',{
                width: '320',
                height: '216',
                videoId: 'VIDEO_ID_1',
                playerVars: {rel: 0, controls: 0, autohide: 1, disablekb: 1, enablejsapi: 1, modestbranding: 1, showinfo: 0 },
                events: { 'onStateChange': onPlayerStateChange1 } });;
    player2 = new YT.Player('video2',{
                width: '320',
                height: '216',
                videoId: 'VIDEO_ID_2',
                playerVars: {rel: 0, controls: 0, autohide: 1, disablekb: 1, enablejsapi: 1, modestbranding: 1, showinfo: 0 },
                events: { 'onStateChange': onPlayerStateChange2 } });; }

function startVideo1() {
            player1.playVideo();
            $('#video_box_B1').delay(1000).fadeIn();
            $("#video_box_B1").delay(20000).hide();
        };
function onPlayerStateChange1(event) {        
            if(event.data === 2) {
                $("#video_box_B1").hide();
            }
        }
function startVideo2() {
            player2.playVideo();
            $('#video_box_E5').delay(1000).fadeIn();
            $("#video_box_E5").delay(20000).hide();
        };
function onPlayerStateChange2(event) {        
            if(event.data === 2) {
                $("#video_box_E5").hide();
            }
        }
</script>

// onclick triggers at various places on the page
<img src="image_1.jpg" onclick="startVideo1()" />
<img src="image_2.jpg" onclick="startVideo2()" />

有谁能说出我做错了什么？顺便说一句，如果我使用的是静止图像，纯文本或页面上只有一个视频，那些淡入和淡出的容器都可以正常工作，因此不是那些导致这种情况的淡入淡出容器。它必须是YouTube脚本。有人可以帮忙吗？

Answer 1

似乎在这个jsbin中工作：

http://jsbin.com/catuhimo/3/edit

你在试用什么浏览器？如果您在Yosemite上使用Safari前沿版本8.0（10538.39.41），则jsfiddle和jsBin在呈现内容时遇到一些问题。我在Chrome上尝试了最新的代码，并用实际的视频ID替换了占位符，并且它有效。

这有帮助吗？我错过了你的问题吗？根据你的要求，它似乎对我有用。

YouTube API：多个嵌入同一页面？

1 个答案: