我正在我的页面上运行HTML5视频,我想根据浏览器的大小调整其边缘到边缘的大小 . 它将被设置为页面上很少的背景 .
为了掩盖我的屁股,我正在使用VideoJS播放视频并处理向后兼容性 . 内置于库中的全屏功能运行良好,但触发了浏览器的原生全屏功能 . 在某些浏览器中,这意味着黑条,在Safari中它意味着完全独立于浏览器窗口的全屏 . 我不想要其中任何一个 .
理想情况下,它的功能就像Supersized对图像的作用 . 图像始终设置为页面的整个宽度,高度从那里朝向CENTER裁剪 . 当您调整页面的大小越来越小时,它会达到最小高度并开始向中心裁剪宽度 .
我的JavaScript知识很少,但我能够捅戳并刺激你解决问题 . 我认为在VideoJS库之后放入Supersized大小调整脚本并强制它们处理 video
标签会以某种方式工作..至少是一个起始位置,但它不起作用 .
有人可以帮我理解哪些功能可以调整页面宽度,高度比例,以及在某个宽度或高度朝中心裁剪?这是我到目前为止所得到的:
我知道这是一个tuffie . 非常感谢 .
2 回答
您可以尝试以下方法,(基于您发布的演示)
在video-js-box中添加类.fullScreen,看看会发生什么 .
我试图达到你上面描述的效果,一旦找到更好的解决方案,我会立刻通知你 .
编辑:好的我想我找到了解决方案 - (版本2)
复制 - 将上面的代码粘贴到新文件并测试它:)
主要编辑2:我重构了我的代码,并以更面向对象的形式打包它 . 现在它确实移动(修改了顶部和左侧css属性),以便在屏幕比例改变时视频保持居中 . 它仍然做了一个奇怪的小跳,但它运作良好 . 我将继续努力完成这项任务,因为我认为这是一个很酷的功能 . 此外,我不知道在闪回后备期间会发生什么或者你想要发生什么 .
PS . 我保持点击我按钮,但很容易禁用它 .
看起来你的问题已经得到了回答,或多或少,但是对于其他寻求快速和肮脏方式来处理这个问题的人来说,我只是拆开了“jQuery Easy Background Resize Plug-In”并使其适用于视频 . 满容易 .
Html看起来像这样:
Javascript看起来像这样(向视频特定的东西看底部)