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

Question

这个想法是同时加载三个视频，加载后同步播放（同时）。有问题的网站是： http://dendrosite.com/interactiu/interactiu.html

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

它是在 Html5 中实现的：

---

<nav>
    <div class="videoWrapper">
        <video preload autoplay>
            <source src="paranoik.webm" type='video/webm; codecs="vorbis,vp8"'>
            <source src="paranoik.mp4" />
            <source src="paranoik.theora.ogv"  type='video/ogg; codecs="theora, vorbis"'>
        </video>

    </div>

    <div class="videoWrapper">
                <video preload autoplay>
            <source src="paranoik.webm" type='video/webm; codecs="vorbis,vp8"'>
            <source src="paranoik.mp4" />
            <source src="paranoik.theora.ogv"  type='video/ogg; codecs="theora, vorbis"'>
        </video>
    </div>

    <div class="videoWrapper">
        <video preload autoplay poster="videos/jackie.png">
            <source src="paranoik.webm" type='video/webm; codecs="vorbis,vp8"'>
            <source src="paranoik.mp4" />
            <source src="paranoik.theora.ogv"  type='video/ogg; codecs="theora, vorbis"'>
        </video>
    </div>
    </nav>

使用 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>

Answer 1

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