0

我有以下代码

<script>
window.onload = function(){
var a = document.getElementsByTagName("a");
for(var i=0; i<a.length; i++){
    if(!/#ytplayer/.test(a[i].href)) continue;
    var link = a[i].innerHTML.match(/\/vi\/([^\/]+)/);
    if(link) (function(vidId){
        a[i].onclick = function(){
            player.loadVideoById(vidId);
        }
    })(link[1]);
}
}

// 2. This code loads 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);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;

function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
    height: '480',
    width: '853',
    videoId: '963puDdR0bY',
    wmode: 'transparent',
    rel: '0',
    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. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;

function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
    setTimeout(stopVideo, 60000);
    done = true;
}
}

function stopVideo() {
player.stopVideo();
}
</script>

<script>

$(document).ready(function() {

$.ajax({
  type: "POST", 
  url: "/publicPortal/restservices/tracking/click", 
  data: { docId: "enPubIntentionalInvesting", docType: "tvSpots" },
  contentType: "text/plain"
});

});
</script>

我在这里调用图像

<div id="player" style="padding-left:40px; z-index:-1;"></div>  
</div>

<div id="nav" style="height:200px; padding-top:20px; padding-left:40px !important;">

<a href="#ytplayer" >
<img src="image.png" id="vid1" class="vidThumb" rel="http://www.youtube.com/watch?v=963puDdR0bY" />
<img style="display:none;" src="http://img.youtube.com/vi/963puDdR0bY/default.jpg" /></a>

    <a href="#ytplayer" >
<img src="image.png" id="vid1" class="vidThumb" rel="http://www.youtube.com/watch?v=963puDdR0bY" />
<img style="display:none;" src="http://img.youtube.com/vi/963puDdR0bY/default.jpg" /></a>

    <a href="#ytplayer" >
<img src="image.png" id="vid1" class="vidThumb" rel="http://www.youtube.com/watch?v=963puDdR0bY" />
<img style="display:none;" src="http://img.youtube.com/vi/963puDdR0bY/default.jpg" /></a>
 </div>

您可能会注意到我在那里有两张图片，但似乎代码需要从您的管中提取，但我想要一个自定义图像。

我的问题在于，菜单区域位于 youtube 播放器下方，我四处寻找修复，但大多数都针对单独的 iframe。

我尝试将 wmode 添加到 api 调用中，但它似乎不起作用！任何帮助都会很棒！

4

1 回答 1

0

所以我想通了！您需要将 playerVars 添加到函数中，如下所示；

function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '480',
width: '853',
videoId: '5hewAwxIy9k',
playerVars: {
    controls: 1,
    showinfo: 0 ,
    modestbranding: 0,
    rel: 0,
    wmode: "opaque"
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
于 2013-01-23T20:59:34.180 回答