vide.js 视频背景js插件-BFW插件库

vide.js 视频背景js插件

vide.js 视频背景js插件，支持所有现代桌面浏览器。

IE9+
iOS仅在本地播放器中播放来自浏览器的视频。因此，iOS视频被禁用，只使用全屏海报。
有些Android设备播放视频，有些则不适用。所以Android的视频被禁用，只使用全屏海报。
说明
准备好多种格式的视频，如“.webm”、“.mp4”，以便跨浏览器兼容，还可以添加扩展名为.jpg、.png或.gif的海报：
添加带有视频和海报路径的data vide bg属性（不带扩展名），视频和海报必须具有相同的名称。如果需要，添加数据提供选项以传递提供选项。默认情况下，视频被静音、循环并自动启动。

使用方式：

第一步引入bfwone 加载依赖项jquery

第二步可以通过标签或js

<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>

或

$('#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增加自定义类
}

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|jquery.vide&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <style>
        html, body {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #banner {
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            overflow: auto;

        }

        #banner h1 {
            font-size: 100px;
            line-height: 290px;

        }
    </style>

</head>
<body data-vide-bg="/bfwrepo/video/ocean">

    <div id="banner">
        <h1>VIDE.JS</h1>
    </div>

</body>
</html>

官网http://vodkabears.github.io/vide/

vide.js 视频背景js插件

网友评论0

bideo.js

video.js

RecordRTC.js

videoconverter.js

soundjs.min.js

audio.min.js

jquery.vide.js

recorder.js

hls.js

typemoneky-min.js