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

Answer 2

看起来您正在尝试使用一些替换值创建HTML代码段。由于您已经在使用jQuery，理想的解决方案是jQuery模板

http://api.jquery.com/category/plugins/templates/

模板

<script id="theTemplate" type="text/x-jquery-tmpl">
  <video id="video-tag" width="640" height="480" poster="${imagePath}" 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='${imagePath}'&file='${mp4Path}'" />
      <!-- Image as a last resort -->\
      <img id="fallback-image" src="${imagePath}" width="640" height="480" title="No video playback capabilities" />
    </object>
  </video>
</script>

JavaScript

var args = {
  imagePath = filePath + fileImage,
  mp4Path = filePath + fileMP4
};
var theHtml = $('#theTemplate').tmpl(args);

Answer 3

永远不要将HTML与JavaScript代码混合在一起。使用模板代替，有很多可用的模板，甚至是非常小而简单的模板。

示例：

带有混合变量的文字字符串

3 个答案: