在 Leaflet 的 .setContent() 中的视频 HTML 标签中使用 JavaScript 的值

Question

好的，所以我真的试图找到一个解决方案，但到目前为止都没有奏效。事情是这样的： 在单击各种标记时，我想播放在标记属性中定义的名为vidName的视频。

我用标记创建了变量"点"，每个点都包含参数(版本缩短(：

var points = [{
latlng: [54.351223, 18.643997],
title: "F-1",
name: "name1",
vidName: "file1.mp4"
}, {
//another points with same structure

为了将其添加到地图中，我使用了一个允许 .on('click'( 事件的函数，该函数使用 .setContent(( 在名为"myCustomControl"的定义框中显示数据，如下所示(也缩短(：

points.forEach(function(p) {
const marker = L.marker(p.latlng, {
title: p.title,
riseOnHover: true
})
.addTo(map)
.on('click', function(e) {
myCustomControl.setContent(p.name + '<br>' + '<video autoplay><source src="p.vidName" type="video/mp4"></video>');
})
markers.push(marker);
});

所以我很想用'<video autoplay><source src="p.vidName" type="video/mp4"></video>'来显示名为file#.mp4的视频。p.vidName作为独立工作正常并显示名称file#.mp4，当我在 HTML 标签中使用file#.mp4时，视频工作正常。

我尝试了各种东西，比如javascript:，" #{p.name}"以及我能想出或谷歌搜索的所有可能的简单组合。我真的不是一个合适的程序员，我肯定缺少一些语法或简单的工具。 谢谢！

Answer 1

字符串连接适用于加法运算符+。对于要包含的每个变量，关闭字符串并将值添加到字符串中，然后再次打开字符串以继续。

p.name + '<br>' + '<video autoplay><source src="' + p.vidName + '" type="video/mp4"></video>'

在更现代的时代，您拥有模板文字字符串，这些字符串是用反引号`创建的，并允许您使用${value}语法注入变量。

`${p.name}<br><video autoplay><source src="${p.vidName}" type="video/mp4"></video>`