Question

所以我有一个视频，我用jQuery的.load（）加载到页面中。这是您可以在'vidéos'部分中查看问题的网站：http://guillaumep.com/。

这是我必须使用的视频标签：

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

以下是在我的#contentFrame中加载后生成视频HTML的代码：

$('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已经挂钩到这个事件并且做了一些魔术。

我真的迷失在这里，谢谢你的帮助！

Answer 1

我在这里有点晚了。在我的谷歌搜索结果中找到了这个，因为我遇到了和你一样的问题。实际上，窗口调整大小确实会触发de mediaplayer调整大小的正确事件。如果你真的想要一个简单的解决方案，你可以像这样手动触发该事件：（jquery）

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

我会查看源代码，看看能否为我们找到更好的解决方案。目前，手动触发它将解决您的问题。

修改

显然，所有resize绑定都是这样的：

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

这应该更直接地解决你的问题。祝你好运！

调整动态加载的MediaElementjs视频的大小

1 个答案: