Annotations: Third-Party Embeds | RedBlue Developer Guide

Hotspot Over YouTube Video

XML

Code

<redblue-video id="redblue-youtube-xml" aspect-ratio="16:9" debug="debug">
  <hvml xmlns="https://hypervideo.tech/hvml#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:css="https://www.w3.org/TR/CSS/" xml:lang="en-US" hidden="hidden">
    <video type="personal" xml:id="ep-23">
      <title>Overnight Dance Party at the Museum of Fine Arts Boston</title>
      <episode>23</episode>
      <recorded>2016-09-17</recorded>
      <description type="xhtml">
        <div xmlns="http://www.w3.org/1999/xhtml">
          <p>Full Facebook Live stream: https://www.facebook.com/hugh.guiney/videos/10100195051457860/</p>
          <p>#mfaNOW #mfaLateNites</p>
        </div>
      </description>
      <showing scope="release" type="internet" admission="private">
        <venue type="site">
          <entity site="https://www.youtube.com/">YouTube</entity>
          <uri>https://www.youtube.com/watch?v=nWdWq3hMwao</uri>
          <title>Overnight Dance Party at the Museum of Fine Arts Boston | Hugh’s Vlog | #mfaNOW #mfaLateNites</title>
        </venue>
      </showing>
      <presentation>
        <choice xml:id="full-stream">
          <name>Go to: <code style="font-family: inherit; font-weight: bold;">hugh.today/2016-09-17/live</code> for the full stream</name>
          <goto on="duration" xlink:actuate="onRequest" xlink:href="https://www.facebook.com/hugh.guiney/videos/10100195051457860/" width="70%" height="13%" css:font-size="calc(384 / 150 * 1vw)" css:font-family="'Noto Sans CJK JP', 'Noto Sans CJK', 'Noto Sans', sans-serif" css:white-space="nowrap" css:overflow="hidden">
            <animate startTime="517.292107" endTime="518.872131" startX="14.9%" startY="-15%" endX="15%" endY="10%"></animate>
            <animate starttime="523.373882" endtime="524.873404" startx="14.9%" starty="10%" endx="15%" endy="-15%"></animate>
          </goto>
        </choice>
      </presentation>
    </video>
  </hvml>
</redblue-video>

Result

JSON-LD

Code

<redblue-video id="redblue-youtube-json-ld" aspect-ratio="16:9" debug="debug">
  <script type="application/ld+json">
  {
    "@context": "https://redblue.video/guide/hvml.context.jsonld",
    "@type": "video",
    "@id":  "vlog:2016-09-17",
    "xml:id": "ep-23",
    "type": "personal",
    "title": "Overnight Dance Party at the Museum of Fine Arts Boston",
    "episode": 23,
    "recorded": "2016-09-17",
    "description": {
      "html:div": {
        "childNodes": [
          {
            "@type": "p",
            "@value": "Full Facebook Live stream: https://www.facebook.com/hugh.guiney/videos/10100195051457860/"
          },
          {
            "@type": "p",
            "@value": "#mfaNOW #mfaLateNites"
          }
        ]
      }
    },
    "showing": {
      "scope": "release",
      "type": "internet",
      "admission": "private",
      "venue": {
        "type": "site",
        "entity": [
          {
            "site": "https://www.youtube.com/"
          },
          "YouTube"
        ],
        "uri": "https://www.youtube.com/watch?v=nWdWq3hMwao",
        "title": "Overnight Dance Party at the Museum of Fine Arts Boston | Hugh’s Vlog | #mfaNOW #mfaLateNites"
      }
    },
    "presentation": {
      "choice": {
        "name": [
          "Go to: ",
          {
            "@type": "code",
            "style": "font-family: inherit; font-weight: bold;",
            "textContent": "hugh.today/2016-09-17/live"
          },
          " for the full stream"
        ],
        "goto": {
          "on": "duration",
          "xlink:actuate": "onRequest",
          "xlink:href": "https://www.facebook.com/hugh.guiney/videos/10100195051457860/",
          "width": "70%",
          "height": "13%",
          "css:font-size": "calc(384 / 150 * 1vw)",
          "css:font-family": "'Noto Sans CJK JP', 'Noto Sans CJK', 'Noto Sans', sans-serif",
          "css:white-space": "nowrap",
          "css:overflow": "hidden",
          "animate": [
            {
              "startTime": "517.292107",
              "endTime": "518.872131",
              "startX": "14.9%",
              "startY": "-15%",
              "endX": "15%",
              "endY": "10%"
            },
            {
              "startTime": "523.373882",
              "endTime": "524.873404",
              "startX": "14.9%",
              "startY": "10%",
              "endX": "15%",
              "endY": "-15%"
            }
          ]
        }
      }
    }
  }
  </script>
</redblue-video>

Result

Non-interactive Fallback

If you want to provide a fallback video for cases where the user has JavaScript turned off, or the RedBlue player fails to load, you can specify the third-party embed code manually. Just include the embed as a child of redblue-video.

<redblue-video id="redblue-youtube-fallback" aspect-ratio="16:9">
  <hvml xmlns="https://hypervideo.tech/hvml#" hidden="hidden">
    <video>
      <!-- … -->
    </video>
  </hvml>
  <iframe
    src="//www.youtube.com/embed/nWdWq3hMwao?rel=0&amp;showinfo=0&amp;start=517&amp;end=527&amp;enablejsapi=1&amp;controls=1&amp;modestbranding=1&amp;playsinline=1&amp;fs=0&amp;origin=http%3A%2F%2Flocal.redblue.video"
    frameborder="0"
    allow="autoplay; encrypted-media"
    allowfullscreen="allowfullscreen"
  ></iframe>
</redblue-video>

If you wish to override RedBlue’s auto-generated embed code with your own even in the full-featured version, you can set the iframe’s slot attribute to player.

Detailed Instructions

Attaching a third-party embed

Import the RedBlue video player Custom Element. (This requires ES6 support to work directly in the browser; otherwise the source code can be transpiled to ES5.)

<script type="module">
  import RedBlueVideo from './modules/redblue-video-compat.js';
  customElements.define( RedBlueVideo.is, RedBlueVideo );
</script>

Include an HVML code block as a child of <redblue-video>. HVML can be represented as either XML or JSON-LD. When using the XML serialization, set the boolean hidden attribute to true to prevent the browser from rendering the metadata.

<redblue-video>
  <hvml xmlns="https://hypervideo.tech/hvml#" hidden="hidden"></hvml>
</redblue-video>

In the HVML, specify a single video element. (Not to be confused with HTML’s video element—though unless your page is served as XHTML, technically the browser will interpret it as such.) This is the container for all of your video’s metadata.

<redblue-video>
  <hvml xmlns="https://hypervideo.tech/hvml#" hidden="hidden">
    <video></video>
  </hvml>
</redblue-video>

Under video, include a showing with its scope set to release. This tells the HVML parser that the video has been shown to an audience (or will be), and that this showing represents its initial release. For movies shown in a theater, there may be more than one showing, such as at different film festivals, but for online videos, there is typically only one.

<redblue-video>
  <hvml xmlns="https://hypervideo.tech/hvml#" hidden="hidden">
    <video>
      <showing scope="release"></showing>
    </video>
  </hvml>
</redblue-video>

Under showing, include a venue with its type set to site. This tells the HVML parser where this showing takes place; in this case, a website.

<redblue-video>
  <hvml xmlns="https://hypervideo.tech/hvml#" hidden="hidden">
    <video>
      <showing scope="release">
        <venue type="site"></venue>
      </showing>
    </video>
  </hvml>
</redblue-video>

Under venue, include a uri with text matching the appropriate pattern for a third-party video link. The appropriate embed code will be automatically generated and inserted depending on the link pattern.

For YouTube videos, the pattern is //www.youtube.com/watch?v=.

For Vimeo videos, the pattern is //vimeo.com/.

<redblue-video>
  <hvml xmlns="https://hypervideo.tech/hvml#" hidden="hidden">
    <video>
      <showing scope="release">
        <venue type="site">
          <uri>https://www.youtube.com/watch?v=nWdWq3hMwao</uri>
        </venue>
      </showing>
    </video>
  </hvml>
</redblue-video>

Annotating

To add a “hotspot” link to a specific segment of the video, do this:

Under video, include a presentation element. This is the container for instructions telling the HVML parser how to present a video on playback.

<redblue-video>
  <hvml xmlns="https://hypervideo.tech/hvml#" hidden="hidden">
    <video>
      <showing scope="release">
        <venue type="site">
          <uri>https://www.youtube.com/watch?v=nWdWq3hMwao</uri>
        </venue>
      </showing>
      <presentation></presentation>
    </video>
  </hvml>
</redblue-video>

Under presentation, include a choice element for each hotspot you want to create.

<redblue-video>
  <hvml xmlns="https://hypervideo.tech/hvml#" hidden="hidden">
    <video>
      <showing scope="release">
        <venue type="site">
          <uri>https://www.youtube.com/watch?v=nWdWq3hMwao</uri>
        </venue>
      </showing>
      <presentation>
        <choice></choice>
      </presentation>
    </video>
  </hvml>
</redblue-video>

Under choice, include a name specifying the hotspot’s link text. In the XML serialization of HVML, This can directly include HTML markup. However, a tags are not supported, as the hotspot will be generated as an a tag itself in the final product.

<redblue-video>
  <hvml xmlns="https://hypervideo.tech/hvml#" hidden="hidden">
    <video>
      <showing scope="release">
        <venue type="site">
          <uri>https://www.youtube.com/watch?v=nWdWq3hMwao</uri>
        </venue>
      </showing>
      <presentation>
        <choice>
          <name>Go to: <code>hugh.today/2016-09-17/live</code> for the full stream</name>
        </choice>
      </presentation>
    </video>
  </hvml>
</redblue-video>

Under choice, include a goto, which specifies a hyperlink action to perform.

Set its on attribute to duration, which specifies that this hotspot is triggered by the viewer arriving at a specific duration range in the timeline.

Set its xlink:href attribute to the URL you wish to link to.

Set its xlink:actuate attribute to onRequest, which specifies that the link should be activated when clicked or tapped on, rather than automatically.

Since we are using XLink-namespaced attributes, define the XLink namespace on the root hvml element.

<redblue-video>
  <hvml xmlns="https://hypervideo.tech/hvml#" xmlns:xlink="http://www.w3.org/1999/xlink" hidden="hidden">
    <video>
      <showing scope="release">
        <venue type="site">
          <uri>https://www.youtube.com/watch?v=nWdWq3hMwao</uri>
        </venue>
      </showing>
      <presentation>
        <choice>
          <name>Go to: <code>hugh.today/2016-09-17/live</code> for the full stream</name>
          <goto on="duration" xlink:actuate="onRequest" xlink:href="https://www.facebook.com/hugh.guiney/videos/10100195051457860/"></goto>
        </choice>
      </presentation>
    </video>
  </hvml>
</redblue-video>

Under goto, include an animate element for every transition from one state to another that you want the hotspot to go through.

Set its startTime and endTime attributes to the video times in seconds you want the transition to start and end respectively.

Set its startX and endX attributes to the x-axis coordinates, specified as a percentage relative to the video container starting from the left, that you want the transition to start at and move to respectively.

Set its startY and endY attributes to the y-axis coordinates, specified as a percentage relative to the video container starting from the bottom, that you want the transition to start at and move to respectively.

<redblue-video>
  <hvml xmlns="https://hypervideo.tech/hvml#" xmlns:xlink="http://www.w3.org/1999/xlink" hidden="hidden">
    <video>
      <showing scope="release">
        <venue type="site">
          <uri>https://www.youtube.com/watch?v=nWdWq3hMwao</uri>
        </venue>
      </showing>
      <presentation>
        <choice>
          <name>Go to: <code>hugh.today/2016-09-17/live</code> for the full stream</name>
          <goto on="duration" xlink:actuate="onRequest" xlink:href="https://www.facebook.com/hugh.guiney/videos/10100195051457860/">
            <animate startTime="517.292107" endTime="518.872131" startX="14.9%" startY="-15%" endX="15%" endY="10%"></animate>
            <animate startTime="523.373882" endTime="524.873404" startX="14.9%" startY="10%" endX="15%" endY="-15%"></animate>
          </goto>
        </choice>
      </presentation>
    </video>
  </hvml>
</redblue-video>