HD ビデオの背景を持つ Web ページを作成する必要があります。問題は、ビデオが特定の基準に従って動的に再生可能および停止可能でなければならないことです。「地球」、「都市」、「オフィス」のリンクを含むナビゲーションがあります。ビデオは惑星が上空からズームインしたものです。私が取得しようとしている動作は簡単に推測できます。HTML5 ビデオと Javascript 操作でシステムを実装しましたが、Safari の最新バージョンでのみ正しく動作するようです。Chrome はリアルタイムの「timeupdate」JavaScript 操作を実際には処理できず、IE9 はスクリプトを無視します。その上、全体が面倒です。1 つは順方向再生用、もう 1 つは逆方向再生用の 2 つのビデオをロードする必要があります。
私は、Flash メソッドに対する後方互換性と操作を保証する本格的な SWF を検討しています。助言がありますか？
これは、私が現在使用している 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>