Video player - Add support for local video / HTML player (#513)

* Add support for local video playback

* Updated CSS as HTML player is block level, unlike iframe from Youtube or Vimeo

* Updated local docs

* Compiled artefacts

* Version bump to v14.3.1

* Updated package lock following clean install

* Compiled artefacts

Author: edwardcasbon

dist/honeycomb.app.css

@@ -1471,9 +1471,10 @@ <h1>Honeycomb web toolkit class name cheatsheet</h1>
                     </ul>
                     <li>.js-video-container</li>
 
-                    
+                    <ul>
+                        <li>.js-video-container--html-player</li>
 
-                    
+                    </ul>
                     <li>.label</li>
 
                     <ul>
@@ -2887,9 +2888,10 @@ <h1>Honeycomb web toolkit class name cheatsheet</h1>
                     </ul>
                     <li>.video-container</li>
 
-                    
+                    <ul>
+                        <li>.video-container--html-player</li>
 
-                    
+                    </ul>
                     <li>.visually-hidden</li>
 
 

dist/honeycomb.css

@@ -562,7 +562,6 @@ var colours = ['204, 0, 0',
 // Yellow
 '118, 118, 118' // Grey
 ];
-
 var init = function init() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var charts = document.querySelectorAll('.js-chart');
@@ -6995,7 +6994,6 @@ var init = function init() {
     }
   }
 };
-
 var _default = exports["default"] = {
   init: init
 };
@@ -8186,7 +8184,6 @@ var notification = function notification(options) {
       // Could be either 'font' or 'image'.
       src: false // Reference to the icon.
     },
-
     content: '',
     duration: false,
     container: window.jQuery('body')
@@ -9154,7 +9151,7 @@ var loadPlayerAPIs = function loadPlayerAPIs() {
     if (videoId) {
       // If video is already loaded, skip.
       // We look for the iframe for the specific video, because in React we may be reusing an old VideoPlayer component.
-      if (videoContainer.querySelector("iframe[id^=\"".concat(videoId, "\"]"))) {
+      if (videoContainer.querySelector("iframe[id^=\"".concat(videoId, "\"], video"))) {
         continue;
       }
       if (isVimeoId(videoId)) {
@@ -9210,6 +9207,16 @@ var isVimeoId = function isVimeoId(id) {
   }
   return !!id.match(/^[0-9]*$/);
 };
+var isLocalVideoId = function isLocalVideoId(id) {
+  var extensions = ['mp4', 'webm'];
+  var isLocalVideo = false;
+  extensions.forEach(function (ext) {
+    if (id.match(".".concat(ext)) !== null) {
+      isLocalVideo = true;
+    }
+  });
+  return isLocalVideo;
+};
 
 // calculate second values for 10%, 20% etc. for event tracking
 var calculatePercentages = function calculatePercentages(duration) {
@@ -9300,6 +9307,31 @@ var attachVimeoPlayerEventListeners = function attachVimeoPlayerEventListeners(p
     handlePlayEvent(videoId, data.duration);
   });
 };
+var addHtmlVideoPlayer = function addHtmlVideoPlayer(src, options, element) {
+  // Clear the contents of the target element.
+  while (element.firstChild) {
+    element.removeChild(element.firstChild);
+  }
+  var videoPlayer = document.createElement('video');
+  videoPlayer.setAttribute('src', src);
+
+  // Autoplay.
+  if (options.autoplay) {
+    videoPlayer.muted = true;
+    videoPlayer.autoplay = true;
+  }
+
+  // Controls.
+  if (options.controls) {
+    videoPlayer.controls = true;
+  }
+
+  // Loop.
+  if (options.loop) {
+    videoPlayer.loop = true;
+  }
+  element.appendChild(videoPlayer);
+};
 
 // Search the document for video containers, 
 // and load any video players that need loading. 
@@ -9318,7 +9350,6 @@ var addInlineVideos = function addInlineVideos() {
       if (videoContainer.querySelector("iframe[id^=\"".concat(videoId, "\"]"))) {
         return 1; // continue
       }
-
       var duration;
       var currentTime;
       var percentages;
@@ -9420,6 +9451,9 @@ var addInlineVideos = function addInlineVideos() {
             // add event listeners 
             attachVimeoPlayerEventListeners(player, videoId, goalTracked);
           }
+        } else if (isLocalVideoId(videoId)) {
+          videoContainer.classList.add('video-container--html-player');
+          addHtmlVideoPlayer(videoId, _options, videoDiv.parentElement);
         } else {
           // load youtube player
           if (window.YT && typeof window.YT.Player === 'function') {

dist/honeycomb.css.cheatsheet.html

@@ -14,9 +14,17 @@ <h1 class="section-heading--style-guide">Video embedding</h1>
             <p>Embed YouTube videos on the page, either inline or as background elements.</p>
             <p>Note: If you want to play the video in a <a href="/style-guide/js-library/lightbox.htm" class="js-scroll-to">lightbox</a>, use the <a href="/style-guide/js-library/lightbox.htm" class="js-scroll-to">lightbox</a> functionality.</p>
 
-
-            <h2 class="section-heading--style-guide">Example inline embed</h2>
-            <div class="js-video-container video-container" data-video-id="Zz8bdsPn01Q" data-video-controls="1"></div>
+            <div class="grid">
+                <h2 class="section-heading--style-guide">Example inline embed</h2>
+                <div class="grid__col grid__col--span-6-of-12 padded--tight">
+                    <h3>Native/HTML video player</h3>
+                    <div class="js-video-container video-container" data-video-id="https://www.red-gate.com/assets/products/test-data-manager/images/ui-demo.mp4" data-video-controls="true" data-video-auto-play="true" data-video-loop="true"></div>                      
+                </div>
+                <div class="grid__col grid__col--span-6-of-12 padded--tight">
+                    <h3>Youtube video</h3>
+                    <div class="js-video-container video-container" data-video-id="Zz8bdsPn01Q" data-video-controls="1"></div>
+                </div>
+            </div>
 
             <h2 class="section-heading--style-guide">Example background video</h2>
             <p>{Killed the autoplay example}</p>