Javascript 如何同时加载三个视频以稍后播放同步？

想法是同时加载三个视频，加载后，播放同步（同时）。有关网页包括：

最后，有人知道为什么不能在Firefox4中正常工作，在其他浏览器中运行良好

在Html5中做到这一点：

---

使用Javascrit控制视频：

<script>

    // elt.classList is not supported by all the browser.
    // (For now, only works with Firefox >= 3.6)
    // Let's fix that.
    var containsClass = function (elm, className) {
        if (document.documentElement.classList) {
            containsClass = function (elm, className) {
                return elm.classList.contains(className);
            }
        } else {
            containsClass = function (elm, className) {
                if (!elm || !elm.className) {
                    return false;
                }
                var re = new RegExp('(^|\\s)' + className + '(\\s|$)');
                return elm.className.match(re);
            }
        }
        return containsClass(elm, className);
    }

    var addClass = function (elm, className) {
        if (document.documentElement.classList) {
            addClass = function (elm, className) {
                elm.classList.add(className);
            }
        } else {
            addClass = function (elm, className) {
                if (!elm) {
                    return false;
                }
                if (!containsClass(elm, className)) {
                    elm.className += (elm.className ? " " : "") + className;
                }
            }
        }
        addClass(elm, className);
    }

    var removeClass = function (elm, className) {
        if (document.documentElement.classList) {
            removeClass = function (elm, className) {
                elm.classList.remove(className);
            }
        } else {
            removeClass = function (elm, className) {
                if (!elm || !elm.className) {
                    return false;
                }
                var regexp = new RegExp("(^|\\s)" + className + "(\\s|$)", "g");
                elm.className = elm.className.replace(regexp, "$2");
            }
        }
        removeClass(elm, className);
    }

    var toggleClass = function (elm, className)
    {
        if (document.documentElement.classList) {
            toggleClass = function (elm, className) {
                return elm.classList.toggle(className);
            }
        } else {
            toggleClass = function (elm, className) {
                if (containsClass(elm, className))
                {
                    removeClass(elm, className);
                    return false;
                } else {
                    addClass(elm, className);
                    return true;
                }
            }
        }
        return toggleClass(elm, className);
    }

    // OK, fixed.

    var sloooooow = false;
    window.addEventListener("load", function() {
        // INIT

        window.addEventListener("keypress", function(e) {
            if (e.charCode == 32) {
                alert('Funciona');    
               }
        }, true);


        // Make videos selectable
        var selecting = false;
        var videoWrappers=document.querySelectorAll(".videoWrapper");
        for (var i=0, ii=videoWrappers.length; i < ii; i++) {
            var videoWrapper=videoWrappers[i];
            var video = videoWrapper.querySelector('video');

            videoWrapper.addEventListener("click", (function(videoWrapper, video) {
                return function(e) {
                    if (selecting) return;
                    var sel = document.querySelector(".videoWrapper.selected");
                    if (sel){
                        removeClass(sel, "selected");
                        removeClass(document.body, "videoselected");
                        sel.querySelector('video').play();
                    }
                    if (sel != videoWrapper) {
                        var timeout = window.setTimeout(
                        (function(bar) {
                            return function() {
                                addClass(videoWrapper, "selected");
                                addClass(document.body, "videoselected");
                                selecting=false;
                            }
                        })(videoWrapper), sloooooow ? 1:1);
                    }
                }
            }
            )(videoWrapper, video), true);
        }
    }, true);


</script>

//并非所有浏览器都支持elt.classList。
//（目前，仅适用于Firefox>=3.6）
//让我们来解决这个问题。
var containsClass=函数（elm，类名）{
if（document.documentElement.classList）{
containsClass=函数（elm，类名）{
返回elm.classList.contains（className）；
}
}否则{
containsClass=函数（elm，类名）{
if（！elm | |！elm.className）{
返回false；
}
var re=new RegExp（“（^ | \\s）”+className+”（\\s |$）；
返回elm.className.match（re）；
}
}
返回containsClass（elm，className）；
}
var addClass=函数（elm，类名）{
if（document.documentElement.classList）{
addClass=函数（elm，类名）{
elm.classList.add（className）；
}
}否则{
addClass=函数（elm，类名）{
如果（！elm）{
返回false；
}
如果（！containsClass（elm，className））{
elm.className+=（elm.className？“：”）+className；
}
}
}
addClass（elm，className）；
}
var removeClass=函数（elm，类名）{
if（document.documentElement.classList）{
removeClass=函数（elm，类名）{
elm.classList.remove（className）；
}
}否则{
removeClass=函数（elm，类名）{
if（！elm | |！elm.className）{
返回false；
}
var regexp=new regexp（“（^ |\\s）”+className+”（\\s |$），“g”）；
elm.className=elm.className.replace（regexp，“$2”）；
}
}
removeClass（elm，类名）；
}
var-toggleClass=函数（elm，类名）
{
if（document.documentElement.classList）{
toggleClass=函数（elm，类名）{
返回elm.classList.toggle（className）；
}
}否则{
toggleClass=函数（elm，类名）{
if（包含类（elm，className））
{
removeClass（elm，类名）；
返回false；
}否则{
addClass（elm，className）；
返回true；
}
}
}
返回toggleClass（elm，className）；
}
//好的，修好了。
var Slooooow=false；
addEventListener（“加载”，函数（）{
//初始化
window.addEventListener（“按键”，功能（e）{
如果（e.charCode==32）{
警报（“功能”）；
}
}，对）；
//使视频可选择
var=false；
var videoWrappers=document.queryselectoral（“.videoWrapper”）；
for（变量i=0，ii=videoWrappers.length；i

您可以等待所有视频的“canplaythrough”事件，然后等待所有视频的video.play（）

<script>

    // elt.classList is not supported by all the browser.
    // (For now, only works with Firefox >= 3.6)
    // Let's fix that.
    var containsClass = function (elm, className) {
        if (document.documentElement.classList) {
            containsClass = function (elm, className) {
                return elm.classList.contains(className);
            }
        } else {
            containsClass = function (elm, className) {
                if (!elm || !elm.className) {
                    return false;
                }
                var re = new RegExp('(^|\\s)' + className + '(\\s|$)');
                return elm.className.match(re);
            }
        }
        return containsClass(elm, className);
    }

    var addClass = function (elm, className) {
        if (document.documentElement.classList) {
            addClass = function (elm, className) {
                elm.classList.add(className);
            }
        } else {
            addClass = function (elm, className) {
                if (!elm) {
                    return false;
                }
                if (!containsClass(elm, className)) {
                    elm.className += (elm.className ? " " : "") + className;
                }
            }
        }
        addClass(elm, className);
    }

    var removeClass = function (elm, className) {
        if (document.documentElement.classList) {
            removeClass = function (elm, className) {
                elm.classList.remove(className);
            }
        } else {
            removeClass = function (elm, className) {
                if (!elm || !elm.className) {
                    return false;
                }
                var regexp = new RegExp("(^|\\s)" + className + "(\\s|$)", "g");
                elm.className = elm.className.replace(regexp, "$2");
            }
        }
        removeClass(elm, className);
    }

    var toggleClass = function (elm, className)
    {
        if (document.documentElement.classList) {
            toggleClass = function (elm, className) {
                return elm.classList.toggle(className);
            }
        } else {
            toggleClass = function (elm, className) {
                if (containsClass(elm, className))
                {
                    removeClass(elm, className);
                    return false;
                } else {
                    addClass(elm, className);
                    return true;
                }
            }
        }
        return toggleClass(elm, className);
    }

    // OK, fixed.

    var sloooooow = false;
    window.addEventListener("load", function() {
        // INIT

        window.addEventListener("keypress", function(e) {
            if (e.charCode == 32) {
                alert('Funciona');    
               }
        }, true);


        // Make videos selectable
        var selecting = false;
        var videoWrappers=document.querySelectorAll(".videoWrapper");
        for (var i=0, ii=videoWrappers.length; i < ii; i++) {
            var videoWrapper=videoWrappers[i];
            var video = videoWrapper.querySelector('video');

            videoWrapper.addEventListener("click", (function(videoWrapper, video) {
                return function(e) {
                    if (selecting) return;
                    var sel = document.querySelector(".videoWrapper.selected");
                    if (sel){
                        removeClass(sel, "selected");
                        removeClass(document.body, "videoselected");
                        sel.querySelector('video').play();
                    }
                    if (sel != videoWrapper) {
                        var timeout = window.setTimeout(
                        (function(bar) {
                            return function() {
                                addClass(videoWrapper, "selected");
                                addClass(document.body, "videoselected");
                                selecting=false;
                            }
                        })(videoWrapper), sloooooow ? 1:1);
                    }
                }
            }
            )(videoWrapper, video), true);
        }
    }, true);


</script>