HTML5 视频（videos）缩放JavaScript插件

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

使用方法

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

<script src="js/video-resize.min.js"></script>                  
                

HTML结构

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

<video id="airhorn" poster="assets/airhorn.jpg" autoplay loop>
  <!-- <source src="airhorn.mp4" type="video/mp4"> -->
</video>
                

初始化插件

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

var video = new videoResize({element: '#video'});
video.init();  
                

配置参数

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

var video = new videoResize({element: '#video', 
                  mobileBreak: 720, 
                  scale: 0.75, 
                  align: {x: 0.2, y: 0.5}, 
                  fit: 'cover'});             
                

配置参数的默认值如下：

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

  var video = new videoResize({element: '#video', mobileBreak: 414);
  

• fit：'cover'。定义视频如何改变尺寸。
  • fit: 'cover'：视频总是填充整个容器。
  • fit: 'width'：视频仅改变宽度的尺寸。
  • fit: 'height'：视频仅改变高度的尺寸。

  var video = new videoResize({element: '#video', fit: 'height');
  

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

  var video = new videoResize({element: '#video', scale: 0.75});
  

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

  // Bottom-left of container
  var video = new videoResize({element: '#video', align: {x: 0, y: 1}); 
  

video-resize插件的github地址为：https://github.com/robertjanes/video-resize