博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
基于jQuery的响应式网站视频插件FitVids.js
阅读量:6820 次
发布时间:2019-06-26

本文共 1012 字,大约阅读时间需要 3 分钟。

FitVids.js是一个轻量级的jQuery响应式视频插件,他可以实现流体视频的嵌入。FitVids.js应用了内在的比例算法,在你的响应网页上实现视频的流体宽度。

引入 jQuery 1.7+ and FitVids.js ,使用fitVids()方法把视频放到目标容器中。

这段代码会让视频(video)被包含于一个已经设置了必要样式的fluid-width-video-wrapper类的div里。JavaScript调用后,所有的元素都会基于百分比进行显示。

目前支持的播放器

YouTube Y

Vimeo Y
Blip.tv Y*
Viddler Y*
Kickstarter Y*
*表示原生支持可能已经被弃用。如果还没支持你的视频平台,可以尝试添加customSelector...

有没有一个自定义的视频提供商呢?答案是肯定的,FitVids.js有一个可以你添加自己的视频提供商的customSelector选项

$("#thing-with-videos").fitVids({ customSelector: "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']"});// Selectors are comma separated, just like CSS

注意:这是添加自己的自定义的提供商,以及测试他们与FitVids兼容性的最快方式。

有没想过通过FitVids来忽略一个视频?你可以直接给对象或者容器添加一个fitvidsignore类,然后你的视频就会根据这个类的属性来进行显示。如果你想添加自定义块来忽略FitVids,那就你就可以使用这个类了。

$("#thing-with-videos").fitVids({ ignore: '.mycooldiv, #myviiid'});// Selectors are comma separated, just like CSS

在IE11中,Vimeo的自动播放API还没与FitVids兼容。您必须手动点击要自动播放的视频。

 

转载于:https://www.cnblogs.com/design-engineer/p/5383185.html

你可能感兴趣的文章