String concatenation works with the addition operator +
. For every variable that you want to include, close the string and add the value to the string, then open the string again to continue.
p.name + '<br>' + '<video autoplay><source src="' + p.vidName + '" type="video/mp4"></video>'
In more modern days you have Template Literal strings which are made with backticks `
and allow you to inject variables with the ${value}
syntax.
`${p.name}<br><video autoplay><source src="${p.vidName}" type="video/mp4"></video>`
Ok, so I have really tried to find a solution, but none worked so far. Here it goes:
While clicking on a various marker I want to play the video named vidName
defined in marker attributes.
I have created variable “points” with markers, where each contains parameters (version shortened):
var points = [{
latlng: [54.351223, 18.643997],
title: "F-1",
name: "name1",
vidName: "file1.mp4"
}, {
//another points with same structure
To add it to map I use a function that allows .on(‘click’) event which uses .setContent() to show data inside definied box called “myCustomControl”, as follows (also shortened):
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);
});
So I would love to use '<video autoplay><source src="p.vidName" type="video/mp4"></video>'
to show video named file#.mp4
.
p.vidName
as standalone works properly and shows name file#.mp4
, when I use file#.mp4
inside HTML tag, the video works fine.
I’ve tried various things, like javascript:
," #{p.name}"
and all the possible straightforward combinations I could figure out or google down. I am really not a proper programmist, I’m definitely missing some syntax or a simple tool.
Thanks!