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

HTML page with background HD video and dynamic playback

本文关键字：播放 HTML 页面动态背景高清视频更新时间：2023-09-26

>我需要创建一个具有高清视频背景的网页。问题是视频必须按照某些标准动态播放和停止。我有一个包含以下链接的导航："地球"、"城市"、"办公室";视频是一个从天空向放大的行星。你可以很容易地猜到我试图获得什么行为。我用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>

将

视频嵌入到 SWF 中并通过 ExternalInterface 进行控制是一种不错的方法，正如您所指出的，它将解决您在视频的多个版本（可能还有多种文件格式）时面临的问题，以及在不支持 HTML5 视频的浏览器中向后兼容的问题。

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

flash不支持向后播放，因为flash总是从左到右播放，可以通过ActionScrip进行时间轴控制来解决此问题。这种缺陷往往会使视频无法正常工作。

或者，您可以将电影序列转换为jpeg，这将起作用，但同时强调负载，并文件"SWF大小"

另一种方法是使两个相同的视频一个正常播放，另一个向后播放;如果它们是合理的大文件，只需流式传输它们通常更快。这些视频将在缓存中，您可以通过 actionScript 对它们做您想做的事情。

如果您需要时间线控制的帮助，请检查我制作的文件的此链接，随附源代码也请耐心加载。

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

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