[GIS] Add video in HTML Popup on Arcmap

arcgis-10.2arcgis-desktoparcmaphtml-popupvideo

How to add Video in HTML Popup on ArcMap?
It said using xsl, but I just don't get it.. try to find tutorial but no luck

I use template codes :

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
      <xsl:template match="/">
            <html>
                <head>
                    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
                </head>
                  <body>
                        <xsl:variable name="nameCol" select="FieldsDoc/Fields/Field/FieldName"/>
                              <table border="1" width="300" cellpadding="5" cellspacing="0">
                                    <tr bgcolor="#9cbce2">
                                          <xsl:if test="string-length($nameCol) != 0">
                                                <th width="50%" align="left">Field Name</th>
                                          </xsl:if>
                                          <th width="50%" align="left">Field Value</th>
                                    </tr>
                                    <xsl:variable name="index" select="1"/>
                                    <xsl:for-each select="FieldsDoc/Fields/Field">
                                          <tr>
                                                <xsl:if test="(position() +1) mod 2">
                                                      <xsl:attribute name="bgcolor">#D4e4f3</xsl:attribute>
                                                </xsl:if>
                                                <xsl:if test="string-length($nameCol) != 0">
                                                      <td>
                                                      <xsl:value-of select="FieldName"/>
                                                      </td>
                                                </xsl:if>
                                                <td>
                                                      <xsl:choose>
                                                            <xsl:when test="FieldName[starts-with(., 'VIDEO')]">
                                                                  <xsl:variable name="videoURL" select="FieldValue"/>
                                                                  <object width="425" height="355">
                                                                        <param name="movie" value="{$videoURL}"></param>
                                                                        <param name="wmode" value="transparent"></param>
                                                                        <embed src="{$videoURL}" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355">
                                                                        </embed>
                                                                  </object>
                                                            </xsl:when>
                                                            <xsl:when test="FieldValue[starts-with(., 'www.')]">
                                                                  <a target="_blank"><xsl:attribute name="href">http://<xsl:value-of select="FieldValue"/>
                                                                  </xsl:attribute><xsl:value-of select="FieldValue"/>
                                                                  </a>
                                                            </xsl:when>
                                                            <xsl:when test="FieldValue[starts-with(., 'http:')]">
                                                                  <a target="_blank"><xsl:attribute name="href"><xsl:value-of select="FieldValue"/>
                                                                  </xsl:attribute><xsl:value-of select="FieldValue"/>
                                                                  </a>  
                                                            </xsl:when>
                                                            <xsl:when test="FieldValue[starts-with(., 'https:')]">
                                                                  <a target="_blank"><xsl:attribute name="href"><xsl:value-of select="FieldValue"/>
                                                                  </xsl:attribute><xsl:value-of select="FieldValue"/>
                                                                  </a>  
                                                            </xsl:when>
                                                            <xsl:when test="FieldValue[starts-with(., '\\')]">
                                                                  <a target="_blank"><xsl:attribute name="href"><xsl:value-of select="FieldValue"/>
                                                                  </xsl:attribute><xsl:value-of select="FieldValue"/>
                                                                  </a>  
                                                            </xsl:when>
                                                            <xsl:otherwise>
                                                                  <xsl:value-of select="FieldValue"/>
                                                            </xsl:otherwise>
                                                      </xsl:choose>
                                                </td>
                                          </tr>
                                    </xsl:for-each>
                              </table>
                  </body>
            </html>
      </xsl:template>
</xsl:stylesheet>

I create field called VIDEO and put sample video link such as "youtube.com/watch?v=lncOvjE4Fko", but when I click html popup nothing happened, it shows blank on video field. No tutorial or explanation further about adding video on HTML popup. (I already load the template from source given above, and mark "as a formated page based on an XSL Template")

Best Answer

You are on the right track with XLS, however when working with YouTube videos in HTML you need to use an <iframe> to display the video. The <object> and <embed> tag combination only works with video that have not been encode through YouTube or other video service, for example: mp4, Adobe Flash, or ogg.

Rewrite the URL from https://www.youtube.com/watch?v=lncOvjE4Fko to https://www.youtube.com/embed/lncOvjE4FkoThis will allow the video to be played natively in the popup.
If you want the video to start automatically when the page loads add ?autoplay=1 to the end of the URL.
Replace the piece of code <object width="425" height="355">...</object> and put in the following:

<iframe id="ytplayer" type="text/html" width="640" height="390" src="**URL_GOES_HERE**" frameborder="0"></iframe>

The width and height can be change to be what ever works best for your size of popup, if you use 100% for both height and width it will auto size to window size.

Now when you open the popup the <iframe> will load the video and you should see the play button or if you added the ?autoplay=1 parameter in the URL it will start playing automatically.

Here is your code with the field name VIDEO check in the XLS template.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt">
 <xsl:variable name="ignoreFieldNames" select="'|OBJECTID|Shape|Shape_Length|Shape_Area|ATTACHMENTID|REL_OBJECTID|CONTENT_TYPE|ATT_NAME|DATA_SIZE|DATA|'"/>
 <xsl:template match="/">
  <html>
   <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
   </head>
   <body>
    <table>
     <tr style="text-align:center;font-weight:bold;background:">
     </tr>
     <xsl:apply-templates select="FieldsDoc/Attachments" />
     <tr>
      <td>
       <table>
        <xsl:choose>
         <xsl:when test="FieldsDoc/Fields/Field/FieldName">
          <xsl:apply-templates select="FieldsDoc/Fields/Field/FieldName[not(contains($ignoreFieldNames, concat(concat('|', text()), '|')))]/.." />
         </xsl:when>
         <xsl:otherwise>
          <xsl:apply-templates select="FieldsDoc/Fields/Field" />
         </xsl:otherwise>
        </xsl:choose>
       </table>
      </td>
     </tr>
    </table>
   </body>
  </html>
 </xsl:template>

 <xsl:template match="Field">
  <tr>

   <xsl:if test="FieldName">
    <td>
     <xsl:value-of select="FieldName"/>
    </td>
   </xsl:if>
   <td>
    <xsl:choose>
     <xsl:when test="FieldName[starts-with(., 'VIDEO')]">
       <iframe id="ytplayer" type="text/html" width="640" height="390" frameborder="0">
       <xsl:attribute name="src"><xsl:value-of select="FieldValue"/>
       </xsl:attribute>
       <xsl:value-of select="FieldValue"/>
      </iframe>
     </xsl:when>
     <xsl:otherwise>
      <xsl:value-of select="FieldValue"/>
     </xsl:otherwise>
    </xsl:choose>
   </td>
  </tr>
 </xsl:template>
</xsl:stylesheet>

Related Solutions

[GIS] ArcGIS 10 HTML popup code for images

This was the code I ended up using inside one of the XSL samples.

<xsl:when test="FieldName[starts-with(., 'Coll')]">
    <xsl:variable name="imageName" select="FieldValue"/>
    <img src="T:\SEFIS2010_GVdata\SEFIS Video\{$imageName}.jpg" width="192" height="108"/>
</xsl:when>

Edit This is the full XSL code where this is used

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <xsl:template match="/">
        <html>
            <head>
                <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
            </head>
            <body>
                <xsl:variable name="nameCol" select="FieldsDoc/Fields/Field/FieldName"/>
                    <table border="1" width="300" cellpadding="5" cellspacing="0">
                        <tr bgcolor="#9cbce2">
                            <xsl:if test="string-length($nameCol) != 0">
                                <th width="50%" align="left">Field Name</th>
                            </xsl:if>
                            <th width="50%" align="left">Field Value</th>
                        </tr>
                        <xsl:variable name="index" select="1"/>
                        <xsl:for-each select="FieldsDoc/Fields/Field">
                            <tr>
                                <xsl:if test="string-length($nameCol) != 0">
                                    <td bgcolor="#D4e4f3">
                                    <xsl:value-of select="FieldName"/>
                                    </td>
                                </xsl:if>
                                <td>
                                    <xsl:choose>
                                        <xsl:when test="FieldValue[starts-with(., 'www.')]">
                                            <a target="_blank"><xsl:attribute name="href">http://<xsl:value-of select="FieldValue"/>
                                            </xsl:attribute><xsl:value-of select="FieldValue"/>
                                            </a>
                                        </xsl:when>
                                        <xsl:when test="FieldValue[starts-with(., 'http:')]">
                                            <a target="_blank"><xsl:attribute name="href"><xsl:value-of select="FieldValue"/>
                                            </xsl:attribute><xsl:value-of select="FieldValue"/>
                                            </a>  
                                        </xsl:when>
                                        <xsl:when test="FieldValue[starts-with(., 'https:')]">
                                            <a target="_blank"><xsl:attribute name="href"><xsl:value-of select="FieldValue"/>
                                            </xsl:attribute><xsl:value-of select="FieldValue"/>
                                            </a>  
                                        </xsl:when>
                                        <xsl:when test="FieldValue[starts-with(., '\\')]">
                                            <a target="_blank"><xsl:attribute name="href"><xsl:value-of select="FieldValue"/>
                                            </xsl:attribute><xsl:value-of select="FieldValue"/>
                                            </a>  
                                        </xsl:when>
                                        <xsl:when test="FieldName[starts-with(., 'Coll')]">
                                            <xsl:variable name="imageName" select="FieldValue"/>
                                            <img src="T:\SEFIS2010_GVdata\SEFIS Video\{$imageName}.jpg" width="192" height="108"/>
                                        </xsl:when>
                                        <xsl:otherwise>
                                            <xsl:value-of select="FieldValue"/>
                                        </xsl:otherwise>
                                    </xsl:choose>
                                </td>
                            </tr>
                        </xsl:for-each>
                    </table>
                <br/>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

[GIS] LeafletJS animated marker with video

While you have written the basic code for the L.animatedMarker, I will detail it for further education. I have used some external references, like the Mapbox GoPro tutorial and a JSFiddle in the StackExchange post describing Vimeo events.

You can see my result on the following JSFiddle: http://jsfiddle.net/GFarkas/4mo8e9da/. Unfortunately, you can't test the "the added benefit of being able to move backwards and forwards in the video and marker on the line". However, you can test it on a local hosted site.

On the first 9 line of code you set up a basic Mapbox map with Leaflet. It has a center and a predefined zoom level. From then, you can skip to line 638, that long code is just a copy-pasted GeoJSON code.

The next part of the code renders the GeoJSON line to the map as a simple line feature.

var line = L.geoJson(ride, {
    style: {
        weight: 7,
        opacity: 1,
        color: '#0d8709',
        opacity: 0.7
    }
});

In the next part, I had to extract the coordinates from the GeoJSON array and switch the lan/lot values, because the GeoJSON format uses lon/lat coordinate order. I have used a loop for this task.

var raw = [];

for (var i = 0; i < ride.features[0].geometry.coordinates.length; i++) {
    var tmp = [];
    tmp[0] = ride.features[0].geometry.coordinates[i][1];
    tmp[1] = ride.features[0].geometry.coordinates[i][0];
    raw.push(tmp);
}

Now that I had a correctly ordered array of coordinates, I could've made a polyline feature, which is the only valid input of L.animatedMarker as far as I know.

var coords = L.polyline(raw),
    animatedMarker = L.animatedMarker(coords.getLatLngs(), {
        distance: 100,
        interval: 2500,
        autoStart: false
});

The distance and interval options define the speed of the marker on the line. You have to fine tune it, so your video will end at the same time as your marker. I also had to set the autoStart option to false, so later I can start the marker with the video.

From now on, here comes the "magic" part. If you want to have control over your video and your marker simultaneously, you have to use your favourite site's API besides of Leaflet. In this example I've used Vimeo's Froogaloop framework. If you want to embed a video from YouTube, you have to look up how you can use its API for this task. In the next step I've added the L.popup layer and bond it to the marker.

var popup = L.popup({
    keepInView: false,
    autoPan: false,
    closeButton: false,
    closeOnClick: false,
    maxWidth: 1000
}).setContent('<iframe id="player1" src="https://player.vimeo.com/video/69426498?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=0&amp;api=1&amp;player_id=player1" width="200" height="150" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');

animatedMarker.bindPopup(popup).openPopup();

The most important option in this object is the content. You have to add an ID to the iframe tag and include it to the video's link, too as a request with &player_id=player1. You also have to include a request for using Vimeo's API with &api=1.

I used a sample code to write the event listeners for the videos. The sample code used JQuery, so do I and I will only detail the customized part of the code.

player.addEvent('ready', function() {
    player.addEvent('pause', onPause);
    player.addEvent('finish', onFinish);
    player.addEvent('play', onPlay);
    player.addEvent('seek', onSeek);
});

We will need four events from the video. We have to know if it is paused (pause), if it is finished (finish), if it is playing (play) or if we jumped in the video (seek). Caution: do not use the playProgress event to bind it with animatedMarker.start(), it will cause the marker to accelerate uncontrollably. Now to create the proper functions for the events.

function onPause(id) {
    animatedMarker.stop();
}

function onFinish(id) {
    animatedMarker.stop();
}

function onPlay(id) {
    animatedMarker.start();
}

function onSeek(data, id) {
    animatedMarker._i = Math.round(data.percent*raw.length);
}

The first three events will return a function to start or stop the marker on the line if the video has been started or stopped. The fourth event is a little bit different. To move the marker on the map with the video, we have to use a formula to set up the marker's new place on the map. The marker's current place (vertex in the polyline) is stored in the marker._i attribute if your L.animatedMarker's variable is called marker. Fortunately the seek event returns an object with the video's duration, position and played percentage (in a scale between 0 and 1). If we return the vertex closest to the number of the vertices multiplied by the desired percentage of the video, and round it to the nearest integer, we get the marker's position on the line in the desired moment of the video with a good approximation. You can optimize the accuracy of this method by making the marker's movement duration as long as the video and working with many points (of course it only works fine if the vertices are equally distributed on the line).

I hope this answer will help and sorry for my bad English.

UPDATE:

If you want your marker to follow your directions when the video is paused, you won't be able to use L.animatedMarker.update(). You have to use L.animatedMarker.start() and L.animatedMarker.stop() which will cause the marker to jump over a vertex. Unfortunately this will reduce the accuracy of the animation, but this is the price you have to pay for an interactive map (until the author(s) fix the L.animatedMarker.update() function) .

Best Answer

Related Solutions

[GIS] ArcGIS 10 HTML popup code for images

[GIS] LeafletJS animated marker with video

Related Question