點擊圖片後播放youtube影片

小非
因為網頁上嵌入了很多youtube影片,若用youtube官方自帶的iframe嵌入方式,載入時就會用掉許多流量而使速度很慢,

於是想放一個縮圖,點下縮圖才播放影片,

我對script真的很陌生,以下語法是google後拼湊出來的,

搞了2天了還弄不出來,目前卡在「還沒點圖時就會先播放了」,我想做到的是「只先出現圖片,點擊圖片後才開始播影片」

請大大們幫幫忙,謝謝


<div onclick="ytplayer=document.getElementById('ytplayer'); ytplayer.style.display='block'; this.style.display='none'; ytplayer.autoplay='1';">
<img style="cursor: pointer;" alt="" src="http://oi59.tinypic.com/33trpyo.jpg"/></div>

<div id="ytplayer" style="display: none;"></div>

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      width: '750',
      playerVars: {
		autoplay: 1, // 在讀取時自動播放影片
		controls: 1, // 在播放器顯示暫停/播放按鈕
		showinfo: 0, // 隱藏影片標題
		modestbranding: 1, // 隱藏YouTube Logo
		iv_load_policy: 3, // 隱藏影片註解
		autohide: 0, // 當播放影片時隱藏影片控制列
        rel: 0
		},
      videoId: 'M7lc1UVf-VE'
    });
  }
</script>

最有價值解答

彩虹
請參考
<!DOCTYPE html>
<html>
 <body>
	<div id="coverImg" onclick="onPlayerReady()"> 
	<img style="cursor: pointer;" alt="" src="http://oi59.tinypic.com/33trpyo.jpg"/></div> 
	<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
	<div id="ytplayer" style="display:none"></div>

    <script>
		// 2. This code loads the IFrame Player API code asynchronously.
		var tag = document.createElement('script');

		tag.src = "https://www.youtube.com/iframe_api";
		var firstScriptTag = document.getElementsByTagName('script')[0];
		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

		var player;
		function onYouTubeIframeAPIReady() {
			player = new YT.Player('ytplayer', {
				height: '390',
				width: '640',
				videoId: 'M7lc1UVf-VE',
			});
		}
		function onPlayerReady(event) {
			document.getElementById('coverImg').style.display="none";
			document.getElementById('ytplayer').style.display='block';
			player.playVideo();
		}
    </script>
</body>
</html>

小非
可以了耶,超級感謝~
蘇綉雯
請問若同一頁面要放到四支影片,除了增加var player2;var player3;var player4;
其他該怎麼更改呢?function onPlayerReady()的部分要怎麼對應呢?
能四張縮圖個別點擊後,對應開啟該影片。
如果能在點擊其他縮圖撥放後,剛撥放的影片就暫停或結束,那就最好不過了><
抱歉剛接觸script,查了一整天都失敗,目前只做到點擊縮圖時,四支影片全撥放= =
迷路
請注意彩虹大範例中的id
在同一頁面中id是不能重複的
在id上做出區別應該就能達成你想要的效果
回到頂部