html视频自动缩放,HTML5 视频（videos）缩放JavaScript插件

简要教程

video-resize是一款可以对HTML5 视频(videos)进行缩放的JavaScript插件。插件中设置了不同的响应式断点，并通过插入样式表的方式来修改HTML5视频的显示尺寸。

使用方法

使用该插件需要在页面中引入video-resize.min.js文件。

HTML结构

可以使用一个元素来作为HTML5视频文件的播放器。

初始化插件

首先创建一个video对象，然后通过init()方法来初始化它。

varvideo =newvideoResize({element:'#video'});

video.init();

配置参数

可以在创建video对象时插入配置参数：

varvideo =newvideoResize({element:'#video',

mobileBreak: 720,

scale: 0.75,

align: {x: 0.2, y: 0.5},

fit:'cover'});

配置参数的默认值如下：

mobileBreak：默认值：1025。该参数决定移动手机的最大屏幕宽度。当屏幕宽度小于mobileBreak设定的值，视频会被显示为一幅静态的图片。

varvideo =newvideoResize({element:'#video', mobileBreak: 414);

fit：'cover'。定义视频如何改变尺寸。

fit: 'cover'：视频总是填充整个容器。

fit: 'width'：视频仅改变宽度的尺寸。

fit: 'height'：视频仅改变高度的尺寸。

varvideo =newvideoResize({element:'#video', fit:'height');

scale：1.0。定义容器中视频的尺寸，scale: 1.0表示100%的容器尺寸。

varvideo =newvideoResize({element:'#video', scale: 0.75});

align：{x: 0.5, y: 0.5}。定义视频的位置。align: {x: 0.5, y: 0.5}表示居中显示。

// Bottom-left of container

varvideo =newvideoResize({element:'#video', align: {x: 0, y: 1});