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>

あなたは私がそこに2つの画像を持っていることに気付くかもしれません、しかしコードはあなたのチューブから引っ張る必要があるようです、しかし私はカスタム画像が欲しかったです。

私の問題は、つまりメニュー領域がYouTubeプレーヤーの下にあり、修正を探し回っていますが、ほとんどは個別のiframeを対象としています。

iveはAPI呼び出しにwmodeを追加しようとしましたが、機能していないようです。どんな助けでも素晴らしいでしょう！

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 に答える