Question

我使用下面的代码来播放youtube共享视频，但我希望用户启动视频，但是一旦页面加载，它就会开始播放视频。我希望用户点击该链接然后它应该开始播放

<script type="text/javascript">

    function updateHTML(elmId, value) {
      document.getElementById(elmId).innerHTML = value;
    }

    function setytplayerState(newState) {
      if(newState==3 || newState==-1)
      {
        $('ld').show();
      }
      else
      {
        $('ld').hide();
      }
    }

    function onYouTubePlayerReady(playerId) {
      ytplayer = document.getElementById("myytplayer");
      setInterval(updateytplayerInfo, 250);
      updateytplayerInfo();
      loadNewVideo('<?=$w ?>');
      ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
    }

    function onytplayerStateChange(newState) {
      setytplayerState(newState);
    }
    function minute(secVar0)
    {
                         // The initial data, in seconds
minVar = Math.floor(secVar0/60);  // The minutes
secVar = Math.floor(secVar0 % 60);              // The balance of seconds
return minVar+":"+secVar;
    }
    function updateytplayerInfo() {

      updateHTML("videoduration", minute(getDuration()));
      updateHTML("videotime", minute(getCurrentTime()));
      //updateHTML("startbytes", );

      var sbyte=getStartBytes();
      var tbyte=getBytesTotal();
      var lbyte= getBytesLoaded();

      var l=Math.floor(400*lbyte/tbyte);

      //$('loaded').style.width=l+"px";


      var c=getCurrentTime();
      var t=getDuration();

      slider.setValue(c/t);
    }

    // functions for the api calls
    function loadNewVideo(id, startSeconds) {
      if (ytplayer) {
        ytplayer.loadVideoById(id, parseInt(startSeconds));
      }
    }

    function cueNewVideo(id, startSeconds) {
      if (ytplayer) {
        ytplayer.cueVideoById(id, startSeconds);
      }
    }

    function play() {
      if (ytplayer) {
        ytplayer.playVideo();
        $('playpause').onclick=function(){pause()};
        $('playpauseimg').src='pause.jpg';
      }
    }

    function pause() {
      if (ytplayer) {
        ytplayer.pauseVideo();
        $('playpause').onclick=function(){play()};
        $('playpauseimg').src='play.jpg';
      }
    }

    function stop() {
      if (ytplayer) {
        ytplayer.stopVideo();
      }
    }

    function getPlayerState() {
      if (ytplayer) {
        return ytplayer.getPlayerState();
      }
    }

    function seekTo(seconds) {
      if (ytplayer) {
      var t=getDuration();
      var s;
      s=t*seconds;
        ytplayer.seekTo(s, true);
      }
    }

    function getBytesLoaded() {
      if (ytplayer) {
        return ytplayer.getVideoBytesLoaded();
      }
    }

    function getBytesTotal() {
      if (ytplayer) {
        return ytplayer.getVideoBytesTotal();
      }
    }

    function getCurrentTime() {
      if (ytplayer) {
        return ytplayer.getCurrentTime();
      }
    }

    function getDuration() {
      if (ytplayer) {
        return ytplayer.getDuration();
      }
    }

    function getStartBytes() {
      if (ytplayer) {
        return ytplayer.getVideoStartBytes();
      }
    }

    function mute() {
      if (ytplayer) {
        ytplayer.mute();
      }
    }

    function unMute() {
      if (ytplayer) {
        ytplayer.unMute();
      }
    }

    function getEmbedCode() {
      alert(ytplayer.getVideoEmbedCode());
    }

    function getVideoUrl() {
      alert(ytplayer.getVideoUrl());
    }

    function setVolume(newVolume) {
      if (ytplayer) {
        ytplayer.setVolume(newVolume);
      }
    }

    function getVolume() {
      if (ytplayer) {
        return ytplayer.getVolume();
      }
    }

    function clearVideo() {
      if (ytplayer) {
        ytplayer.clearVideo();
      }
    }


</script>

<div id="ply">
<div id="ytapiplayer">

</div>
<script type="text/javascript">

  var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };

  var atts = { id: "myytplayer" };
  swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", 
                     "ytapiplayer", "1", "1", "8", null, null, params, atts);

</script>
</div>

<div>
<table class="controls">
<tr>
<td>
     <a href="javascript:void(0);" onclick="pause()" id="playpause"><img src="pause.jpg" id="playpauseimg" /></a>
</td>
<td>

Answer 1

将autoplay: 0作为参数之一传递。

var params = { allowScriptAccess: "always", bgcolor: "#cccccc", autoplay: 0 };
var atts = { id: "myytplayer" };
// etc...

http://code.google.com/apis/youtube/player_parameters.html#autoplay

Answer 2

在swfobject url末尾添加自动播放参数为0应该可以解决问题

swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer&autoplay=0", "ytapiplayer", "1", "1", "8", null, null, params, atts);

Youtube API会自动开始播放歌曲

2 个答案: