How to play the Red5pro recorded video in html5?

Question

I am trying to play the recorded video from Red5 pro video using the html 5 controls.

I managed to do the live streaming with .m3u8 extension and i can't play the videos already recorded [Video On Demand (VOD)].

I use the video js player for playing live stream ,but the same code is not working for recorded videos.

<video id=red5pro-video width=600 height=300 class="video-js vjs-default-skin" controls></video>

Libraries

<script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="videojs/video.min.js"></script>
<script src="videojs/videojs-media-sources.min.js"></script>
<script src="videojs/videojs.hls.min.js"></script>
<!-- Red5 Pro SDK -->
<script src="red5pro/red5pro-sdk.min.js"></script>
<script src="script/hls-metadata.js"></script>

****JS Code : ****

How can i play it or could you provide me some samples if you have?

<script>
(function () {
var player = videojs('red5pro-video');
player.src({
src: "http://54.255.142.187:5080/live/kris.m3u8", 
type: "application/x-mpegURL",
useCueTags: true
});
window.onOrientation(player, 'red5pro-video');
player.play();
})();
</script>