无法在传单弹出标记中正确嵌入视频

发布于 2025-01-15 23:45:02 字数 2083 浏览 0 评论 0原文

我最近一直在制作 Leaflet 地图，在地图上放置弹出标记后，我无法在该标记中正确嵌入 mp4 视频。

问题是，虽然我已将视频链接嵌入到标记中，但当您打开弹出标记时，视频不会播放；它只显示冻结的图像。我想知道是否有一种解决方法可以让视频在打开弹出窗口后自动在此弹出标记中播放。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
 
    <style>
        #map { height: 800px; }
    </style>


</head>
<body>
    <div id="map"></div>

 

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
    <script>
       var map = L.map('map').setView([27.2, 84], 4);
  
       var Esri_NatGeoWorldMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
        attribution: 'Tiles &copy; Esri &mdash; National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
        maxZoom: 16
        }).addTo(map);

        var marker = L.marker([27.2,83.95],{draggable: true, title:"Hello", opacity: 0.5}).addTo(map).bindPopup('<h1>Marker</h1><video> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></video>').openPopup();

    </script>
</body>
</html>

原文

I've been working on a Leaflet map recently, and after putting in a popup marker on the map, I have been unable to properly embed a mp4 video in that marker.

The issue is that while I have embedded the link to the video in the marker, the video won't play when you open the popup marker; it just shows a frozen image. I was wondering if there was a workaround to get the video to play in this popup marker automatically once the popup is opened.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
 
    <style>
        #map { height: 800px; }
    </style>


</head>
<body>
    <div id="map"></div>

 

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
    <script>
       var map = L.map('map').setView([27.2, 84], 4);
  
       var Esri_NatGeoWorldMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
        attribution: 'Tiles © Esri — National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
        maxZoom: 16
        }).addTo(map);

        var marker = L.marker([27.2,83.95],{draggable: true, title:"Hello", opacity: 0.5}).addTo(map).bindPopup('<h1>Marker</h1><video> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></video>').openPopup();

    </script>
</body>
</html>

分享到QQ

分享到微博