所以我有一个视频,我使用 jQuery 的 .load() 加载到页面中。这是您可以在“视频”部分看到问题的网站: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 已经挂接到这个事件并做了一些魔术。
我真的迷路了,感谢您的帮助!
最佳答案
我来晚了。在我的谷歌搜索结果中找到了这个,因为我遇到了和你一样的问题。事实上,窗口调整大小确实触发了媒体播放器调整大小的正确事件。如果您真的想要一个简单的解决方案,您可以像这样手动触发该事件:(jquery)
$(window).trigger('resize');
我将查看源代码,看看是否可以为我们找到更好的解决方案。目前,手动触发将解决您的问题。
编辑
显然,调整大小绑定(bind)所做的就是这样:
mediaelement.setPlayerSize();
mediaelement.setControlsSize();
那应该可以更直接地解决您的问题。祝你好运!
关于javascript - 调整动态加载的 MediaElementjs 视频的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13285831/