javascript - 具有混合变量的文字字符串

Question

这不起作用，我收到一个 JavaScript 错误，指出我缺少一个 ;。有没有更好的方法将变量与 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>';

我最终会用它做类似的事情。

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

Answer 1

这一行:

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

需要:

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

您缺少一个+

整个示例:

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