levmyshkin/vidbg

一个HTML5视频播放器。

维护者

详细信息

github.com/levmyshkin/vidbg

主页

源代码

安装数量: 8,472

依赖者: 0

建议者: 0

安全性: 0

星标: 0

关注者: 0

分支: 29

语言: TypeScript

类型: Drupal库

2.1.0 2024-05-03 09:32 UTC

MIT 29ba2e3bc55f2b238e9a74b6997bbd67630c653e

HTML5videoplayervideo background

This package is auto-updated.

Last update: 2024-09-03 10:11:09 UTC

README

一个最小化的纯JavaScript视频背景插件。

兼容性

  • 所有现代网络浏览器
  • IE 11+
  • 所有支持自动播放HTML5 <video> 的移动网络浏览器

与WordPress协同工作

如果您计划在WordPress中使用vidbg.js，请从WordPress仓库下载我制作的插件，以便让您的使用更加方便。

使用方法

安装

npm install vidbg.js

或者 从GitHub下载构建好的vidbg.zip

说明

在浏览器中

<!-- <head> -->
<link href="dist/vidbg.css" rel="stylesheet" type="text/css" />

<!-- End of <body> -->
<script src="dist/vidbg.js"></script>

或者如果您正在使用模块

import vidbg from "vidbg.js";

初始化脚本

该脚本接受三个参数。

var instance = new vidbg(selector, options, attributes);

选择器参数是任何JavaScript选择器，选项用于配置vidbg.js，而属性参数修改实际的<video>元素。

var instance = new vidbg(
  ".vidbg-box",
  {
    mp4: "http://example.com/video.mp4", // URL or relative path to MP4 video
    webm: "path/to/video.webm", // URL or relative path to webm video
    poster: "path/to/fallback.jpg", // URL or relative path to fallback image
    overlay: false, // Boolean to display the overlay or not
    overlayColor: "#000", // The overlay color as a HEX
    overlayAlpha: 0.3, // The overlay alpha. Think of this as the last integer in RGBA()
  },
  {
    // Attributes
  }
);

注意：同时提供.mp4和.webm将提高浏览器兼容性。

选项

const defaultOptions = {
  mp4: null,
  webm: null,
  poster: null,
  overlay: false,
  overlayColor: "#000",
  overlayAlpha: 0.3,
};

属性

const defaultAttributes = {
  autoplay: true,
  controls: false,
  loop: true,
  muted: true,
  playsInline: true,
};

叠加

将overlay选项设置为true将在视频上添加一个RGBA背景。当您想在视频背景上显示文本或有意义的内容以提高可读性时，这很有用。

回退图像闪烁

您可能会在页面加载时遇到回退图像闪烁。这是因为回退图像是通过JavaScript添加的。因此，它将在CSS样式渲染后加载。

如果您想解决这个问题，可以通过CSS预先设置回退图像。例如，如果您的选择器是.video-box，您可以这样做：

.video-box .vidbg-container {
  background-image: url(/assets/link-to-fallback.png);
}

方法

以下是可用的方法

// First, create the vidbg.js instance.
var instance = new vidbg(".vidbg-box", {
  mp4: "http://example.com/video.mp4",
  webm: "path/to/video.webm",
  poster: "path/to/fallback.jpg",
});

// Manually resize the video background
instance.resize();

// Manually play the video
instance.playVideo();

// Manually pause the video
instance.pauseVideo();

// Get the video playing state
instance.isVideoPlaying();

// Remove the <video> element
instance.removeVideo();

// Completely remove the video background
instance.destroy();

媒体

视频和回退图像由Christophe Tauziet在https://vimeo.com/user27974867提供

许可证

vidbg.js受MIT许可证的许可。您可以在这里查看。