Как я могу загрузить три видео одновременно, чтобы позже воспроизвести синхронизацию? - PullRequest
Новая
       15

Как я могу загрузить три видео одновременно, чтобы позже воспроизвести синхронизацию?

0 голосов
/ 02 апреля 2011

Идея состоит в том, чтобы загружать три видео одновременно, а когда они загружены, воспроизводить синхронизацию (одновременно).Веб-сайты, о которых идет речь: 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>

1 Ответ

1 голос
/ 02 апреля 2011

Вы можете дождаться события «canplaythrough» для всех видео, а затем video.play () для всех.

...