CODEWITHSUNDEEP
javascriptflashhtmlvideo
Davide Valdo
Davide Valdo

Reputation: 779

HTML page with background HD video and dynamic playback

I need to create a webpage with an HD video background. Problem is that the video must be dinamically playable and stoppable following certain criteria. I have a navigation containing the following links: "Earth", "City", "Office"; the video is a planet zoom in from the sky towards. You can easily guess what behaviour I'm trying to obtain. I implemented the system with HTML5 video and Javascript manipulation but it seems to work correctly only on the last version of Safari, Chrome can't really handle real-time "timeupdate" javascript manipulation and IE9 just ignores the scripting. Besides, the whole thing is messy, I need to load TWO videos, one for forward playback and an other for backwards playback, determine whether I need to go forward or backwards and eventually swap the videos with javascript.

I'm considering a full-blown SWF that would even assure backwards compatibility and manipulation towards Flash Methods. Any suggestions?

This is the HTML5/Javascript I'm using right now:

<head>
    <script type="text/javascript">
        // Global containing the time where the video must pause
        stopAt = 0.1;

        /* The first value is the time in the forward video that
        matches the frame, the second is the time in the backwards video */
        jumps = {"space": [0.1, 6.3], "sky" : [6.33, 0.1]};

        currentFrame = "space";

        // Flag to signal whether playback is backwards
        reverse = false;

        $(document).ready(function () {
            // Callback to pause the video              
            $(".background").bind("timeupdate", function () {
                if (stopAt > 0 && $(this)[0].currentTime >= stopAt) {
                    $(this)[0].pause();
                    $(".hidden-on-transactions").fadeIn();
                }
            });

            function jumpTo(frame) {
                if (jumps[frame][0] > jumps[currentFrame][0]) {
                    // The requested frame is after the current one
                    stopAt = jumps[frame][0];

                    if (reverse) {
                        //  We must now play forward, therefore we switch videos
                        $(".current-background").removeClass("current-background");
                        $("#forward").addClass('current-background');                               
                        reverse = false;
                    }
                }
                else {
                    stopAt = jumps[frame][1];

                    if (!reverse) {
                        $(".current-background").removeClass("current-background");
                        $("#backwards").addClass('current-background');
                        reverse = true;
                    }
                }

                currentFrame = frame;

                // Synching forward and backwards at the same frame
                $(".background:not(.current-background)")[0].currentTime = jumps[currentFrame][reverse ? 0 : 1];

                $(".hidden-on-transactions").fadeOut();

                backgroundVideo = $(".current-background");

                // Since we've set a new value on the stopAt variable, the video will stop at the new frame
                backgroundVideo[0].play();
            }

            $(".frame-anchor").click(function () {
                $('.selected').removeClass('selected');
                $(this).addClass('selected');

                _target = $(this).attr('rel');
                jumpTo(_target);

                return false;
            });
        });
    </script>

    <style type="text/css">
        body {
            position: relative; 
            margin: 0;
            padding: 0;

            overflow: hidden;
        }

        .background {
            position: absolute;
            top: 0;
            left: 0;

            z-index: -1;

            width: 1600px;
            height: 900px;

            margin: 0;
            padding: 0;

            display: none;
        }

        .current-background {
            display: block;
        }

        nav {
            position: fixed;
            right: 0;
            top: 200px;

            width: 300px;
        }

        #text {
            background-color: rgba(255, 255, 255, 0.6);
            font-size: 17px;
            font-family: "Verdana", sans-serif;
            color: black;

            height: 500px;
            width: 350px;
            padding: 10px;

            position: absolute;
            top: 200px;
            left: 500px;
        }

        nav a {
            display: block;

            width: 90%;
            padding: 10px;
            margin-bottom: 20px;
            margin-left: auto;

            color: white;
            font-size: 13px;
            font-weight: bold;
            font-family: "Arial Black", sans-serif;
            text-align: right;

            text-decoration: none;  
            border-bottom: 2px white solid;
        }

        nav a:hover, nav a.selected {
            background-color: white;
            color: black;
        }

        .hidden-on-transactions {
            display: none;
        }
    </style>
</head>
<body>
    <video id="forward" class="background current-background" autoplay>
        <source src="background-forward.mp4" type="video/mp4" />
    </video>
    <video id="backwards" class="background">
        <source src="background-reverse.mp4" type="video/mp4" />
    </video>
    <div id="text" class="hidden-on-transactions">
        <h1>Prova testo</h1>
        Lorem ipsum dolor sit amet
    </div>

    <nav class="hidden-on-transactions">
        <a href="#" class="frame-anchor selected" rel="space">space</a>
        <a href="#" class="frame-anchor" rel="sky">sky</a>
    </nav>
</body>

Upvotes: 0

Views: 747

Answers (2)

joshua
joshua

Reputation: 684

Backwards playback is not supported in flash, as flash always plays left to right, there are solutions to this by timeline control via actionScrip. this aproach tends to make Video's not work properly.

Alternativly you can convert your movie sequence to jpegs and this will work but at the same time stressing the load, and file "SWF size"

Another method would be to make two of the same video one playing normal, the other playing backwards; if they are resonable big files just stream them its generally quicker. Than these video's will be in cache and you can do what you want with them via actionScript.

If you need help with timeline control check this link of a file i made, comes with source code also be patient for loading.

http://www.ffiles.com/flash/3_dimensional/t_shirt_3d_display_with_rotation_3131.html

When using multiple SWF overlaying each other on the same page, I found using CSS and PHP made this easily possible allowing the content to overlay, also overlaying html aswell. hope this helps.

Upvotes: 0

net.uk.sweet
net.uk.sweet

Reputation: 12431

Embedding your video(s) within a SWF and controlling that via ExternalInterface is a good approach and will, as you point out, get around the issues you're facing with multiple versions (and, presumably, multiple file formats) of your video, and issues of backwards compatibility in browsers which do not support HTML5 video.

However, if you need to support iOS devices you will need to provide a fallback as Flash is not supported on these.

Upvotes: 0

Related Questions