-1

私はこのコードを使用しています

<div onclick="thevid=document.getElementById('thevideo'); 
              thevid.style.display='block'; 
              this.style.display='none'">
    <img src="../img/film.jpg" style="cursor:pointer" />
</div>
<div id="thevideo" style="display:none">
    <iframe width="600" 
            height="335" 
            src="https://www.youtube.com/embed/MZ-NmMMTyTU?&rel=0&theme=light&showinfo=0&disablekb=1&hd=1&autohide=1&color=white&autoplay=1"
            frameborder="0"
            allowfullscreen>
    </iframe></div>
</div>

YouTube の動画を自分のサイトに埋め込むには、Firefox で問題なく動作しています。しかし、Chromeでは、私が上に置いた画像の後ろでビデオの再生が始まります。

これを修正する方法はありますか？

4

1 に答える 1

0

Javascript API を使用して、1 つの YouTube ハンドラーを作成しました。

HTML コード:

<b id="youbox" class="youbox youbox-left">
    <div id="player"></div> <!--player will loads here-->
</b>
<div id="youtube-select" class="youtube-select clearfix">
    <ul>
        <!-- use this part as a dynamic block, so you can multiply this -->
        <li class="playanothervideo {ACTIVE}" rel="{YOUTUBE VIDEO ID}">
            <h1>{TITLE OF VIDEO}</h1>
        </li>
        <!-- end of dynamic block. important: at the dom ready you have to make one li active, because that will be the first loaded video -->
    </ul>
</div>

JavaScript

if (($("#youbox").size() > 0)) // if you have youbox, which means you want a youtube player
{
    var tag = document.createElement('script');
    tag.src = "http://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player; // insert youtube player api to the html source, and make a player instance

    function onYouTubePlayerAPIReady() // on youtube player api loaded
    {
        player = new YT.Player('player', {
        height: '350', // height of player
        playerVars: { 'color': 'white', 'theme': 'light', 'modestbranding': 1, 'rel':0, 'showsearch':0, 'showinfo': 0, 'iv_load_policy': 3, 'hd': 1, 'controls':1}, // personalize players lookout (this is white instead of red)
        width: '629', // width of player
        videoId: $("#youtube-select li.active").attr("rel"), // aye, this is the first video id's getter
        events:
            {
                'onReady': onPlayerReady, // the easiest event handling, calls onplayerready fn
            }
        });
    }

    function playAnotherVideo(id) // play another video event handler
    {
        if (player.getPlayerState() == 1) // if video is playing
        {
        console.log("playerstate ok")
            player.stopVideo();       // stops video
            player.loadVideoById(id); // load other
            player.playVideo();       // starts other
        }
        else
        {
            player.cueVideoById(id);   // if not playing just loads the other video's thumbnail
        }
    }

    function onPlayerReady(event) 
    {
        event.target.setPlaybackQuality("hd720"); // setting 720p resolution by default (it's not tested yet, sorry)
    }
}

および他の js からですが、最初の js に適用できます。

$(".playanothervideo").live("click", function(){
    playAnotherVideo($(this).attr("rel"));
    pickMe($(this), "active");
});
function pickMe(e, c) {
    e.siblings(e[0].tagName).removeClass(c);
    e.addClass(c);
}

ビデオを選択し、アクティブなクラスを処理します。

Youtubeinで頑張ってください。:)

詳細については、https ://developers.google.com/youtube/js_api_reference を確認してください。

于 2012-05-21T22:19:19.417 に答える