調整動態加載的MediaElementjs視頻的大小

因此，我有一段視頻，用jQuery的.load（）加載到頁面中。以下是您可以在「視頻」部分中看到問題的網站：http://guillaumep.com/。調整動態加載的MediaElementjs視頻的大小

這裏的視頻標籤我必須使用：

<video><source src="URLTOVIDEO.mp4" type="video/mp4" />

這裏是產生視頻的HTML它在我的#contentFrame加載後右邊的代碼：

$('video').wrap('<div class="videowrapper">') 

.attr({ 'style': 'width: 100%; height: 100%;' }) 
.mediaelementplayer({ success: function (player) { 
    correctVideoSize($(player).parent(4).eq(0)); } 
});

然後，我有代碼，實際上根據窗口的形狀調整視頻播放器的大小，以便視頻始終顯示爲最大尺寸，而不會溢出窗口：

function correctVideoSize(videoContainer) { 
    var videoContainerHeight = $(window).height() - 100; 
    var videoContainerWidth = $(window).width() * 0.92; 
    var videoContainerRatio = videoContainerWidth/videoContainerHeight; 
    var videoRatio = videoContainer.width()/videoContainer.height(); 
    console.log('videoRatio : ' + videoRatio); 
    console.log('videoContainerRatio : ' + videoContainerRatio); 

    if (!isNaN(videoRatio) && videoContainerRatio < videoRatio) 
    { 
     videoContainer.height(videoContainerWidth/videoRatio).width(videoContainerWidth); 
    } 
    else if (!isNaN(videoRatio)) 
    { 
     videoContainer.height(videoContainerHeight).width(videoContainerHeight * videoRatio); 
    } 

    return videoContainer; 
}

調整圖像的方式絕對有效，你可以看到：http://guillaumep.com，但對於視頻我不明白如何，何時，什麼地方我應該調整大小。你可以在這裏看到問題：http://guillaumep.com/2012/10/22/test-video/。我嘗試了很多不同的事情，並獲得了視頻在$（window）.resize（）事件上正確調整大小，但我猜只是因爲MediaElementJs已經掛鉤了這個事件並且做了一些魔術。

我真的迷失在這裏，謝謝你的幫助！

來源

2012-11-08 Michael Betsch

我在這裏有點晚了。在我的谷歌搜索結果中發現了這一點，因爲我遇到了同樣的問題。事實上，窗口大小調整確實會引發媒體播放器調整大小的正確事件。如果你真的想要一個簡單的解決方案，你可以只觸發事件手動像這樣：（jQuery的）

$(window).trigger('resize');

我會看在源代碼，看看我能爲我們找到一個更好的解決方案。目前，手動觸發它將解決您的問題。

編輯

那麼很顯然，所有的調整大小的綁定的確是這樣的：

mediaelement.setPlayerSize(); 
mediaelement.setControlsSize();

這應該更直接地解決您的問題。祝你好運！

來源

2013-11-21 21:50:14 Nico

感謝您的回答...我以另一種方式解決了問題，並且沒有時間檢查這個不幸的事情。 –

這個答案應該得到1000 ups。 – NileshChauhan

調整動態加載的MediaElementjs視頻的大小

回答

相關問題