automatically set playsinline on videos in a-assets (fixes #1906)

Author: ngokevin

src/core/a-assets.js

@@ -38,7 +38,7 @@ module.exports = registerElement('a-assets', {
         // Wait for <img>s.
         imgEls = this.querySelectorAll('img');
         for (i = 0; i < imgEls.length; i++) {
-          imgEl = setCrossOrigin(imgEls[i]);
+          imgEl = fixUpMediaElement(imgEls[i]);
           loaded.push(new Promise(function (resolve, reject) {
             imgEl.onload = resolve;
             imgEl.onerror = reject;
@@ -48,7 +48,7 @@ module.exports = registerElement('a-assets', {
         // Wait for <audio>s and <video>s.
         mediaEls = this.querySelectorAll('audio, video');
         for (i = 0; i < mediaEls.length; i++) {
-          mediaEl = setCrossOrigin(mediaEls[i]);
+          mediaEl = fixUpMediaElement(mediaEls[i]);
           loaded.push(mediaElementLoaded(mediaEl));
         }
 
@@ -159,6 +159,27 @@ function mediaElementLoaded (el) {
   });
 }
 
+/**
+ * Automatically add attributes to media elements where convenient.
+ * crossorigin, playsinline.
+ */
+function fixUpMediaElement (mediaEl) {
+  // Cross-origin.
+  var newMediaEl = setCrossOrigin(mediaEl);
+
+  // Plays inline for mobile.
+  if (newMediaEl.tagName === 'VIDEO') {
+    newMediaEl.setAttribute('playsinline', '');
+    newMediaEl.setAttribute('webkit-playsinline', '');
+  }
+
+  if (newMediaEl !== mediaEl) {
+    mediaEl.parentNode.appendChild(newMediaEl);
+    mediaEl.parentNode.removeChild(mediaEl);
+  }
+  return newMediaEl;
+}
+
 /**
  * Automatically set `crossorigin` if not defined on the media element.
  * If it is not defined, we must create and re-append a new media element <img> and
@@ -188,8 +209,6 @@ function setCrossOrigin (mediaEl) {
        'A-Frame will re-request the asset with `crossorigin` attribute set.', src);
   mediaEl.crossOrigin = 'anonymous';
   newMediaEl = mediaEl.cloneNode(true);
-  mediaEl.parentNode.appendChild(newMediaEl);
-  mediaEl.parentNode.removeChild(mediaEl);
   return newMediaEl;
 }
 

tests/core/a-assets.test.js

@@ -104,7 +104,7 @@ suite('a-assets', function () {
     document.body.appendChild(scene);
   });
 
-  suite('crossorigin', function () {
+  suite('fixUpMediaElement', function () {
     test('recreates media elements with crossorigin if necessary', function (done) {
       var el = this.el;
       var scene = this.scene;
@@ -181,6 +181,23 @@ suite('a-assets', function () {
 
       document.body.appendChild(scene);
     });
+
+    test('sets playsinline', function (done) {
+      var el = this.el;
+      var scene = this.scene;
+      var video = document.createElement('video');
+
+      video.setAttribute('id', 'test');
+      video.setAttribute('src', 'dummy.mp4');
+      el.setAttribute('timeout', 10);
+      el.appendChild(video);
+      scene.addEventListener('loaded', function () {
+        assert.ok(video.hasAttribute('webkit-playsinline'));
+        assert.ok(video.hasAttribute('playsinline'));
+        done();
+      });
+      document.body.appendChild(scene);
+    });
   });
 });