音频/视频

HTML5 视频缩放JavaScript插件

面包多

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

使用方法:

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

也想出现在这里?联系我们
创客主机
  1. <script src="js/video-resize.min.js"></script>

HTML 结构:

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

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

初始化插件:

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

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

配置参数:

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

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

配置参数的默认值如下:

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

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

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

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

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

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

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

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

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

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

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

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!