视频没有出现在 leaflet map 的顶部

Question

我尝试使用以下代码插入带有 html 的视频元素：

<video width="320" height="240" controls>
    <source src="http://v2v.cc/~j/theora_testsuite/320x240.ogg">
                Your browser does not support the <code>video</code> element.
</video>

当我独立运行它时，上面的方法有效，但是当我尝试将它插入到我的 leaflet map 顶部时，它就是这样出现的。

什么可能导致透明显示？

Answer 1

您的代码中有问题，因为您看到下面的示例运行良好。 我添加了和你一样的视频。

 /** * Simple map */ // config map let config = { minZoom: 7, maxZomm: 18, }; // magnification with which the map will start const zoom = 18; // co-ordinates const lat = 52.2297700; const lon = 21.0117800; // calling map const map = L.map('map', config).setView([lat, lon], zoom); // Used to load and display tile layers on the map // Most tile servers require attribution, which you can set under `Layer` L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);

 * { margin: 0; padding: 0 } html { height: 100% } body, html, #map { height: 100%; margin: 0; padding: 0 } video { position: absolute; top: 0; z-index: 9999; }

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script> <video width="320" height="240" controls> <source src="http://v2v.cc/~j/theora_testsuite/320x240.ogg"> Your browser does not support the <code>video</code> element. </video> <div id="map"></div>