HTML5视频缩放模式？ [英] HTML5 Video scale modes?

问题描述

我正在尝试制作全屏HTML背景，这很容易。但是因为HTML5视频调整大小以适应容器同时保持纵横比，我无法得到他想要的效果。

HTML5视频是否有不同的缩放模式？我想扩展到填充和裁剪。

这是在Flash中完成的理想效果：
http://www.caviarcontent.com/

如果你调整窗口大小，你会看到它缩放和裁剪。你永远不会得到黑条。

感谢您的帮助！ 解决方案

我通过使用相同的函数我在这里写了来解决它。

如果页面上有元素，则此jQuery调整大小功能会将视频缩放为浏览器窗口的完全出血。

通过更改browserHeight和browserWidth变量，您可以缩放视频以适合DIV（确保将DIV设置为溢出：隐藏）。 b
$ b

这个函数也可以通过浏览器窗口动态调整大小。

  var sxsw = {
 
 full_bleed：function（boxWidth，boxHeight，imgWidth，imgHeight）{
 
 //计算新的高度和宽度... 
 var initW = imgWidth; 
 var initH = imgHeight; 
 var ratio = initH / initW; 
 
 imgWidth = boxWidth; 
 imgHeight = boxWidth * ratio; 
 
 //如果视频不是正确的高度，那就让它如此... 
 if（imgHeight< boxHeight）{
 imgHeight = boxHeight; 
 imgWidth = imgHeight / ratio; 
} 
 
 //返回视频的新大小
返回{
 width：imgWidth，
 height：imgHeight 
}; 
 $ b $，b 
 $ b init：function（）{
 var browserHeight = Math.round（jQuery（window）.height（））; 
 var browserWidth = Math.round（jQuery（window）.width（））; 
 var videoHeight = jQuery（'video'）。height（）; 
 var videoWidth = jQuery（'video'）。width（）; 
 
 var new_size = sxsw.full_bleed（browserWidth，browserHeight，videoWidth，videoHeight）; 
 
 jQuery（'video'）
 .width（new_size.width）
 .height（new_size.height）; 
} 
 
}; 
 jQuery（document）.ready（function（$）{
 $ b $ * / $ 
 *完全流血背景
 * / 
 
 sxsw。 （）; 
 $ b $（window）.resize（function（） $ b var browserWidth = Math.round（$（window）.width（））; 
 var videoHeight = $（'。wd-thumb-list li a'）。eq（0）.attr（'data- wd-height'）; 
 var videoWidth = $（'。wd-thumb-list li a'）。eq（0）.attr（'data-wd-width'）; 
 
 var new_size = sxsw.full_bleed（browserWidth，browserHeight，videoWidth，videoHeight）; 
 
 $（'video'）
 .width（new_size.width）
 .height（new_size .height）; 
}）; 
 
}）; 
  

I'm trying to make a fullscreen HTML background, which is easy enough. But because HTML5 video get's resized to fit the container while maintaining aspect ratio, I can't gett he desired effect.

Are there different scale modes for HTML5 video? I'd like to scale to fill-and-crop.

This is the desired effect done in Flash: http://www.caviarcontent.com/

If you resize the window you'll see it scale and crop. You will never get black bars.

Thanks for the help!

解决方案

I figured it out by using the same function I wrote about here.

If you have a element on the page, this jQuery resizing function will scale the video to be full bleed of the browser window.

By changing the browserHeight and browserWidth variables you could have the video scaled to fit a DIV (make sure you set that DIV to overflow:hidden).

This function will also resize dynamically with the browser window.

    var sxsw = {

    full_bleed: function(boxWidth, boxHeight, imgWidth, imgHeight) {

        // Calculate new height and width...
        var initW = imgWidth;
        var initH = imgHeight;
        var ratio = initH / initW;

        imgWidth = boxWidth;
        imgHeight = boxWidth * ratio;

        // If the video is not the right height, then make it so...     
        if(imgHeight < boxHeight){
            imgHeight = boxHeight;
            imgWidth = imgHeight / ratio;
        }

        //  Return new size for video
        return {
            width: imgWidth,
            height: imgHeight
        };

    },

    init: function() {
        var browserHeight = Math.round(jQuery(window).height());
        var browserWidth = Math.round(jQuery(window).width());
        var videoHeight = jQuery('video').height();
        var videoWidth = jQuery('video').width();

        var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);

        jQuery('video')
            .width(new_size.width)
            .height(new_size.height);  
    }

};
jQuery(document).ready(function($) {       

    /*
     * Full bleed background
     */

    sxsw.init();

    $(window).resize(function() {

        var browserHeight = Math.round($(window).height());
        var browserWidth = Math.round($(window).width());
        var videoHeight = $('.wd-thumb-list li a').eq(0).attr('data-wd-height');
        var videoWidth = $('.wd-thumb-list li a').eq(0).attr('data-wd-width');

        var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);

        $('video')
            .width(new_size.width)
            .height(new_size.height);        
    });

});

这篇关于HTML5视频缩放模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！