如何解决我无法使用 Vide Jquery 文档取消我的背景视频静音
所以我按照所有步骤操作,我的网站运行良好,但我不知道如何取消静音。在这一点上,我已经尝试了所有我知道的方法。
这是我的 HTML:
<!--=================================
= BACKGROUND HOLDER
==================================-->
<div class="bg-holder zindex-0">
<!-- OVERLAY -->
<b data-bgholder="overlay" class="full-wh zindex-2" data-lgradient="y" data-radial-gradient="rgba(0,0)|rgba(0,0)"></b>
<!-- HOST VIDEO VIDEO -->
<div data-bgholder="hvideo" class="full-wh bg-cover bg-cc zindex-1" data-vide-src="videos/coverr-girl" data-vide-options="muted: false">
</div>
</div>
<!-- ======= END : BACKGROUND HOLDER ======= -->
</div>
这是我的 JavaScript:
/*---------- HOSTED VIDEO ----------*/
ckav.hostVideo = function (element) {
'use strict';
var videofile = element.attr("data-vide-src");
element.animate({ opacity: 1 },500,function () { });
element.vide({
mp4: videofile,webm: videofile,ogv: videofile,poster: videofile + ".jpg"
},{
volume: 1,playbackRate: 1,muted: false,loop: true,autoplay: true,position: 'center center',// Similar to the CSS `background-position` property.
posterType: 'jpg',// 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
});
}
以多种格式准备您的视频,例如“.webm”、“.mp4”以实现跨浏览器兼容性,同时添加带有 .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,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,position: 0% 0%">
</div>
在某些情况下,使用 JS 初始化它会很有帮助,因为 Vide 没有突变观察者:
$('#myBlock').vide('path/to/video');
$('#myBlock').vide('path/to/video',{
...options...
});
$('#myBlock').vide({
mp4: path/to/video1,poster: path/to/poster
},{
...options...
});
$('#myBlock').vide('extended path as a string','options as a string');
简单。
选项
以下是选项和匹配默认值的完整列表:
{
volume: 1,muted: true,position: '50% 50%',// Similar to the CSS `background-position` property.
posterType: 'detect',... - extensions.
resizing: true,read: https://github.com/VodkaBears/Vide#resizing
bgColor: 'transparent',className: '' // Add custom CSS class to Vide div
}
现在我尝试添加 data-vide-options
来手动更改它。它似乎不需要。有没有另一种方式,或者我在这里错过了什么。视频在着陆页上播放得很好,我似乎一辈子都无法取消静音。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。