HTML5 视频(videos)缩放JavaScript插件

2019-10-09 15:57:09 作者: 大梦 浏览: 8 [百度未收录] [搜狗已收录] [360已收录]

简要教程

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

使用方法

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

HTML结构

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

初始化插件

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

配置参数

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

配置参数的默认值如下:

  • mobileBreak:默认值:1025。该参数决定移动手机的最大屏幕宽度。当屏幕宽度小于mobileBreak设定的值,视频会被显示为一幅静态的图片。 
  • fit:'cover'。定义视频如何改变尺寸。

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

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

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

     

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


版权免责声明 1、本网站名称:罗网轻量级sns社区,源码分享平台
2、本站永久网址:http://www.luopay.cn
3、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效  点此反馈 我们会第一时间更新。

下载地址
评论
本文作者 阅读排行 文章推荐

首页
最新
投稿
精选
我的