Changing JWPlayer video onClick

问题

This is what I have so far below. If I hard code the file: media/video2.mp4 in the function it works but when I make it a variable its not passing it through correctly because I keep get this error:

Error loading player: No playable sources found

Code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My JWPlayer</title>
    <script type="text/javascript" src="jwplayer/jwplayer.js" ></script>

    <script type="text/javascript">
     function changeVideo(filename) {
     jwplayer("video").setup({
       file: " + filename + ",
        height: 360,
        width: 640,
    });
    jwplayer('video').load();
}
     </script>
    </head>

    <body>
    <div id="video">Loading the player ...</div>

    <script type="text/javascript">
        jwplayer("video").setup({
            file: "media/video1.mp4",
            height: 360,
            width: 640
        });
    </script>

    <p><a href="javascript:void();" onclick="javascript:changeVideo('media/video2.mp4');">Play Video 2</a></p>
    </body>
    </html>