Vide, 不再主动维护

分享于 

7分钟阅读

GitHub

  繁體 雙語
Easy as hell jQuery plugin for video backgrounds.
  • 源代码名称:Vide
  • 源代码网址:http://www.github.com/vodkabears/Vide
  • Vide源代码文档
  • Vide源代码下载
  • Git URL:
    git://www.github.com/vodkabears/Vide.git
    Git Clone代码到本地:
    git clone http://www.github.com/vodkabears/Vide
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/vodkabears/Vide
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    NPM versionBower versionTravis 视频

    不再主动维护。 我不想再维护jQuery插件了。 如果你有一些修复,可以自由地做。

    轻松为视频背景提供jQuery插件。

    注释

    • 支持所有现代桌面浏览器。
    • IE9 +
    • iOS仅在本地播放器中播放来自浏览器的视频。 iOS的视频被禁用,只使用全屏海报。
    • 有些安卓设备播放视频,有些不是- go。 所以安卓的视频被禁用了,只使用全屏海报。

    命令行指令

    GitHub 下载它,或者通过 Bower: bower install vide

    包含插件: <script src="js/jquery.vide.min.js"></script>

    用'. webm','. mp4'和 跨浏览器 等多种格式准备视频,还添加带有 .jpg.png 或者 .gif 扩展的海报:

    
    path/
    
    
    ├── to/
    
    
    │ ├── video.mp4
    
    
    │ ├── video.ogv
    
    
    │ ├── video.webm
    
    
    │ └── video.jpg
    
    
    
    

    添加 data-vide-bg 属性的视频和海报没有延伸,视频和海报必须具有相同的NAME。 如果需要,添加 data-vide-options 来传递视频选项。 默认情况下,视频被静音,循环并自动启动。

    <divstyle="width: 1000px; height: 500px;"data-vide-bg="path/to/video"data-vide-options="loop: false, muted: false, position: 0% 0%">
    </div>

    还可以设置扩展路径:

    <divstyle="width: 1000px; height: 500px;"data-vide-bg="mp4: path/to/video1, webm: path/to/video2, ogv: path/to/video3, poster: path/to/poster"data-vide-options="posterType: jpg, loop: false, muted: false, position: 0% 0%">
    </div>

    在某些情况下,使用JS初始化它可能会有帮助,因为视频没有变异观察者:

    $('#myBlock').vide('path/to/video');$('#myBlock').vide('path/to/video', {...options...});$('#myBlock').vide({
     mp4: path/to/video1,
     webm: path/to/video2,
     ogv: path/to/video3,
     poster: path/to/poster
    }, {...options...});$('#myBlock').vide('extended path as a string', 'options as a string');

    hell啊。

    命令行选项

    下面是选项的完整列表和匹配的默认值:

    {
     volume:1,
     playbackRate:1,
     muted:true,
     loop:true,
     autoplay:true,
     position:'50% 50%', // Similar to the CSS `background-position` property. posterType:'detect', // Poster image type."detect" - auto-detection;"none" - no poster;"jpg","png","gif",... - extensions. resizing:true, // Auto-resizing, read: https://github.com/VodkaBears/Vide#resizing bgColor:'transparent', // Allow custom background-color for Vide div, className:''// Add custom CSS class to Vide div}

    方法

    以下是完整的方法列表:

    // Get instance of the pluginvar instance =$('#yourElement').data('vide');// Get video element of the background. Do what you want.instance.getVideoObject();// Resize video background.// It calls automatically, if window resize (or element, if you will use something like https://github.com/cowboy/jquery-resize).instance.resize();// Destroy plugin instanceinstance.destroy();

    调整大小

    如果窗口调整大小,视频插件将重新调整大小。 如果你将使用类似于 https://github.com/cowboy/jquery-resize 插件的内容,那么当容器重新调整大小时,它将自动调整大小。 或者只要需要,就使用 resize() 方法。

    resizing 选项设置为 false 以禁用自动调整大小。

    编码视频

    http://diveintohtml5.info/video.html#miro

    Meteor

    安装

    meteor add vodkabears:vide

    用法

    由于 Meteor 如何呈现模板,你需要手动为你想要使用视频的模板初始化。

    Template.templateName.onRendered(function() {
     this.$('#elementName').vide('fileNameWithoutExtension');
    });

    采用zimme技术实现的Meteor 集成。

    ruby-gem

    Vider,由伊斯兰教 Wazery。

    许可证

    
    The MIT License (MIT)
    
    
    
    Copyright (c) 2015 Ilya Makarov
    
    
    
    Permission is hereby granted, free of charge, to any person obtaining a copy
    
    
    of this software and associated documentation files (the"Software"), to deal
    
    
    in the Software without restriction, including without limitation the rights
    
    
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    
    
    copies of the Software, and to permit persons to whom the Software is
    
    
    furnished to do so, subject to the following conditions:
    
    
    
    The 上面 copyright notice and this permission notice shall be included in all
    
    
    copies or substantial portions of the Software.
    
    
    
    THE SOFTWARE IS PROVIDED"AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    
    
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    
    
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    
    
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    
    
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    
    
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    
    
    SOFTWARE.
    
    
    
    

    act  MAIN  Active  long  
    相关文章