Wordpress短代码功能，添加以< >标记

我面临的问题是在我的functions.php文件中创建一个短代码，它似乎是有效的，并在短代码中提取数据集，但在函数中它设置了一些javascript和html，但是它正在添加

上的一切，打破了JS的任何想法?

SyntaxError: invalid property id
[Break On This Error]   
key: '#$7bbad3b0fdd52cc4277',</p>

// Set Video URL and Subtitle URL
 // shortcode [video]
function show_video( $atts ){
   $video_details="";
   // get attibutes and set defaults
            extract(shortcode_atts(array(
                            'file' => '',
                            'cc' => ''
         ), $atts));
    // Display info 
        $video_details="
        <script type='"text/javascript'" src='"flowplayer-3.2.6.min.js'"></script>
    <script type='"text/javascript'" src='"flowplayer.ipad-3.2.2.min.js'"></script>
    <!-- player container-->
    <a href='"".$file."'" style='"display:block;width:473px;height:310px;'" id='"ipad'"></a>
    <script type='"text/javascript'">
    $f('"ipad'", '"flowplayer.commercial-3.2.7.swf'",{
      // commercial version requires product key
      key: '#$7bbad3b0fdd52cc4277',
      // now we can tweak the logo settings
      logo: {
        url:'logo.png',
        opacity: 0.6,
        top: 10,
        left: 15,
        fullscreenOnly: false,
        linkUrl: 'http://www.domain.com/'
      },
      contextMenu: ['Media Player 1.0'],
      clip: {
        autoPlay: false,
        url: '".$file."',
        // this is the Timed Text file with captions info
        captionUrl: '".$cc."'
      },
      /* playlist: [
          // 1:st clip
          {
            url: '".$file."',
            customProperties: {
              related: 'related.txt'
            }
          },
      ], */
      plugins:  {
        captions: {
          url: 'flowplayer.captions-3.2.3.swf',
          // pointer to a content plugin (see below)
          captionTarget: 'content'
        },
      /*related: {
          url:'flowplayer.commercial-3.2.7.swf',
          related: 'related.txt',        
          width: 400
      },*/
        // configure a content plugin to look good for our purpose
        content: {
          url:'flowplayer.content-3.2.0.swf',
          bottom: 25,
          width: '80%',
          height:40,
          backgroundColor: 'transparent',
          backgroundGradient: 'none',
          borderRadius: 4,
          border: 0,
          textDecoration: 'outline',
          style: {
            body: {
              fontSize: 14,
              fontFamily: 'Arial',
              textAlign: 'center',
              color: '#ffffff'
            }
          }
        }
      }
    }).ipad();
    </script>
        ";
        return $video_details;
}
//add our shortcode movie
add_shortcode('video', 'show_video');

部分输出:

<p>     <script type="text/javascript" src="flowplayer-3.2.6.min.js"></script><br />
    <script type="text/javascript" src="flowplayer.ipad-3.2.2.min.js"></script></p>
<p>    <!-- player container--><br />
    <a href="" style="display:block;width:473px;height:310px;" id="ipad"></a></p>
<p>    <script type="text/javascript">
    ("ipad", "flowplayer.commercial-3.2.7.swf",{
      // commercial version requires product key
      key: '#$7bbad3b0fdd52cc4277',</p>
<p>      // now we can tweak the logo settings
      logo: {
        url:'logo.png',
        opacity: 0.6,
        top: 10,
        left: 15,
        fullscreenOnly: false,
        linkUrl: 'http://www.domain.com/'
      },
      contextMenu: ['Media Player 1.0'],
      clip: {
        autoPlay: false,
        url: '',</p>