Question

我有一些可以正常显示YouTube视频的代码。

我想要的是当我点击封面图片然后它应该开始播放视频。

我如何实施？

谢谢！

<div id="video" style="display: none;">
            <object width="370" height="230">
                <param name="movie" value="http://www.youtube.com/v/QN20iMIMxvk?version=3&autohide=1&showinfo=0">
                </param>
                <param name="allowScriptAccess" value="always"></param>
                <embed src="http://www.youtube.com/v/QN20iMIMxvk?version=3&autohide=1&showinfo=0"
                    type="application/x-shockwave-flash" allowscriptaccess="always" width="370" height="230"></embed>
            </object>
        </div>
        <a href="javascript:document.getElementById('video').style.display = 'block'; javascript:document.getElementById('videopic').style.display = 'none'; void(0);">
            <img id="videopic" src="@Url.Content("~/images/coverimage1.jpg")"  style="width:370px; height:230px;" alt="Media" /></a>

Answer 1

我找到了解决方案。

实施http://code.google.com/p/swfobject/
添加2个JS函数

function playvideo（） { document.getElementById（'video'）。style.display ='block'; document.getElementById（'videopic'）。style.display ='none'; }

function onYouTubePlayerReady（playerId）{
var ytplayer = document.getElementById（“myytplayer”）; if（ytplayer）{ ytplayer.playVideo（）; } }

并使用该代码显示youtube视频＆amp;封面图片

＆LT; div id =“video”style =“display：none;”＆gt; 您需要启用Flash Player 8+和JavaScript才能观看此视频。

                    var params = { allowScriptAccess: "always" };
                    var atts = { id: "myytplayer" };
                    swfobject.embedSWF("http://www.youtube.com/v/QN67iMIMxvk?enablejsapi=1&playerapiid=ytplayer&version=3",
                           "ytapiplayer", "370", "230", "8", null, null, params, atts);

                </script>
            </div>
            <img id="videopic"  src="@Url.Content("~/images/coverimage1.jpg")" onclick="playvideo();"  style=" cursor:pointer; width:370px; height:230px;" alt="" />

如何通过点击封面图片（jQuery）来启动YouTube视频？

1 个答案: