如何动态编辑JW Player JavaScript？

Question

我的页面中有一个包含JW播放器代码的文本框：

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

<script type="text/javascript">
    jwplayer("video-container").setup({
        autostart: false,
        skin: "/skins/modieus/modieus.zip",
        image: "/wp-content/uploads/picture-filename.jpg",
        file: "/wp-content/uploads/video-filename.mp4",
        flashplayer: "/jwplayer/player.swf",
        volume: 80,
        width: 853,
        height: 480
    });
</script>                             

此外，我还有其他三个文本区域和两个复选框：

1. 第一个文本框是图像的名称。
2. 第二个是视频文件的名称。
3. 第三个是单独的占位符，其中将放置生成的脚本输出（见下文）。

您可以在上面的JavaScript中看到它们：

• image: "/wp-content/uploads/picture-filename.jpg"
• file: "/wp-content/uploads/video-filename.mp4"

当您单击第一个复选框时，我们需要从文本区域中获取脚本，并将图像和视频文件的名称从他们自己的文本框添加到正确的位置。然后，此生成的代码将添加到页面底部的第三个文本区域。

如果用户单击第二个复选框，则应从文本区域中抓取JW Player的原始（简单）代码，并将其插入页面底部的第三个文本区域，而不进行任何修改。

我需要使用哪些代码才能实现此目的？这是通过服务器端的PHP还是客户端的jQuery更好地完成的？