插件 jQuery.Vide 中文 API 文档

插件 jQuery.Vide 中文 API 文档

源码 & 下载

• Github 地址：https://github.com/VodkaBears/Vide
• 源码下载： -
• 效果演示： -

笔记

支持所有现代桌面浏览器。 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