微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

我无法使用 Vide Jquery 文档取消我的背景视频静音

如何解决我无法使用 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 举报,一经查实,本站将立刻删除。