使用模板文字附加 HTMLVideoElement 对象

如何解决使用模板文字附加 HTMLVideoElement 对象

我将一个视频元素附加到一个 div。我想通过将视频元素包装在 html 模板中来做到这一点。但是，视频元素不会显示，而是显示为 [object HTMLVideoElement]。但是如果我只附加视频元素，它会显示视频流。我需要一个解决方法才能在附加之前将 html 模板附加到视频。

带模板字符串（不显示视频）

const addStream = (video,stream) => {
  video.srcObject = stream;
  video.addEventListener("loadedMetadata",() => {
    video.play();
  });

  $(videoFrame).append(`
  <div class="col-lg-6 mb-3">
  <div class="card card-custom gutter-b">
    <div class="card-body">
      <div
        class="d-flex justify-content-between flex-column h-100"
      >
       
        <div class="h-100">
       
          <div class="d-flex flex-column flex-center">
       
            <div
              class="embed-responsive embed-responsive-16by9"
            >
          ${video}
            </div>
       
       
            <a
              href="javascript:void(0)"
              class="card-title font-weight-bolder text-dark-75 text-hover-primary font-size-h4 m-0 pt-7 pb-1"
              >New User</a
            >
       
       
            <div
              class="font-weight-bold text-dark-50 font-size-sm pb-7"
            >
              User address
            </div>
           
          </div>
          
        </div>
       
      </div>
    </div>
  </div>
</div>  
  `);
};

无模板字符串（显示视频流）

const addStream = (video,() => {
    video.play();
  });

  $(videoFrame).append(video);
};