Mobile app version of vmapp.org
Login or Join
Hamm4606531

: Has anyone been able to convert a site's media content from flash to html5? I'm looking to convert a site from Flash based video to HTML5, the current video uses time marks to display slides

@Hamm4606531

Posted in: #Flash #Html5 #Javascript

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.

10.02% popularity Vote Up Vote Down

Login to follow query

More posts by @Hamm4606531

Login to post a comment!

2 Comments

Sorted by latest first Latest Oldest Best

 

@Nickens628

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>

10% popularity Vote Up Vote Down

 

@Eichhorn148

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.

10% popularity Vote Up Vote Down

Back to top | Use Dark Theme