Question

This does not work and I get a JavaScript error stating that I am missing a ;. Is there a better way I should be mixing variables with HTML?

var video_html = '<video id="video-tag" width="640" height="480" poster="' + filePath + fileImage + '" controls="controls" preload="none">\
  <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->\
  <source id="source-mp4" type="video/mp4" src="' + filePath + fileMP4 + '" />\
  <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->\
  <source id="source-webm" type="video/webm" src="' + filePath + fileWebM + '" />\
  <!-- Flash fallback for non-HTML5 browsers without JavaScript -->\
  <object width="640" height="480" type="application/x-shockwave-flash" data="flashmediaelement.swf">\
      <param name="movie" value="build/flashmediaelement.swf" />\
      <param id="flashvars-param" name="flashvars" value="controls=true&poster=' + filePath + fileImage '&file=' + filePath + fileMP4 + '" />\
      <!-- Image as a last resort -->\
      <img id="fallback-image" src="' + filePath + fileImage + '" width="640" height="480" title="No video playback capabilities" />\
  </object>\
  </video>';

I’m eventually doing something like this with it.

$("#video-wrap").empty().append(video_html);

Answer 1

This line:

<param id="flashvars-param" name="flashvars" value="controls=true&poster=' + filePath + fileImage '&file=' + filePath + fileMP4 + '" />\

needs to be:

<param id="flashvars-param" name="flashvars" value="controls=true&poster=' + filePath + fileImage + '&file=' + filePath + fileMP4 + '" />\

You are missing a +

Entire Example:

var video_html = '<video id="video-tag" width="640" height="480" poster="' + filePath + fileImage + '" controls="controls" preload="none">\
  <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->\
  <source id="source-mp4" type="video/mp4" src="' + filePath + fileMP4 + '" />\
  <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->\
  <source id="source-webm" type="video/webm" src="' + filePath + fileWebM + '" />\
  <!-- Flash fallback for non-HTML5 browsers without JavaScript -->\
  <object width="640" height="480" type="application/x-shockwave-flash" data="flashmediaelement.swf">\
      <param name="movie" value="build/flashmediaelement.swf" />\
      <param id="flashvars-param" name="flashvars" value="controls=true&poster=' + filePath + fileImage + '&file=' + filePath + fileMP4 + '" />\
      <!-- Image as a last resort -->\
      <img id="fallback-image" src="' + filePath + fileImage + '" width="640" height="480" title="No video playback capabilities" />\
  </object>\
  </video>';