An example of using elm-d3 to embed a video.

Video.elm

-- This is how you embed a video in your Elm program using elm-d3. From the
-- root directory of the elm-d3 project, compile it using something like the
-- following command:
--
--   elm --make --src-dir=src `./scripts/build-flags` /path/to/Video.elm
--
-- Of course, replace /path/to/Video.elm with the path to this module.
--
module Video where

-- Import D3 and dump all its names into the current scope. You'll also need to
-- import the Json module in order to set properties of the <video> element.
--
import D3(..)
import Json

-- When you render video, it will create a <video> element, set its "src"
-- attribute to a test video, and enabled controls on the video. This Selection
-- makes no assumptions about the data bound to it, so you can use it with any
-- model.
--
-- Note that if you do use this in context where model is being updated because
-- its source is a signal, this view will repeatedly append video elements to
-- the page. To avoid this behavior use static_video.
--
video : Selection a
video =
  append "video"
  |. str attr "src" "http://v2v.cc/~j/theora_testsuite/320x240.ogg"
  |. property "controls" (\ _ _ -> Json.Boolean True)

-- This is exactly the same as video above, except that on model updates it
-- will not append new <video> elements. It'll just append one <video> element
-- initially and then no more.
--
static_video : Selection a
static_video =
  static "video"
  |. str attr "src" "http://v2v.cc/~j/theora_testsuite/320x240.ogg"
  |. property "controls" (\ _ _ -> Json.Boolean True)

-- This is a rendered video Element. In theory, you should be able to compose
-- this with other Elm Elements, but I've never tried that out. I'm pretty sure
-- that won't work without a bit of tweaking to the renderer, but who knows?
-- Try it out!
--
videoElement : Element
videoElement = render 320 240 video ()

-- TV killed the radio star.
--
main : Element
main = videoElement