视频中心 html5,扩展HTML5视频并维护中心？(Scaling HTML5 video and maintain center?)

扩展HTML5视频并维护中心？(Scaling HTML5 video and maintain center?)

一切都很好。

除了缩放似乎不是从视频的中心(枢轴)发生，而是从左上角发生。 换句话说 - 视频的裁剪仅来自右侧，这使视频焦点不在其中心。

有任何解决这个问题的方法吗？ 我需要始终将视频保持在中心位置。

这是我用于视频的CSS：

#fullscreen_video

{

opacity: .2;

position: fixed;

top: 0px;

left: 0px;

z-index: -1000;

}

I have a full-screen video playing as my background. I followed this great guide: http://epicwebsites.com/html5-video-scale-to-fill-container-with-jquery To get the proportional scaling for the video tag using jQuery.

Everything works great.

Except that the scaling appears to occur not from the center (pivot) of the video but from the top-left. In other words - the cropping of the video only comes from the right which makes the video focus not to be on it's center.

Any way to fix this? I need to keep the video centered at all time.

Here is the CSS I use for the video:

#fullscreen_video

{

opacity: .2;

position: fixed;

top: 0px;

left: 0px;

z-index: -1000;

}

原文：https://stackoverflow.com/questions/24045786

更新时间：2020-02-05 02:16

最满意答案

您可以使用jQuery通过更改top和left属性来居中视频。

$(window).resize(function () {

var $vid = $('#fullscreen_video');

$vid.css({

left: ($(window).width() - $vid.width()) / 2,

top: ($(window).height() - $vid.height()) / 2

});

});

You can use jQuery to center the video by changing the top and left attributes.

$(window).resize(function () {

var $vid = $('#fullscreen_video');

$vid.css({

left: ($(window).width() - $vid.width()) / 2,

top: ($(window).height() - $vid.height()) / 2

});

});

相关问答

您可以通过以下方式使用flexbox CSS来实现此目的： html {

height: 100%;

}

body {

background-color: black;

height: 100%;

margin: 0;

display: flex;

align-items: center;

}

video {

width: 100%;

height: auto;

}

有关该文档的文档可以在这里找到： https ： //codex.wordpress.org/Video_Shortcode 另一方面，HTML5视频标签是规范的一部分，您可以使用在不是wordpress的网页上嵌入视频，例如，如下所示：

视频将显示为HTML5(如果可用)或回退到Flash播放器。 I've found the solution : You have to add the html5=1 in the src attribute of the iframe :

function StartPauseHandler(e) {

if (e.type === "pause") {

console.log("paused");

} else if (e.type === "playing") {

...

这并不难。 您可以为单个标记提供多个源(以多种格式)。

另外更好的选择是先搜索原生html5视频 ，

...

您可以使用jQuery通过更改top和left属性来居中视频。 $(window).resize(function () {

var $vid = $('#fullscreen_video');

$vid.css({

left: ($(window).width() - $vid.width()) / 2,

top: ($(window).height() - $vid.height()) / 2

});

});

You can use j

...

请注意， 标记对象没有isEnabled属性。 您正在查看MultipleTrackList接口，这不是一回事。 查看： http ： //www.w3schools.com/html5/tag_video.asp和https://developer.mozilla.org/en/HTML/Element/video和https://developer.mozilla.org/en/Using_HTML5_audio_and_video 此外，不使用document.write()进

...

谢谢你们花时间回应。 经过进一步检查，我发现控制台吐出了以下错误： 资源解释为样式表，但使用MIME类型text / html进行传输 我让我的服务器猜测静态内容的mime类型，因为它在过去已经适当地完成了，但它似乎没有做得对。 为了解决这个问题，我重新编写了我附加的静态传递函数，以防有人稍后遇到同样的情况： @welcomeApp.route('/static/')

def send_static(filepath):

currentLocation

...

真棒。 我不知道。 也就是说，我通过将视频转换为GIF解决了手机上的自动播放问题。 我将视频隐藏在640px以下并显示GIF。 无论用户输入如何，GIF都会保持循环，因此效果很好。 Awesome. I did not know that. That said, I solved the autoplay on mobile by converting the video into a GIF. I hide the video below 640px and display the GIF in

...

看看timeupdate事件。 https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/timeupdate var runAtTime = function(handler, time) {

var wrapped = function() {

if(this.currentTime >= time) {

$(this).off('timeupdate', wrapped);

...