video.js with flv file

I am trying to play a flv file using video.js. So far I have included:

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video-js.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video.js"></script>

and then in my body:

<video id="my-player" class="video-js" controls="" preload="auto" width="640" height="264" poster="" data-setup="{}">
<source src="http://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv" type="video/flv">
</video>

However, the video is not loaded and not shown. Anyone has experience with video.js and flv files and why it does not work?

Solution

You need to use the "videojs-flash" plugin and set mime type to "video/x-flv". Be careful "videojs-flash" plugin also used "videojs-swf" plugin

Example html file with video.js v7, supports flv, hls, rtmp stream.

<!DOCTYPE html>
<html>
<head><meta charset=utf-8 /></head>

<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<link href="//vjs.zencdn.net/7.3/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.3/video.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>


<ul id="playlist">
<li data-url="http://podcast.rickygervais.com/rickyandpepe_twitter.mp4">Source 1</li>
<li data-url="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4">Source mp4</li>
<li data-url="http://assets3.ign.com/videos/zencoder/2016/06/15/640/7080c56a76e2b74ec8ecfe4c224441d4-500000-1466028542-w.mp4">Source 3</li>

<li data-url="https://nmxlive.akamaized.net/hls/live/529965/Live_1/index.m3u8" data-type="application/x-mpegURL">TV HLS</li>
<li data-url="http://path /aquila.mkv" data-type="video/mp4">aquila.mkv</li>

<li data-url="rtmp://path" data-type="rtmp/mp4">camera RTMP</li>

<li data-url="http://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv" data-type="video/x-flv">testclips.flv</li>   

</ul>

<video id="my-video" class="video-js" controls preload="auto" width="640" height="480"
   data-setup="{}">
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video></body>    

<script>
$(function(){
var player = videojs('my-video');

$("#playlist li").on("click", function() {
player.pause();
var src = $(this).attr("data-url");
var type = $(this).attr("data-type");
player.src({src, type})
// set src track corresponding to new movie //
player.load();
player.play();
});
});
</script>


</html>