Question

我正在使用此代码

<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中，视频开始播放，在我放在顶部的图像后面。

任何想法如何解决这个问题？

Answer 1

我刚刚使用Javascript API创建了一个YouTube处理程序。

HTML code：

<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，但可以适用于第一个：

$(".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

Youtube使用chrome嵌入了麻烦

1 个答案: