当前位置:主页 > 网页特效 > 播放器代码 >

HTML5 视频(videos)缩放JavaScript插件

发布时间:2018/07/31 来源:互联网 浏览: 关键词:HTML5 播放器代码 
HTML5 视频(videos)缩放JavaScript插件 HTML5 视频(videos)缩放JavaScript插件
阿里云

简要教程

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

使用方法

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

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

HTML结构

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

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

初始化插件

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

varvideo =newvideoResize({element:'#video'});
video.init(); 

配置参数

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

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

配置参数的默认值如下:

  • mobileBreak:默认值:1025。该参数决定移动手机的最大屏幕宽度。当屏幕宽度小于mobileBreak设定的值,视频会被显示为一幅静态的<img>图片。
  • varvideo =newvideoResize({element:'#video', mobileBreak: 414);
  • fit:'cover'。定义视频如何改变尺寸。
    • fit: 'cover':视频总是填充整个容器。
    • fit: 'width':视频仅改变宽度的尺寸。
    • fit: 'height':视频仅改变高度的尺寸。
  • varvideo =newvideoResize({element:'#video', fit:'height');
  • scale:1.0。定义容器中视频的尺寸,scale: 1.0表示100%的容器尺寸。
  • varvideo =newvideoResize({element:'#video', scale: 0.75});
  • align:{x: 0.5, y: 0.5}。定义视频的位置。align: {x: 0.5, y: 0.5}表示居中显示。

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

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

共有人阅读,期待你的评论!评论
Top