jPlayer can not play .flv file

Question

I can not use jPlayer to play video files that are .flv files.

I download the demo code from jPlayer home page and trying to edit one demo file to play .flv file.

Here is the code:

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

<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer as a video player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                flv: "http://stream.baicadicungnamthang.info/medias/Ngoc%20Lan%202/Bai%20ca%20thong%20nhat%20-%20(Vo%20Van%20Di)%20-%20Ngoc%20Lan.flv"
            });
        },
        swfPath: "js",
        supplied: "flv, webmv, ogv, m4v",
        size: {
            width: "640px",
            height: "360px",
            cssClass: "jp-video-360p"
        },
        smoothPlayBar: true,
        keyEnabled: true
    });

});
//]]>
</script>
</head>
<body>
        <div id="jp_container_1" class="jp-video jp-video-360p">
            <div class="jp-type-single">
                <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                <div class="jp-gui">
                    <div class="jp-video-play">
                        <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
                    </div>
                    <div class="jp-interface">
                        <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                            </div>
                        </div>
                        <div class="jp-current-time"></div>
                        <div class="jp-duration"></div>
                        <div class="jp-controls-holder">
                            <ul class="jp-controls">
                                <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                                <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                                <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                                <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                                <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                                <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                            </ul>
                            <div class="jp-volume-bar">
                                <div class="jp-volume-bar-value"></div>
                            </div>
                            <ul class="jp-toggles">
                                <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
                                <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
                                <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                                <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                            </ul>
                        </div>
                        <div class="jp-title">
                            <ul>
                                <li>Big Buck Bunny Trailer</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="jp-no-solution">
                    <span>Update Required</span>
                    To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                </div>
            </div>
        </div>
</body>

</html>

The video file here is correct, you can test it. http://stream.baicadicungnamthang.info/medias/Ngoc%20Lan%202/Bai%20ca%20thong%20nhat%20-%20(Vo%20Van%20Di)%20-%20Ngoc%20Lan.flv

But the player can not play it.

Can anyone show me the demo that can play .flv file?

Updated: When use debug mode errorAlerts: true,, it shows this alert: enter image description here

Updated: I have found the solution Just edit from

supplied: "flv, webmv, ogv, m4v",

to

supplied: "flv",

Try this http://stackoverflow.com/questions/10786034/how-play-flv-files-using-jplayer . If this works, tell me so i can add this as an answer. Thanks! — Hunter Mitchell, Nov 05 '13 at 02:10
@EliteGamer: I tried your suggestion, but I still doesn't work for me. It shows the same error as I updated above. — Nguyễn Trọng Bằng, Nov 05 '13 at 02:32
Are you able to go with another player, or are you deadset on using jplayer? @Nguen — Hunter Mitchell, Nov 05 '13 at 02:57
My website is using jPlayer because of HTML5. It's easier for me to control everything that flash player can not do. About several months ago, jPlayer can play .flv properly, but now I don't know why It can not. — Nguyễn Trọng Bằng, Nov 05 '13 at 03:07
Ok, can you use the sample below, or would you like me to look further into jPlayer. Also, why do you not just use the HTML player? — Hunter Mitchell, Nov 05 '13 at 03:10

score 0 · Answer 1 · answered Nov 05 '13 at 03:03

I found a solution with this code:

 $(document).ready(function ubstart()
{

    $('body').append('<div id="mediaplayer"></div>');
    $.getScript('http://player.longtailvideo.com/jwplayer.js', function ()
    {
       jwplayer("mediaplayer").setup({
         flashplayer: "http://player.longtailvideo.com/player.swf",
         file: 'http://stream.baicadicungnamthang.info/medias/Ngoc%20Lan%202/Bai%20ca%20thong%20nhat%20-%20(Vo%20Van%20Di)%20-%20Ngoc%20Lan.flv',
     autostart: "true"
    });
       $('#mediaplayer_wrapper').css('z-index','107').css('width','853px').css('height','505px').css('padding','10px').addClass('bg_one').center();
    });

});

You will need to tweak the code to your specs, but this works perfectly.

Thanks for your solution but this just a temporary solution. The method uses a flash player to play video which is not featured of HTML5. I need a solution that works for my specs above. — Nguyễn Trọng Bằng, Nov 05 '13 at 06:06

score 0 · Answer 2 · answered Nov 06 '13 at 16:07

I have found the solution: That's simple:

Just edit from

supplied: "flv, webmv, ogv, m4v",

to

supplied: "flv",

The rule here is that: the setMedia and the supplied must match. In my original code, in setMedia field, I just defined one media type (flv) but in the supplied field, I defined four media types (flv, webmv, ogv, m4v). So it brokes the rules and jPlayer cannot play it.

The solution from Mark Panaghiston:

A simple problem, supplied: "flv"

The way you have it, with "m4v,flv" you have to supply both formats in the setMedia. That is why on most browsers, such as Chrome, it will have setup the HTML solution and be expecting a m4v URL. Then you only giveit an flv, so you broke the rules and jPlayer cannot play it.

If you say I will supply formats A, B and C, then you must supply them for every setMedia. >The core formats are given in the docs: http://jplayer.org/latest/developer-guide/#jPlayer-essential-formats

The exception is for a media player, where you supply: audio-A, audio-B, video-A, video-B and then the setMedia must then give ALL the audio ro video formats to ensure it works.

You other problem there though... Is that you you are not using absolute URLs. - I have fixed that recently on Github and plan to push.

See also: http://jplayer.org/latest/developer-guide/#jPlayer-option-supplied http://jplayer.org/latest/developer-guide/#jPlayer-setMedia

Ultimately in your case, you should abandon the flv format and only use the m4v (MP4: H.264/AAC) format. The FLV format is a byproduct and was never an intended part of the design.

jPlayer can not play .flv file

2 Answers2