0
HDビデオ背景を持つウェブページを作成する必要があります。問題は、ビデオが特定の基準に従って、dinamically再生可能であり、停止可能でなければならないことです。私は以下のリンクを含むナビゲーションを持っています： "地球"、 "都市"、 "オフィス";ビデオは惑星であり、空から空に向かってズームインします。私が得ようとしている行動を簡単に推測することができます。私はHTML5ビデオとJavascript操作でシステムを実装しましたが、Safariの最後のバージョンでのみ正しく動作するようですが、Chromeはリアルタイムの「timeupdate」JavaScript操作を処理できず、IE9はスクリプトを無視します。さらに、全部が乱雑です。順方向再生と逆方向再生の2つのビデオをロードする必要があります。前方または後方に移動し、最終的にビデオをJavaScriptでスワップする必要があるかどうかを判断します。背景HDビデオとダイナミック再生のHTMLページ
私は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>