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

我刚做了一个YouTube操作员和Javascript API

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>

笔记本

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:// developmenters.google.com/youtube/js_api_reference" rel=“nofollow”>https://developers.google.com/youtube/js_api_reference

友情链接