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.

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

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:

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

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

#slideshow{ float:left; margin-left:10px;}
.jp-video{ float:left;}

<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">

        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) {
        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'/>"); 

        <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>
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    <div class="jp-current-time"></div>
                    <div class="jp-duration"></div>
                <div id="jp_playlist_1" class="jp-playlist">
                        <li>Big Buck Bunny Trailer</li>
        <div id="slideshow">
        <img src='http://yoursite.com.com/wm/jplayer/slides/slide1.png'/>

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.

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