Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I'm looking to convert a site from Flash based video to HTML5, the current video uses time marks to display slides (kind of like how youtube has ads on their videos). But the difference between Youtube and my site is that it doesn't show up inside the video, the slides are displayed next to the video.

Is there any way I can accomplish this with HTML5? Or do I have to use Javascript for this?

If this isn't clear enough, please let me know.

share|improve this question
    
The HTML5 spec has tags for video, but I'm not sure about browser support just yet. –  digit1001 Jan 11 '11 at 17:31
    
diveintohtml5.org/video.html is worth a read - put me off bothering too much for now! –  Adrian Mar 11 '11 at 21:50
add comment

2 Answers 2

You'll need JavaScript.

The good news is that it's pretty easy. Just use the jPlayer video player for video playback, then bind the $.jPlayer.event.timeupdate event to advance your slideshow:

LIVE DEMO HERE

<!doctype html>
<html>
<head>
<title>Demo : jPlayer as a slide player</title>

<link href="skin/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />

<style>
#slideshow{ float:left; margin-left:10px;}
.jp-video{ float:left;}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

    $("#jp").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
                ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv",
                poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
            });
        },
        ended: function (event) {
            $(this).jPlayer("play");
        },
        swfPath: "js",
        supplied: "m4v, ogv"
    });

    $("#jp").bind($.jPlayer.event.timeupdate, function(event) { 
        var currentTime = Math.floor(event.jPlayer.status.currentTime)

        if (currentTime < 3){
            $("#slideshow").html("<img src='http://yoursite.com.com/wm/jplayer/slides/slide1.png'/>");  
        }

        if (currentTime >= 3 && currentTime < 12){
            $("#slideshow").html("<img src='http://yoursite.com.com/wm/jplayer/slides/slide2.png'/>");  
        }

        if (currentTime >= 12 && currentTime < 16){
            $("#slideshow").html("<img src='http://yoursite.com.com/wm/jplayer/slides/slide3.png'/>");  
        }

        if (currentTime >= 16 && currentTime < 22){
            $("#slideshow").html("<img src='http://yoursite.com.com/wm/jplayer/slides/slide4.png'/>");  
        }

        if (currentTime >= 22 && currentTime < 30){
            $("#slideshow").html("<img src='http://yoursite.com.com/wm/jplayer/slides/slide5.png'/>");  
        }


        if (currentTime >= 30){
            $("#slideshow").html("<img src='http://yoursite.com.com/wm/jplayer/slides/fin.png'/>"); 
        }



    });


});
//]]>
</script>
</head>
<body>
        <div class="jp-video jp-video-360p">
            <div class="jp-type-single">
                <div id="jp" class="jp-jplayer"></div>
                <div id="jp_interface_1" class="jp-interface">
                    <div class="jp-video-play"></div>
                    <ul class="jp-controls">
                        <li><a href="#" class="jp-play" tabindex="1">play</a></li>
                        <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
                        <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
                        <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
                        <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
                    </ul>
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>
                        </div>
                    </div>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                    <div class="jp-current-time"></div>
                    <div class="jp-duration"></div>
                </div>
                <div id="jp_playlist_1" class="jp-playlist">
                    <ul>
                        <li>Big Buck Bunny Trailer</li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="slideshow">
        <img src='http://yoursite.com.com/wm/jplayer/slides/slide1.png'/>
        </div>

</body>
</html>
share|improve this answer
add comment

Yes, you would need JavaScript to implement the slides feature you've described, HTML5 is just markup; you can embed a video on a page with it- but to do anything more fancy with it you'll be needing to use the usual combo of CSS and JavaScript.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.