如何用JavaScript在Bootstrap模态框中嵌入<video>标签？报错解决

这个语法错误Uncaught SyntaxError: expected expression, got '<'，本质是你在JavaScript里插入HTML代码时，没把HTML字符串正确包裹起来——JS引擎把<当成了表达式的起始符号，而非字符串内容，所以报错。

错误代码示例（大概率你是这么写的） #

document.getElementById('giza_Pyramid').addEventListener('click', function() {
  // 错误：HTML标签没加引号，JS无法识别为字符串
  document.getElementById('modal_body').innerHTML = <video src="video.mp4" controls></video>;
});

正确写法 #

方法1：用模板字符串包裹HTML（最简洁） #

用ES6的模板字符串（反引号`）包裹HTML，支持换行和变量插入，不会出现语法错误：

document.getElementById('giza_Pyramid').addEventListener('click', function() {
  const videoContent = `
    <video width="100%" controls>
      <source src="你的视频路径.mp4" type="video/mp4">
      你的浏览器不支持视频播放。
    </video>
  `;
  document.getElementById('modal_body').innerHTML = videoContent;
  
  // 可选：打开模态框（如果没自动触发）
  new bootstrap.Modal(document.getElementById('你的模态框ID')).show();
});

方法2：用DOM API创建元素（更安全，避免XSS风险） #

如果你的视频路径是用户输入的动态内容，推荐用DOM原生方法创建元素，比直接插入HTML更安全：

document.getElementById('giza_Pyramid').addEventListener('click', function() {
  const modalBody = document.getElementById('modal_body');
  // 先清空模态框原有内容
  modalBody.innerHTML = '';

  // 创建video元素
  const video = document.createElement('video');
  video.setAttribute('width', '100%');
  video.setAttribute('controls', '');

  // 创建source子元素
  const source = document.createElement('source');
  source.setAttribute('src', '你的视频路径.mp4');
  source.setAttribute('type', 'video/mp4');

  // 添加元素到模态框
  video.appendChild(source);
  // 添加不支持视频的提示文本
  video.appendChild(document.createTextNode('你的浏览器不支持视频播放。'));
  modalBody.appendChild(video);

  // 打开模态框
  new bootstrap.Modal(document.getElementById('你的模态框ID')).show();
});

可用的替代函数/方法 #

• insertAdjacentHTML()：比innerHTML更灵活，可以指定HTML插入的位置（比如在已有内容末尾添加）：

// 在模态框内容末尾插入视频
modalBody.insertAdjacentHTML('beforeend', videoContent);

• jQuery（如果项目已引入）：语法更简洁，适合快速开发：

$('#giza_Pyramid').click(function() {
  $('#modal_body').html(`
    <video width="100%" controls>
      <source src="你的视频路径.mp4" type="video/mp4">
      你的浏览器不支持视频播放。
    </video>
  `);
  $('#你的模态框ID').modal('show');
});

额外注意事项 #

• 确保模态框的DOM元素已经加载完成再执行代码（可以把JS放在</body>标签前，或者用DOMContentLoaded事件包裹）。
• 如果视频加载慢，可以在模态框的shown.bs.modal事件中再插入视频，避免模态框显示时内容为空：

document.getElementById('你的模态框ID').addEventListener('shown.bs.modal', function() {
  // 在这里插入视频
});

内容的提问来源于stack exchange，提问作者Bigmacmeister