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并将位置设置为绝对解决了我的问题。

private AlarmManager alarmMgr;
private PendingIntent alarmIntent;
...
alarmMgr = 
(AlarmManager)context.getSystemService(Context.ALARM_SERVICE);
Intent intent = new Intent(context, AlarmReceiver.class);
alarmIntent = PendingIntent.getBroadcast(context, 0, intent, 0);

alarmMgr.set(AlarmManager.ELAPSED_REALTIME_WAKEUP,
    SystemClock.elapsedRealtime() +
    60 * 1000, alarmIntent);

使用html5视频与react-leaflet

1 个答案: