Replaced text with play icon.

index.html

@@ -17,10 +17,19 @@ <h1 class="title">Error</h1>
       </div>
     </div>
 
+    <div id="play-overlay">
+      <img src="images/ic_play_arrow_white_24dp.svg"/>
+    </div>
+
     <a id="watermark" href="http://g.co/vr/view" target="_blank">
       <img src="images/ic_info_outline_black_24dp.svg"/>
     </a>
 
+    <script>
+WebVRConfig = {
+  BUFFER_SCALE: 1.0
+};
+    </script>
     <script src="build/vrview.js"></script>
 	</body>
 </html>

src/main.js

@@ -94,26 +94,33 @@ function onSceneLoad(scene) {
     renderer.on('load', onPreviewLoad);
     renderer.setPhotosphere(scene.preview, params);
   } else if (scene.video) {
-    if (Util.isIOS() || Util.isIE11()) {
+    if (Util.isIE11()) {
       // On iOS and IE 11, if an 'image' param is provided, load it instead of
       // showing an error.
       //
       // TODO(smus): Once video textures are supported, remove this fallback.
       if (scene.image) {
         loadImage(scene.image, params);
       } else {
-        showError('Video is not supported on this platform (iOS or IE11).');
+        showError('Video is not supported on IE11.');
       }
     } else {
       // Load the video element.
       videoElement = document.createElement('video');
-      videoElement.src = scene.video;
       videoElement.loop = true;
+      videoElement.src = scene.video;
       videoElement.setAttribute('crossorigin', 'anonymous');
       videoElement.addEventListener('canplaythrough', onVideoLoad);
       videoElement.addEventListener('error', onVideoError);
+      videoElement.load();
+
+      if (!Util.isMobile()) {
+        videoElement.play();
+        renderer.set360Video(videoElement, params);
+      }
 
       videoProxy = new VideoProxy(videoElement);
+      // Debug only.
       window.videoProxy = videoProxy;
     }
   } else if (scene.image) {
@@ -125,21 +132,18 @@ function onSceneLoad(scene) {
 }
 
 function onVideoLoad() {
+  console.log('onVideoLoad');
   // Render the stereo video.
   var params = {
     isStereo: loadedScene.isStereo,
   }
-  renderer.set360Video(videoElement, params);
+  loadIndicator.hide();
 
   // On mobile, tell the user they need to tap to start. Otherwise, autoplay.
-  if (!Util.isMobile()) {
-    // Hide loading indicator.
-    loadIndicator.hide();
-    // Autoplay the video on desktop.
-    videoProxy.play();
-  } else {
+  if (Util.isMobile()) {
     // Tell user to tap to start.
-    showError('Tap to start video', 'Play');
+    renderer.set360Video(videoElement, params);
+    showPlayButton();
     document.body.addEventListener('touchend', onVideoTap);
   }
 
@@ -148,8 +152,8 @@ function onVideoLoad() {
 }
 
 function onVideoTap() {
-  hideError();
   videoProxy.play();
+  hidePlayButton();
 
   // Prevent multiple play() calls on the video element.
   document.body.removeEventListener('touchend', onVideoTap);
@@ -190,6 +194,16 @@ function hideError() {
   error.classList.remove('visible');
 }
 
+function showPlayButton() {
+  var playButton = document.querySelector('#play-overlay');
+  playButton.classList.add('visible');
+}
+
+function hidePlayButton() {
+  var playButton = document.querySelector('#play-overlay');
+  playButton.classList.remove('visible');
+}
+
 function showStats() {
   stats.setMode(0); // 0: fps, 1: ms
 

style.css

@@ -84,3 +84,25 @@ canvas {
 canvas:active {
   cursor: -webkit-grabbing;
 }
+
+#play-overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  display: none;
+	align-items: center;
+  justify-content: center;
+}
+#play-overlay.visible {
+	display: flex;
+}
+#play-overlay img {
+  width: 30%;
+  height: 30%;
+}