使用 html5 视频和 react-leaflet

Question

我正在尝试使用 html5 向我的 react-leaflet 地图添加叠加层（在本例中为视频）。

<div>
    <Map viewport={this.state.viewport} onViewportChanged={this.onViewportChanged} zoomControl={false} ref='map'>
        <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' />
    </Map>
    <div>
        <video id="samp" width="540" height="300" controls>
            <source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" type="video/mp4">
            </source>
        </video>
    </div>
</div>

但传单不断覆盖视频。对我来说最好的办法是将视频保留在传单之外（虽然我知道传单中有一个视频叠加组件，但我不想使用它）

Answer 1

在我能够做到这一点之后，视频隐藏在一些地图组件后面（不是自己映射），所以视频的渲染很有趣。将 z-index 设置为 1000 并将位置设置为绝对值解决了我的问题。

.video-container {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
}

使用 html5 视频和 react-leaflet

using html5 video with react-leaflet

html

javascript

leaflet

reactjs

react-leaflet