静音HTML 5视频&随机视频加载

时间:2012-07-09 18:28:36

标签: html5 audio video random mute

三部分问题......

我在我的网站上使用http://syddev.com/jquery.videoBG/index.html来获取HTML 5视频背景。完美的工作!但是我有一些我想要添加的附加功能,但不太确定如何将它拉下来。

1_我想添加一个按钮来静音/取消静音。我在jquery上的表现并不是很好,所以我正在寻找的是我需要添加到现有代码中以实现它以及我需要放在我想要实际按钮的位置。我猜我需要添加一些静音选项...

    $('.bg').videoBG({
    position:"fixed",
    zIndex:0,
    mp4:'_video/ClimbBG.mp4',
    ogv:'_video/ClimbBG.ogv',
    webm:'_video/ClimbBG.webm',
    poster:'_images/ClimbBG.jpg',
    opacity:1,
    fullscreen:true,

});

然后我想要按钮的一些功能/代码?

2_我希望每次加载网站时都有不同的随机视频加载。也许甚至在第一个完成后有一个新的视频播放? 示例...此网站在刷新页面时加载不同的视频(cabin-time.com)

3_不是非常重要,但我注意到很多使用视频背景的人在视频中都有小点(cab-time.con就是一个例子)。我猜这是为了减小文件大小?最有可能在Final Cut中完成?如何将其添加到我的视频中并确实减小文件大小?

感谢!!!

1 个答案:

答案 0 :(得分:1)

不幸的是,VideoBG不支持静音,所以你不能只为其添加“静音选项”,你需要自己制作。

以下是一些可以帮助您入门的内容,编辑videoBG.js,添加“静音”属性(http://syddev.com/jquery.videoBG/jquery.videoBG.js

......
// video element
    var $video = $('<video/>');
    $video.css('position','absolute')
        .css('z-index',options.zIndex)
        .attr('poster',options.poster)
        .attr('muted',options.muted)
        .css('top',0)
        .css('left',0)
        .css('min-width','100%')
        .css('min-height','100%');
 .......
 // these are the defaults
$.fn.videoBG.defaults = {
        mp4:'',
        ogv:'',
        webm:'',
        poster:'',
        autoplay:true,
        loop:5,
        sclae:false,
        position:"absolute",
        opacity:1,
        textReplacement:false,
        zIndex:0,
        width:0,
        height:0,
        muted:false

现在您可以将muted:true添加到您的媒体资源