Wordpress短代码功能在<p>标记中添加包装内容

I am facing an issue with creating a shortcode in my functions.php file, it seems it works and pulls the data set in the shortcode but within the function it sets some javascript and html however it is adding

on everything and breaking the JS any ideas?

Error:

SyntaxError: invalid property id
[Break On This Error]   

key: '#$7bbad3b0fdd52cc4277',</p>

Code:

// 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');

Some of the Output:

<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>

To deal with the wpautop issue in your shortcode output you could, as suggested here, put the following at the end of your functions.php file:

remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 99 );
add_filter( 'the_content', 'shortcode_unautop', 100 );