音频/视频
HTML5 视频缩放JavaScript插件
PetitQ
video-resize 是一款可以对 HTML5 视频（videos）进行缩放的 JavaScript 插件。插件中设置了不同的响应式断点，并通过插入样式表的方式来修改 HTML5 视频的显示尺寸。
使用方法:
使用该插件需要在页面中引入 video-resize.min.js 文件。
也想出现在这里？联系我们吧
<script src="js/video-resize.min.js"></script>
HTML 结构:
可以使用一个元素来作为 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 设定的值，视频会被显示为一幅静态的图片。
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 containervar video = new videoResize({element: '#video', align: {x: 0, y: 1});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
