Derivatives and Integrals: An Annotated Discourse

<section xml:id="section-video" label="section-video">
  <title>Video</title>
  <introduction>
    <p>
      First, a gratuitous reference to Exercise<nbsp /><xref ref="exercises-cosine-derivative" /> about the derivative of a cosine.
    </p>
    <p>
      You can specify a video by a filename if you host it as part of your document,
      or a <init>URL</init> giving a location on the Internet.
      There are a few extra features for YouTube and Vimeo videos,
      which are near the bottom of this page,
      so look there first if that meets your needs.
    </p>
  </introduction>
  <subsection>
    <title>Video Files</title>
    <p>
      Embedded videos can make sense for a web version of your document.
      This is a video promoting the University of Puget Sound to potential new students,
      in WebM format.
      Support is limited to HTML5-capable browsers.
      The file format can be MP4, Ogg,
      or WebM, though this may vary depending upon the browser.
      Use a <tag>video</tag> element,
      within either a <tag>figure</tag> (numbered,
      captioned) or a <tag>sidebyside</tag> for more precise control.
      The <attr>source</attr> attribute in this first example
      <em>does not</em> include an extension,
      and so three possibilities above will be searched for preferentially
      (you need only provide the video in one format,
      but providing additional versions will increase the chances every browser will find a compatible format).
    </p>
    <figure>
      <caption>University of Puget Sound Promotional Video</caption>
      <video label="ups-promo-frame-one" source="video/ups-visitor-guide-360" width="80%" preview="preview/ups-promo-frame-one.jpg" />
    </figure>
    <p>
      You can replace the
      <q>preview</q>
      image of a video with one of your own making.
      <init>HTML</init> refers to this as the <term>poster</term>,
      presumably because it advertises the video.
      The image you make should be of the same quality as the video,
      and with the same aspect-ratio,
      and is presumably one of the frames of the video.
      So a screenshot is the likely avenue.
      (Maybe we will have advice on how to do this easily, or see
      <url href="https://github.com/PreTeXtBook/pretext/issues/853" visual="github.com/PreTeXtBook/pretext/issues/853">Issue #853</url>
      .)
      <idx><h>link</h><h>external,
      url</h></idx> <idx><h>reference</h><h>external,
      url</h></idx> On the <tag>video</tag> tag,
      include a <attr>preview</attr> attribute which is the name of an image file,
      including a relative path. (JPEG or PNG formats are best.
      JPEG may be smaller for video screenshots,
      while PNG is lossless and so may work better for diagrams.) The next video has a preview/poster that is a fram part way into the introduction.
    </p>
    <figure>
      <caption>University of Puget Sound Promotional Video</caption>
      <video label="ups-promo-preview" source="video/ups-visitor-guide-360" width="80%" preview="preview/ups-promo-preview.jpg" />
    </figure>
    <p>
      If you find the posters provided automatically for a video to be distracting or objectionable,
      you can cover them up by requesting a generic poster with the attribute-value pair:
      <c>preview = "generic"</c>.
    </p>
    <figure>
      <caption>University of Puget Sound Promotional Video</caption>
      <video label="ups-promo-generic" source="video/ups-visitor-guide-360" width="80%" preview="generic" />
    </figure>
    <p>
      You can use a very similar construction to point to a video hosted somewhere on the Internet,
      just use a complete <init>URL</init> for the <tag>source</tag> attribute.
      Note that if the URL has a query string
      (parameters following a question-mark),
      then any ampersands (&amp;) will need to be escaped,
      so as to not confuse the <init>XML</init> processor
      (<ie /> use <c>&amp;amp</c>).
      Also, the question-mark character needs to <em>not</em>
      be <init>URL</init>-encoded (<c>%3F</c>), so presumably edit the <init>URL</init> to be the character.
      Here are several examples,
      the second one uses the <attr>start</attr> and <attr>stop</attr> attributes to limit the video to just the time between the 16-second and 30-second locations,
      and has asymmetric margins.
    </p>

    <figure>
      <caption>Big Buck Bunny from
      <url href="http://camendesign.com/code/video_for_everybody/test.htm" visual="camendesign.com/code/video_for_everybody/test.htm">
      <q>Video for Everybody</q>
      Test Page</url>
      </caption>
      <video label="big-buck-bunny-frame-one" href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" width="70%" preview="preview/big-buck-bunny-frame-one.jpg" />
    </figure>
    <figure>
      <caption>Big Buck Bunny, Controlled Start/End, Asymmetric Margins</caption>
      <video label="big-buck-bunny-margins" href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" start="16" end="30" margins="25% 5%" width="70%" preview="preview/big-buck-bunny-frame-one.jpg" />
    </figure>
    <figure>
      <caption>Big Buck Bunny, Ogg container, <c>*.ogv</c> extension</caption>
      <video label="big-buck-bunny-ogg" href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" width="60%" preview="preview/big-buck-bunny-frame-one.jpg" />
    </figure>
    <figure>
      <caption>Big Buck Bunny, MP4 format</caption>
      <video label="big-buck-bunny-mp4" href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" width="50%" preview="preview/big-buck-bunny-frame-one.jpg" />
    </figure>
    <figure>
      <caption>Big Buck Bunny, WebM format</caption>
      <video label="big-buck-bunny-webm" href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" width="40%" preview="preview/big-buck-bunny-frame-one.jpg" />
    </figure>
    <figure>
      <caption>Big Buck Bunny, Automatic best format (temporarily broken)</caption>
      <video label="big-buck-bunny-best-format" href="http://clips.vorwaerts-gmbh.de/big_buck_bunny" width="30%" preview="preview/big-buck-bunny-frame-one.jpg" />
    </figure>

    <p>
      Videos are assumed to have a 16:9 aspect ratio
      (width:height).
      If this is not the case,
      then you must specify the aspect ratio with either a ratio (e.g. 4:3) or as a number expressing the fraction width/height (e.g. 1.3333).
      Four decimal places should suffice for the latter.
      Note that you cannot <em>change</em> the aspect ratio,
      and you <em>must</em> supply the aspect ratio for any video that does not have the default ratio.
      This is a technical requirement that allows us to smoothly scale the videos on small devices
      (try this page on your mobile phone!).
    </p>
  </subsection>
  <subsection>
    <title>YouTube</title>
    <p>
      YouTube
          <idx><h>YouTube videos</h></idx>
          <idx><h>videos</h><h>YouTube</h></idx>
      videos may be embedded with only knowledge of a video's
      <q>ID</q>
      or a
      <q>playlist ID</q>. A single video's YouTube ID is a string of eleven seemingly random characters that show up in the URL when you watch a video.
      For the Led Zeppelin performance below,
      the ID is <c>hAzdgU_kpGo</c>,
      which you might normally watch directly from the URL <url href="https://www.youtube.com/watch?v=hAzdgU_kpGo" visual="www.youtube.com/watch?v=hAzdgU_kpGo" />.
      As described just above,
      you need to specify a different aspect ratio if the video does not have a 16:9 aspect ratio.
    </p>
    <p>
      Note: some of these videos may not play if viewed locally,
      and maybe not even if you start up a local web server
      (such as can be easily done with Python).
      So if you are testing new features,
      be careful about assuming videos from cloud services are not working properly.
    </p>
    <p>
      If you have ever owned a drone,
      you sympathize with this guy.
      Way funnier than a cat video.
    </p>
    <figure>
      <title>My first day with my drone</title>
      <caption>First Drone Flight (1:28)</caption>
      <video xml:id="drone-flight-full" youtube="VsHMjWORFvI" />
    </figure>
    <p>
      If you are only interested in a piece of the action,
      you can limit the video with <c>start</c> and <c>end</c> attributes in seconds.
      You might make those times clear in the caption for readers getting the link out of a PDF. Some videos may not respect these parameters.
    </p>
    <figure>
      <title>My first day with my drone (Splashdown)</title>
      <caption>First Drone Flight (Splashdown, 0:54 to 1:12)</caption>
      <video xml:id="drone-flight-clip" youtube="VsHMjWORFvI" width="50%" start="54" end="72" />
    </figure>
    <p>
      This next video comes with a default poster from YouTube featuring Robert Plant.
      We've replaced it with a poster featuring Jimmy Page.
    </p>
    <figure>
      <title>Kashmir (Live), Led Zeppelin</title>
      <caption>Kashmir (Live), Led Zeppelin. O2 Arena, London. December 10, 2007. (8:55)</caption>
      <idx><h>Led Zeppelin video</h></idx>
      <video xml:id="led-zeppelin-kashmir" youtube="hAzdgU_kpGo" width="70%" preview="preview/jimmy-page.jpg" />
    </figure>
    <p>
      And if you don't want to be reminded of Plant, Page, Bonham,
      or Jones,
      you can cover them up entirely.
    </p>
    <figure>
      <title>Kashmir (Live), Led Zeppelin</title>
      <caption>Kashmir (Live), Led Zeppelin. O2 Arena, London. December 10, 2007. (8:55)</caption>
      <idx><h>Led Zeppelin video</h></idx>
      <video xml:id="led-zeppelin-kashmir-generic" youtube="hAzdgU_kpGo" width="50%" preview="generic" />
    </figure>
    <p>
      Videos were first designed mostly on the assumption that they are wrapped in a <c>figure</c> with a <c>title</c> (which is distinct from a <c>caption</c>).
      But you can just place a video
      <q>naked</q>
      inbetween a couple of paragraphs.
      This is nice if you don't want the clutter of numbers,
      and/or if you plan to exclude videos from some edition of your document.
    </p>
    <video xml:id="led-zeppelin-kashmir-solo" youtube="hAzdgU_kpGo" width="50%" preview="preview/jimmy-page.jpg" />
    <p>
      We can pack two videos side-by-side,
      with a lot of horizontal control,
      using two panels in the <c>sidebyside</c> element.
      We have simply chosen here to not provide a caption (overall,
      or separately) as an illustration.
      The sizes are purposely a bit odd.
      See <xref ref="section-side-by-side" text="type-global" /> for much more on side-by-side panels.
      These videos come from the
      <q>Topic</q>
      and
      <q>VEVO</q>
      areas of YouTube (respectively) and both have start/end times.
    </p>
    <sidebyside margins="auto" widths="20% 40%" valign="middle">

      <video xml:id="minelli-newyork-newyork" youtube="5-pyc_z7WbY" start="16" end="35" />

      <video xml:id="bareilles-love-song" youtube="qi7Yh16dA0w" start="60" end="120" />
    </sidebyside>
    <p>
      These next two videos are evenly spaced,
      one from YouTube, one from a source file hosted by the author.
      Now with separate captions, but identical margins
      (through very different choices of layout parameters than in the preceding pair of videos).
    </p>
    <sidebyside margins="10%" widths="35% 35%">

      <figure>
        <caption>Drone Flight</caption>
        <video xml:id="drone-flight-sbs" youtube="VsHMjWORFvI" />
      </figure>

      <figure>
        <caption>UPS Promo</caption>
        <video xml:id="ups-promo-sbs" source="video/ups-visitor-guide-360" preview="preview/ups-promo-frame-one.jpg" />
      </figure>
    </sidebyside>
    <p>
      A YouTube
      <q>playlist</q>
      can be built in one of two ways.
      You may specify the <c>youtube</c> attribute to be a space-separated list of several video IDs.
      Alternatively,
      you may set the <c>youtubeplaylist</c> attribute to a YouTube playlist ID.
    </p>
    <sidebyside margins="0%" widths="47% 47%">
      <figure>
        <caption>Individual IDs specified in an
        <q>itemized</q>
        playlist</caption>
        <video xml:id="zeppelin-playlist" youtube="6tlSx0jkuLM FeJkDewhTEw" />

      </figure>
      <figure>
        <caption>YouTube playlist ID specified in a
        <q>named</q>
        playlist</caption>
        <video label="zeppelin-playlist-named" youtubeplaylist="PLGRecdYLYDNdX5NEkS3KH-ZtCqc2f8lJ_" />

      </figure>
    </sidebyside>
    <p>
      We test three equally-wide YouTube videos in a <tag>sidebyside</tag> with a few variations.
    </p>
    <sidebyside margins="0%" width="30%">
      <figure>
        <caption>Medium Length</caption>
        <video xml:id="pre-roll-countdown-1" youtube="Srmdij0CU1U" />
      </figure>
      <figure>
        <caption>Short</caption>
        <video xml:id="pre-roll-countdown-2" youtube="Srmdij0CU1U" start="2" end="4" />
      </figure>
      <figure>
        <caption>A Really Long Caption That Will Wrap onto a New Line</caption>
        <video xml:id="pre-roll-countdown-3" youtube="Srmdij0CU1U" />
      </figure>
    </sidebyside>
    <p>
      We test three equally-wide YouTube videos in a <tag>sidebyside</tag> with a few variations,
      and now contained in a <tag>figure</tag>.
    </p>
    <figure>
      <caption>Author-Hosted videos as Sub-Figures</caption>
      <sidebyside margins="0%" width="30%">
        <figure>
          <caption>Medium Length</caption>
          <video xml:id="pre-roll-countdown-4" youtube="Srmdij0CU1U" />
        </figure>
        <figure>
          <caption>Short</caption>
          <video xml:id="pre-roll-countdown-5" youtube="Srmdij0CU1U" start="2" end="4" />
        </figure>
        <figure>
          <caption>A Really Long Caption That Will Wrap onto a New Line</caption>
          <video xml:id="pre-roll-countdown-6" youtube="Srmdij0CU1U" />
        </figure>
      </sidebyside>
    </figure>
    <p>
      We test three equally-wide author-hosted videos in a <tag>sidebyside</tag> with a few variations.
    </p>
    <sidebyside margins="0%" width="30%">
      <figure>
        <caption>Medium Length</caption>
        <video xml:id="ups-promo-1" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
      </figure>
      <figure>
        <caption>Short</caption>
        <video xml:id="ups-promo-2" source="video/ups-visitor-guide-360" start="4" end="10" preview="preview/ups-promo-preview.jpg" />
      </figure>
      <figure>
        <caption>A Really Long Caption That Will Wrap onto a New Line</caption>
        <video xml:id="ups-promo-3" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
      </figure>
    </sidebyside>
    <p>
      We test three equally-wide author-hosted videos in a <tag>sidebyside</tag> with a few variations,
      and now contained in a <tag>figure</tag>.
    </p>
    <figure>
      <caption>YouTube videos as Sub-Figures</caption>
      <sidebyside margins="0%" width="30%">
        <figure>
          <caption>Medium Length</caption>
          <video xml:id="ups-promo-4" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
        </figure>
        <figure>
          <caption>Short</caption>
          <video xml:id="ups-promo-5" source="video/ups-visitor-guide-360" start="4" end="10" preview="preview/ups-promo-preview.jpg" />
        </figure>
        <figure>
          <caption>A Really Long Caption That Will Wrap onto a New Line</caption>
          <video xml:id="ups-promo-6" source="video/ups-visitor-guide-360" preview="preview/ups-promo-preview.jpg" />
        </figure>
      </sidebyside>
    </figure>
  </subsection>
  <subsection>
    <title>Vimeo</title>
    <p>
      We support videos from
      <url href="https://vimeo.com/" visual="vimeo.com">Vimeo</url>
      in much the same way as YouTube videos.
      Now the identifier is a long integer.
      For example,
      the video up next would normally be found at <c>https://vimeo.com/27246366</c>.
      But instead,
      you can embed the video with as little as <c>&lt;video vimeo="27246366"/&gt;</c>.
      As of 2019-05-18, we intend to support as many of the options described above as possible.
      Widths and heights
      (via the aspect ratio)
      will perform as expected.
      We have not investigated start and end times.
    </p>
    <figure>
      <caption><articletitle>MOVE</articletitle>, by
      <url href="https://vimeo.com/rickmereki" visual="vimeo.com/rickmereki">Rick Mereki</url>,
      <c>vimeo.com/rickmereki</c></caption>
      <video xml:id="vimeo-move" vimeo="27246366" width="80%" preview="preview/vimeo-move.jpg" />
    </figure>
    <p>
      Now with an author-supplied poster.
    </p>
    <figure>
      <caption><articletitle>MOVE</articletitle>, by
      <url href="https://vimeo.com/rickmereki" visual="vimeo.com/rickmereki">Rick Mereki</url>,
      <c>vimeo.com/rickmereki</c></caption>


      <video vimeo="27246366" width="80%" preview="preview/move.png" />
    </figure>
  </subsection>
  <subsection>
    <title>Captions and Subtitles</title>
    <p>
      Experimental support for captions and subtitles first.
      Look at the source,
      which mimics the actual HTML. The words of the titles and/or subcaptions
      (there is a difference!)
      come from a file in
      <url href="https://en.wikipedia.org/wiki/WebVTT" visual="wikipedia.org/wiki/WebVTT">Web Video Text Tracks</url>
      (<init>WEBVVT</init>) format.
    </p>
    <figure>
      <caption>Big Buck Bunny with subtitles adapted from <url href="https://sites.google.com/site/chrisfoo/subtitles" visual="https://sites.google.com/site/chrisfoo/subtitles" /></caption>
      <video label="big-buck-bunny-subtitles" href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" width="75%" preview="preview/big-buck-bunny-frame-one.jpg">
      <track kind="subtitles" listing="US English" xml:lang="en" source="video/BigBuckBunnyAcapella.vtt" />
      </video>
    </figure>
    <p>
      This video is identical to the previous one,
      except it tests the use of a default <tag>track</tag>.
      The <attr>default</attr> attribute on <tag>track</tag> can be set to the value <c>yes</c> to make one set of captions the default
      (and only one!).
      Test is a bit lame, the two <tag>track</tag> use the same file,
      but just have different labels for the player's menu.
      Track named <c>US English Two</c> will show as in-use at start-up.
    </p>
    <video label="big-buck-bunny-two-subtitles" href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" width="75%" preview="preview/big-buck-bunny-frame-one.jpg">
    <track kind="subtitles" listing="US English One" xml:lang="en" source="video/BigBuckBunnyAcapella.vtt" />
    <track kind="subtitles" listing="US English Two" xml:lang="en" source="video/BigBuckBunnyAcapella.vtt" default="yes" />
    </video>
  </subsection>
</section>