使用Jquery淡入/淡出HTML视频音频

时间:2017-01-19 00:48:59

标签: javascript jquery html video

我试图淡入&我的HTML视频的音频。每当新条目添加到我的数据库中时,我的代码就会淡入并播放一个新的视频循环,当添加另一个条目时,旧视频淡出并且新视频淡入。我一直在尝试使用.volume功能可以淡入和淡出视频的音频,但我没有运气让它起作用。有谁知道我的代码有什么问题,或者是否有其他方法可以实现这一目标?欢呼声。

HTML

 <div id="blocker"></div>
 <video autoplay poster="" id="bgvid" loop="loop" src="0.mp4" style="width: 100%;"></video>

JQUERY

    $('#blocker').fadeOut(1000);

    var checkForChanges = function () {

        $.ajax({
            type: "POST",
            url: "assets/php/videoprocess.php",
            dataType: "json",
            success: function (data) {

                var videonum = (data["VIDEOID"]); // NEW VIDEO ID
                var hash = window.location.hash.substring(1); // URL ID
                var vid = document.getElementById("bgvid"); // VIDEO DIV
                document.getElementById("bgvid").volume = 0;   // Set video volume ????

                window.location.hash = '#' + videonum;
                window.onhashchange = function () {

                    if (videonum == hash) { }

                    else {

                        vid.pause();
                        vid.animate({ volume: 0 }, 800 );  // Volume fade ????

                            $('#blocker').fadeIn(1000,  // VIDEO FADE

                            function(){

                                vid.src = location.hash.slice(1) + '.mp4';  // CHANGE VIDEO SRC
                                vid.setAttribute('loop','loop');
                                vid.load();
                                vid.play();
                                vid.animate({ volume: 1 }, 800 ); // Volume fade ????
                                $('#blocker').fadeOut(1000); // VIDEO FADE

                            });
                    }
                }

            }

        });


        setTimeout(checkForChanges, 1000);
    };
    checkForChanges();

0 个答案:

没有答案