Databases
StackOverflow2013
Postsdbo
POHTML page with background HD video and dynamic playback
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML page with background HD video and dynamic playback
    text
    copied!<p>I need to create a webpage with an HD video background. Problem is that the video must be dinamically playable and stoppable following certain criteria. I have a navigation containing the following links: "Earth", "City", "Office"; the video is a planet zoom in from the sky towards. You can easily guess what behaviour I'm trying to obtain. I implemented the system with HTML5 video and Javascript manipulation but it seems to work correctly only on the last version of Safari, Chrome can't really handle real-time "timeupdate" javascript manipulation and IE9 just ignores the scripting. Besides, the whole thing is messy, I need to load TWO videos, one for forward playback and an other for backwards playback, determine whether I need to go forward or backwards and eventually swap the videos with javascript. </p> <p>I'm considering a full-blown SWF that would even assure backwards compatibility and manipulation towards Flash Methods. Any suggestions?</p> <p>This is the HTML5/Javascript I'm using right now:</p> <pre><code>&lt;head&gt; &lt;script type="text/javascript"&gt; // 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 &gt; 0 &amp;&amp; $(this)[0].currentTime &gt;= stopAt) { $(this)[0].pause(); $(".hidden-on-transactions").fadeIn(); } }); function jumpTo(frame) { if (jumps[frame][0] &gt; 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; }); }); &lt;/script&gt; &lt;style type="text/css"&gt; 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; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;video id="forward" class="background current-background" autoplay&gt; &lt;source src="background-forward.mp4" type="video/mp4" /&gt; &lt;/video&gt; &lt;video id="backwards" class="background"&gt; &lt;source src="background-reverse.mp4" type="video/mp4" /&gt; &lt;/video&gt; &lt;div id="text" class="hidden-on-transactions"&gt; &lt;h1&gt;Prova testo&lt;/h1&gt; Lorem ipsum dolor sit amet &lt;/div&gt; &lt;nav class="hidden-on-transactions"&gt; &lt;a href="#" class="frame-anchor selected" rel="space"&gt;space&lt;/a&gt; &lt;a href="#" class="frame-anchor" rel="sky"&gt;sky&lt;/a&gt; &lt;/nav&gt; &lt;/body&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload