阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.Vide 中文 API 文档

      插件 jQuery.Vide 中文 API 文档

      源码 & 下载

      笔记

      支持所有现代桌面浏览器。 IE9 + iOS 仅在本机播放器中播放来自浏览器的视频。因此禁用 iOS 视频,仅使用全屏海报。 一些 Android 设备播放视频,一些不播放视频。因此禁用 Android 视频,仅使用全屏海报。

      说明

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

      准备好你的视频以多种格式,如“.webm”,”约会专家’为跨浏览器兼容,还添加了海报。jpg,.png 或。gif 延伸:

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

      添加 data-vide-bg 带有视频和海报路径的属性,不带扩展名,视频和海报必须具有相同的名称。data-vide-options 如果需要,可添加以通过视频选项。默认情况下,视频被静音,循环并自动启动。

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

      您还可以设置扩展路径:

      <div style="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 初始化它会很有帮助,因为 Vide 没有变异观察器:

      $('#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');
      

      很容易。

      选项

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

      {
        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 plugin
      var 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 instance
      instance.destroy();
      

      调整

      如果窗口调整大小,Vide 插件会调整大小。如果您将使用类似 https://github.com/cowboy/jquery-resize 的内容,它将在容器调整大小时自动调整大小。或者只需 resize() 在需要时使用方法。

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

      编码视频

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

      目录
      目录