Examples: Support more video examples in Safari.

examples/webgl_kinect.html

@@ -37,6 +37,11 @@
 		<script src="js/libs/stats.min.js"></script>
 		<script src="js/WebGL.js"></script>
 
+		<video id="video" loop muted crossOrigin="anonymous" webkit-playsinline style="display:none">
+			<source src="textures/kinect.webm" type='video/ogg; codecs="theora, vorbis"'>
+			<source src="textures/kinect.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+		</video>
+
 		<script id="vs" type="x-shader/x-vertex">
 
 			uniform sampler2D map;
@@ -101,8 +106,6 @@
 			var mouse, center;
 			var stats;
 
-			var video, texture;
-
 			if ( WEBGL.isWebGLAvailable() ) {
 
 				init();
@@ -134,10 +137,10 @@
 				center = new THREE.Vector3();
 				center.z = - 1000;
 
-				video = document.createElement( 'video' );
+				var video = document.getElementById( 'video' );
 				video.addEventListener( 'loadedmetadata', function () {
 
-					texture = new THREE.VideoTexture( video );
+					var texture = new THREE.VideoTexture( video );
 					texture.minFilter = THREE.NearestFilter;
 
 					var width = 640, height = 480;
@@ -190,11 +193,7 @@
 
 
 				}, false );
-				video.crossOrigin = 'anonymous';
-				video.loop = true;
-				video.muted = true;
-				video.src = 'textures/kinect.webm';
-				video.setAttribute( 'webkit-playsinline', 'webkit-playsinline' );
+
 				video.play();
 
 				renderer = new THREE.WebGLRenderer();

examples/webgl_video_panorama_equirectangular.html

@@ -31,8 +31,21 @@
 
 		<script src="../build/three.js"></script>
 
+		<script src="js/WebGL.js"></script>
+
+		<video id="video" loop muted crossOrigin="anonymous" webkit-playsinline style="display:none">
+			<source src="textures/pano.webm" type='video/ogg; codecs="theora, vorbis"'>
+			<source src="textures/pano.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+		</video>
+
 		<script>
 
+			if ( WEBGL.isWebGLAvailable() === false ) {
+
+				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
+
+			}
+
 			var camera, scene, renderer;
 
 			var isUserInteracting = false,
@@ -62,14 +75,7 @@
 				// invert the geometry on the x-axis so that all of the faces point inward
 				geometry.scale( - 1, 1, 1 );
 
-				var video = document.createElement( 'video' );
-				video.crossOrigin = 'anonymous';
-				video.width = 640;
-				video.height = 360;
-				video.loop = true;
-				video.muted = true;
-				video.src = 'textures/pano.webm';
-				video.setAttribute( 'webkit-playsinline', 'webkit-playsinline' );
+				var video = document.getElementById( 'video' );
 				video.play();
 
 				var texture = new THREE.VideoTexture( video );

examples/webvr_video.html

@@ -34,10 +34,14 @@
 
 		<script src="js/vr/WebVR.js"></script>
 
+		<video id="video" loop muted crossOrigin="anonymous" webkit-playsinline style="display:none">
+			<source src="textures/MaryOculus.webm" type='video/ogg; codecs="theora, vorbis"'>
+			<source src="textures/MaryOculus.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+		</video>
+
 		<script>
 
 			var camera, scene, renderer;
-			var video, texture;
 
 			init();
 			animate();
@@ -56,15 +60,10 @@
 
 				// video
 
-				video = document.createElement( 'video' );
-				video.crossOrigin = 'anonymous';
-				video.loop = true;
-				video.muted = true;
-				video.src = 'textures/MaryOculus.webm';
-				video.setAttribute( 'webkit-playsinline', 'webkit-playsinline' );
+				var video = document.getElementById( 'video' );
 				video.play();
 
-				texture = new THREE.Texture( video );
+				var texture = new THREE.Texture( video );
 				texture.generateMipmaps = false;
 				texture.minFilter = THREE.NearestFilter;
 				texture.maxFilter = THREE.NearestFilter;