HTML5 视频(videos)缩放JavaScript插件

当前位置:主页 > Html5库 > 音频视频播放器 > HTML5 视频(videos)缩放JavaScript插件
HTML5 视频(videos)缩放JavaScript插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-04-26
    阅读:
麦子学院
简要教程

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

网友评论