我需要创建一个具有高清视频背景的网页。问题是视频必须按照某些标准在动态上可播放和可停止。我有一个包含以下链接的导航：“地球”、“城市”、“办公室”；视频是一个从天空向着放大的行星。你可以很容易地猜到我想要获得什么行为。我用 HTML5 视频和 Javascript 操作实现了系统，但它似乎只在 Safari 的最新版本上正常工作，Chrome 无法真正处理实时“timeupdate”javascript 操作，IE9 只是忽略了脚本。此外，整个事情很乱，我需要加载两个视频，一个用于向前播放，另一个用于向后播放，
我正在考虑一个成熟的 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>