2

我正在尝试将 Mediaelement 添加到我们的 html 视频播放中。我遇到了一个我还没有弄清楚如何处理的问题，并认为我最好问一下。

在一个地方，视频标签位于灯箱内（确切地说是彩盒）。直接 html5 视频尊重灯箱的大小。它填充可用空间，然后将实际视频帧放入该空间内，留下空白的“信箱”，其中视频和灯箱的纵横比不同。

这有意义吗？换句话说，它可以使视频尽可能大，而不会剪辑它的任何部分。

我希望 Mediaelement 也这样做，但它会做一些不同的事情。Mediaelement 每次都填充宽度。当灯箱比视频更宽时，这会导致视频被剪辑。该视频还可以滚动查看视频的底部和控制部分。

我确实尝试了一些基本的 css 覆盖，使用宽度和高度选项。我还更改了enableAutosize选项，但没有发现任何区别。看起来所有动态添加的 html 的大小都是由 Javascript 确定的。

是否有一种支持或预期的方式来获得我所追求的结果，而无需扩展或破解 Mediaelement javascript？

我可能应该补充一点，视频内容具有不同的尺寸，并且灯箱也是动态大小的。

$("a.cbox_group").colorbox({
  rel:'cbox_group',
  scalePhotos:true,
  transition:"none",
  width:"99%",
  height:"99%",
  maxWidth:"90%",
  maxHeight:"100%",
});


$('video').mediaelementplayer({
  loop: true,
  enableAutosize: true,
  features: ['playpause','progress','current','duration','fullscreen'],
  alwaysShowControls: true,
  pauseOtherPlayers: true,
});

Colorbox 设置为占据大部分浏览器窗口。它具有将内容大小调整为“框” scalePhotos:true的功能。这设置了正确的高度和高度，非常适合图像和原始视频标签。

如果 Mediaelement 发现了这一点，它将做自己的事情，使播放器的纵横比为 16:9，内容看起来是 1:1 像素比例。

如果我确保未设置此设置，即视频元素没有大小属性​​，则 Mediaelement 将使用enableAutosize:true启动并填充并可能导致垂直滚动和控件不在视野范围内。

在线“测试用例”

我设法提取了一些说明我遇到的问题的静态 html。一个带有链接的页面，该链接打开一个颜色框弹出窗口，其中几乎完全是我在应用程序中使用的设置。我将 mediaelement javascript 设置为 2s 延迟，以便在 mediaelement 接管之前可以观察到原始视频元素。

我想要找到一些设置组合，允许与原始视频标签相同的基本“布局”（既不剪辑高度也不剪辑宽度）但具有媒体元素控件和自动后备等等。

示例测试页面

来源 Github

使浏览器非常宽屏以使其明显。

4

0 回答 0