Question

我需要创建一个带有高清视频背景的网页。问题是视频必须按照某些标准进行动态播放和停止。我的导航包含以下链接：“地球”，“城市”，“办公室”;视频是一个从天空向外放大的行星。您可以轻松猜出我想要获得的行为。我使用HTML5视频和Javascript操作实现了系统，但它似乎只在最后一个版本的Safari上正常工作，Chrome无法真正处理实时“timeupdate”javascript操作，而IE9只是忽略了脚本。此外，整个事情很乱，我需要加载两个视频，一个用于前向播放，另一个用于向后播放，确定我是需要前进还是后退，最终用javascript交换视频。

我正在考虑一个完整的SWF，甚至可以确保向后兼容性和对Flash方法的操纵。有什么建议吗？

这是我现在正在使用的HTML5 / Javascript：

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

Answer 1

将您的视频嵌入SWF并通过ExternalInterface控制该视频是一种很好的方法，并且正如您所指出的那样，可以解决您在多个版本中遇到的问题（并且，可能是多个版本）您的视频的文件格式，以及不支持HTML5视频的浏览器中的向后兼容性问题。

但是，如果您需要支持iOS设备，则需要提供后备，因为这些设备不支持Flash。

Answer 2

闪光灯不支持向后播放，因为闪光灯始终从左向右播放，通过actionScrip进行时间线控制可以解决此问题。这种方法往往会使视频无法正常工作。

另外，您可以将电影序列转换为jpeg，这可以工作，但同时强调负载，并提交“SWF大小”

另一种方法是让两个相同的视频正常播放，另一个播放; 如果它们是合理的大文件只是流动它们通常更快。这些视频将在缓存中，您可以通过actionScript随心所欲地执行操作。

如果您需要时间线控制方面的帮助，请检查我所创建的文件的这个链接，附带的源代码也可以耐心加载。

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

当在同一页面上使用多个SWF相互叠加时，我发现使用CSS和PHP很容易实现这一点，允许内容叠加，也覆盖html。希望这有帮助。

带有背景高清视频和动态播放的HTML页面

2 个答案: