html视频自动缩放,HTML5 视频(videos)缩放JavaScript插件
简要教程
video-resize是一款可以对HTML5 视频(videos)进行缩放的JavaScript插件。插件中设置了不同的响应式断点,并通过插入样式表的方式来修改HTML5视频的显示尺寸。
使用方法
使用该插件需要在页面中引入video-resize.min.js文件。
HTML结构
可以使用一个元素来作为HTML5视频文件的播放器。
初始化插件
首先创建一个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设定的值,视频会被显示为一幅静态的图片。
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});
html视频自动缩放,HTML5 视频(videos)缩放JavaScript插件相关推荐
- 【案例】FFMPEG GIF音乐搞笑视频自动生成 内含视频体验
这项目灵感来自[案例]别人卖1000刀!一套油管自动生产视频赚钱方法详解,踩了很多坑额 ,因为发现不管是我做出来的视频还是别人做出来的,效果体验都不怎么样,很没意思,基本看到封面就没有点击的欲望(可能 ...
- ipad能看java吗,你可以在iPad上自动播放HTML5视频吗?
我想首先说,我意识到这个问题已经过时,并且已经有了一个公认的答案;但是,作为一个不幸的互联网用户,使用这个问题作为一种手段,结束后不久就被证明是错误的(但不是在我惹恼我的客户之前),我想补充一下我的想 ...
- 调用视频流html代码,如何将/“流”视频文件发送到HTML5视频标签
我试着将一个视频文件发送到HTML5 我发现了一个可以追溯到2010年的片段. 它在互联网上到处复制,并且仍然在传播,在代码风格.名称.使用的Node.js API版本或库上有一些细微的差异. 这是片 ...
- html5 视频路径加密,HTML5视频路径混淆
这是一个奇怪的,与我一起裸露.HTML5视频路径混淆 我一直在玩Video.js,并遇到了提供的示例问题. 使用html5视频元素指定MP4(h264)视频时,会出现一些混淆. 当我使用(绝对值): ...
- 怎么在网页中播放视频之一:HTML5视频嵌入
转载自:http://jingyan.baidu.com/article/c1a3101ea983acde656deb0b.html 在网页中使用HTML5视频嵌入技术最大的优点就是不需要任何第三方插 ...
- 视频转成html5,视频转html5软件iPixSoft Video to HTML5 Converter教程
iPixSoft Video to HTML5 Converter是一款可以将视频转换为html5格式的工具,转换后就可以加载到网页中或者移动设备中播放了,支持MP4,AVI,WMV,MPEG,ASF ...
- web页面播放优酷视频,播放html5视频,兼容ie7 vcastr22.swf播放
一:vcastr22.swf播放本地视频 1.下载vcastr22.swf 把播放插文件放到服务器文件夹. 2.代码如下 红色路径是你自己服务器的路径 可以用最简单的 文件夹/文件夹/文件夹/xx.M ...
- 使用百度媒体云视频解决方案实现html5视频播放功能
2019独角兽企业重金招聘Python工程师标准>>> 问题 :使用youku等视频播放器 1会有广告 2播放器不美观 3无法在ipad 及手机上实现播放 网络上提供的html5视 ...
- 视频自动播放以及视频过大按比例裁剪为页面大小
自动播放 设置:加入muted 属性即可, loop:循环播放, autoplay:自动播放 <videomutedloopautoplaysrc="../img/video/come ...
最新文章
- linux的txt转为windows的txt
- C++ 32位和64位
- java反射机制_java反射机制的讲解
- Anaconda3使用过程中遇到的问题
- win7系统安装信息服务器不可用怎么办,Win7系统下iis服务器应用程序不可用怎么办?...
- android 按钮控制线程,关于手机安卓-线程测试
- mysql end case连接_MySql 中 case when then else end 的用法
- PyQt5-多窗口数据传输
- Python入门--文件的读写
- [转].net中Cache的应用
- 光立方原理讲解_3D打印设备SLA工艺原理是什么?
- Linux安装文件报错configure: error: no acceptable C compiler found in $PATH
- UIPATH IE浏览器下载问题
- Matlab数值分析编程:牛顿下山法解方程
- python图片文本识别的简单实现
- Java+SSM网上订餐系统点餐餐厅系统(含源码+论文+答辩PPT等)
- Unity Texture2D byte[] sprit转换
- JavaScript起源及发展
- Docker网络配置
- 五年,他们从应届生成为了滴滴的「技术扛把子」
热门文章
- 8266远程升级stc单片机-isp
- c# 读cpu温度,显卡温度,硬盘温度,风扇转速,硬件信息,cpu占用,附赠项目源码
- 【精通内核】编译原理深度解析
- Three 之 three.js (webgl)基础 第二个入门案例之汽车模型加载和简单模型展示
- 新能源汽车VCU开发模型及控制策略 新能源汽车整车控制器VCU学习模型,适用于初学者
- 图灵奖得主Judea Pearl:因果推断论文本周推荐(2022.8.8)
- 泛目录程序(豪侠泛目录源码)介绍
- DDoS攻击与防范策略
- 详解拉卡拉支付为什么布局产业互联网
- 关于等价无穷小在加减运算中的应用