Fixed bad check for supported video types to display video element, added video example to example site

8 files changed, 73 insertions, 7 deletions

diff --git a/exampleSite/content/customproject/video.md b/exampleSite/content/customproject/video.md
new file mode 100644
index 0000000..a636faa
--- /dev/null
+++ b/exampleSite/content/customproject/video.md
@@ -0,0 +1,33 @@
++++
+title = "Video"
+weight = -1
+categories = [ "video" ]
+tags = [ "such move", "very html5", "much animation", "wow" ]
+video_mp4 = "/vid/vid_480x320.mp4"
+video_webm = "/vid/vid_480x320.webm"
+video_ogv = "/vid/vid_480x320.ogv"
+video_3gp = "/vid/vid_352x288.3gp"
+video_fallback = "/img/car.jpg"
++++
+
+Videos can be provided via:
+
+```
+video_mp4 = "/vid/vid_480x320.mp4"
+video_webm = "/vid/vid_480x320.webm"
+video_ogv = "/vid/vid_480x320.ogv"
+video_3gp = "/vid/vid_352x288.3gp"
+video_fallback = "/img/car.jpg"
+```
+
+Each value is optional. If the fallback image is provided, it will be used
+as both the poster of the video and the fallback if the browser does not
+support HTML5 video.
+
+You can use the partial for a video via:
+
+```
+.Scratch.Set "class" "some extra CSS classes on video tag"
+{{ partial "extra/video.html" . }}
+```
+
diff --git a/exampleSite/content/project/video.md b/exampleSite/content/project/video.md
new file mode 100644
index 0000000..a636faa
--- /dev/null
+++ b/exampleSite/content/project/video.md
@@ -0,0 +1,33 @@
++++
+title = "Video"
+weight = -1
+categories = [ "video" ]
+tags = [ "such move", "very html5", "much animation", "wow" ]
+video_mp4 = "/vid/vid_480x320.mp4"
+video_webm = "/vid/vid_480x320.webm"
+video_ogv = "/vid/vid_480x320.ogv"
+video_3gp = "/vid/vid_352x288.3gp"
+video_fallback = "/img/car.jpg"
++++
+
+Videos can be provided via:
+
+```
+video_mp4 = "/vid/vid_480x320.mp4"
+video_webm = "/vid/vid_480x320.webm"
+video_ogv = "/vid/vid_480x320.ogv"
+video_3gp = "/vid/vid_352x288.3gp"
+video_fallback = "/img/car.jpg"
+```
+
+Each value is optional. If the fallback image is provided, it will be used
+as both the poster of the video and the fallback if the browser does not
+support HTML5 video.
+
+You can use the partial for a video via:
+
+```
+.Scratch.Set "class" "some extra CSS classes on video tag"
+{{ partial "extra/video.html" . }}
+```
+
diff --git a/exampleSite/static/vid/vid_352x288.3gp b/exampleSite/static/vid/vid_352x288.3gp
new file mode 100644
index 0000000..aa24ce8
--- /dev/null
+++ b/exampleSite/static/vid/vid_352x288.3gp
diff --git a/exampleSite/static/vid/vid_480x320.mp4 b/exampleSite/static/vid/vid_480x320.mp4
new file mode 100644
index 0000000..7084c3c
--- /dev/null
+++ b/exampleSite/static/vid/vid_480x320.mp4
diff --git a/exampleSite/static/vid/vid_480x320.ogv b/exampleSite/static/vid/vid_480x320.ogv
new file mode 100644
index 0000000..9235e58
--- /dev/null
+++ b/exampleSite/static/vid/vid_480x320.ogv
diff --git a/exampleSite/static/vid/vid_480x320.webm b/exampleSite/static/vid/vid_480x320.webm
new file mode 100644
index 0000000..82698d7
--- /dev/null
+++ b/exampleSite/static/vid/vid_480x320.webm
diff --git a/layouts/partials/extra/video.html b/layouts/partials/extra/video.html
index 756851b..75629f2 100644
--- a/layouts/partials/extra/video.html
+++ b/layouts/partials/extra/video.html
@@ -1,17 +1,17 @@
-<video preload="auto" autoplay loop muted {{ with .Params.video_preview_fallback }}poster="{{ . }}"{{ end }} class="{{ .Scratch.Get "class" }}">
-    {{ with .Params.video_preview_webm }}
+<video preload="auto" autoplay loop muted {{ with .Params.video_fallback }}poster="{{ . }}"{{ end }} class="{{ .Scratch.Get "class" }}">
+    {{ with .Params.video_webm }}
         <source src="{{ . }}" type='video/webm; codecs="vp8.0, vorbis"'>
     {{ end }}
-    {{ with .Params.video_preview_ogv }}
+    {{ with .Params.video_ogv }}
         <source src="{{ . }}" type='video/ogg; codecs="theora, vorbis"'>
     {{ end }}
-    {{ with .Params.video_preview_mp4 }}
+    {{ with .Params.video_mp4 }}
         <source src="{{ . }}" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
     {{ end }}
-    {{ with .Params.video_preview_3gp }}
+    {{ with .Params.video_3gp }}
         <source src="{{ . }}" type='video/3gp'>
     {{ end }}
-    {{ with .Params.video_preview_fallback }}
+    {{ with .Params.video_fallback }}
         <img src="{{ . }}">
     {{ end }}
 </video>
diff --git a/layouts/partials/project/item.html b/layouts/partials/project/item.html
index c4747a7..c63152b 100644
--- a/layouts/partials/project/item.html
+++ b/layouts/partials/project/item.html
@@ -16,7 +16,7 @@
             <a href="{{ $link }}">
                 <div class="project-container rounded-corners z-depth-1">
                     <div class="project-container-image rounded-corners-top">
-                        {{ if or (isset .Params "video_preview_mp4") (isset .Params "video_preview_ogv") }}
+                        {{ if or (or (isset .Params "video_mp4") (isset .Params "video_ogv")) (or (isset .Params "video_webm") (isset .Params "video_3gp")) }}
                             {{ .Scratch.Set "class" "rounded-corners-top fill-container-width" }}
                             {{ partial "extra/video.html" . }}
                         {{ else }}