低於「最小」尺寸的YouTube播放器

YouTube API文檔將嵌入式播放器的最小尺寸定義爲200px x 200px（link）。低於「最小」尺寸的YouTube播放器

爲了給玩家提供重要的空間功能，玩家必須至少200px x 200px。

我的測試讓我得出這是真的結論。如果我嘗試使用小於最小尺寸的播放器播放視頻，則會收到一條錯誤消息，指出「視頻播放器太小」。並且視頻不會播放。

但是，可能會有更小的玩家。例如，SwitchCam在頁面like this one上使用它們。

SwitchCam small players

我試着通過設置它的高度和寬度屬性，通過使用它的樣式屬性，並在其中有它的高度和寬度集包含的元素環繞它降低了播放器的大小。這些選項都不起作用。

我還可以嘗試縮小播放器的大小嗎？

編輯

看起來，一些影片將在非常小的播放器上播放，但另一些則不會。如果您要測試潛在的解決方案，請使用以下視頻ID：-rMTExNTx2s

來源

2013-04-29 David Tuite

http://www.youtube.com/html5 < - 好奇，您是否參加了試用？ – 2013-05-03 01:28:25

我認爲，當您在YouTube網站上時，試用版會讓您獲得HTML5播放器。我正在討論使用YouTube播放器API，這是一個不同的事情。 – 2013-05-03 07:01:55

我不完全確定這是真的。我開始爲我編寫的jQuery插件創建單元測試（tubeplayer：https://github.com/nirvanatikku/jQuery-TubePlayer-Plugin），我注意到最小播放器大小錯誤（onErrorNotEmbeddable）實際上並沒有被拋出if我啓用了試用版。基本上，如果我已啓用試用模式，則可以將視頻設置爲<（200,200），而不會有任何問題。我想更好地理解這種行爲，因爲它看起來更像是一個比其他任何東西都更多的bug（基於他們的文檔）。 – 2013-05-03 14:59:25

看起來有一些視頻的限制，不允許嵌入視頻的尺寸小於200 * 200（px）。此限制不適用於所有視頻（可能比上次更新的youtube API舊，我不知道）。

一些測試後，當YouTube播放器的readyState改變狀態這一限制適用：PlayerState.PLAYING (evt.data === 1)

所以，作爲一個基本的解決辦法，可以「隨時」的薩特斯更新後改變iframe的大小，請參閱下面演示&代碼：

DEMO

var player, 
    myWidth = "114px", 
    myHeight = "65px"; 

function onYouTubePlayerAPIReady() { 
    player = new YT.Player('testVideo', { 
     height: myWidth, 
     width: myHeight, 
     videoId: '-rMTExNTx2s', 
     events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
     }, 
      playerVars: { 
      controls:0, 
      showinfo:0 
      }   
    }); 
} 

function onPlayerStateChange(evt) { 
    if (evt.data == -1) { 
     evt.target.a.width = "200px"; 
     evt.target.a.height = "200px"; 
    } 
    else if (evt.data == 1) { 
      evt.target.a.className = ""; 
     evt.target.a.width = myWidth; 
     evt.target.a.height = myHeight; 
     done = true; 
    } 
}

正如你可以在這個DEMO SSEE，我設置了一個隱藏類的CSS .hidden{opacity:0}。這用於在視頻加載之前隱藏播放器。使用display:none;不起作用，肯定會有其他API限制。仍然在這個DEMO中，你必須等到視頻開始播放才能看到播放器出現。現在，您已經找到了最適合您的需求的解決方案，例如縮略圖圖像，以及在readystate發生變化時從負偏移播放器移動到所需位置，希望您明白了。

來源

2013-05-14 11:55:29

小提琴的作品...它做你想做的。那麼現在有什麼問題？ – dutchguy 2013-05-14 22:49:41

它適用於本示例中使用的特定視頻。它不適用於所有視頻（更重要的是，它不適用於我需要的特定視頻集）。如果我更改了視頻ID，它會中斷：http://jsfiddle.net/eDZrP/1/我會接受您是否可以使用我的小提琴中的視頻ID或解釋爲什麼它適用於一個視頻而不是其他。 – 2013-05-17 10:53:59

@DavidTuite我已經用一個簡單的解決方法更新了答案 – 2013-05-17 13:38:35

不是最優雅的解決方案，但是您是否考慮過使用CSS3 transform: scale()屬性實際縮放較大的玩家？當心它是not supported in IE < 9。

主要原因不是要做到這一點，但是，你會減少UI控件的大小，從而降低可用性。

來源

2013-04-29 17:32:12

謝謝你的想法，我現在就試試看。 UI控件的大小不是一個大問題，因爲我實現了自己的控件。 – 2013-04-29 17:35:00

不幸運。 YouTube會檢測到該玩家「太小」並拒絕播放該視頻。 – 2013-04-29 17:41:41

低於「最小」尺寸的YouTube播放器

回答

相關問題