小编Moi*_*tah的帖子

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

所以我有一个视频,我用 jQuery 的 .load() 加载到页面中。这是您可以在“视频”部分查看问题的网站:http : //guillaumep.com/

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

<video><source src="URLTOVIDEO.mp4" type="video/mp4" />
Run Code Online (Sandbox Code Playgroud)

这是在加载到我的视频后立即生成视频 HTML 的代码#contentFrame

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

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

然后我有代码根据窗口的形状实际调整视频播放器的大小,以便视频始终以最大尺寸显示,而不会溢出窗口:

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) …
Run Code Online (Sandbox Code Playgroud)

html javascript video resize mediaelement

4
推荐指数
1
解决办法
1176
查看次数

标签 统计

html ×1

javascript ×1

mediaelement ×1

resize ×1

video ×1