From 0e7d3765783221a0c70afc26111e23834a05aa77 Mon Sep 17 00:00:00 2001
From: Thijs Triemstra <info@collab.nl>
Date: Sun, 13 Jan 2019 17:34:22 +0100
Subject: [PATCH] add safari audio workarounds in examples

---
 examples/enumerate-devices.html             | 161 +++++++++++---------
 examples/plugins/audio-only-lamejs.html     |  71 ++++++---
 examples/plugins/audio-only-mp3.html        |  69 ++++++---
 examples/plugins/audio-only-ogg.html        |  69 +++++----
 examples/plugins/audio-only-opus.html       |  71 ++++++---
 examples/plugins/audio-only-recorderjs.html |  72 ++++++---
 examples/plugins/video-only-ebml.html       |   2 +
 examples/upload/fine-uploader.html          |  76 +++++----
 examples/upload/jquery.fileupload.html      |  99 +++++++-----
 examples/upload/websocket.html              | 129 +++++++++-------
 10 files changed, 506 insertions(+), 313 deletions(-)

diff --git a/examples/enumerate-devices.html b/examples/enumerate-devices.html
index 553eb27f..b32ffd33 100644
--- a/examples/enumerate-devices.html
+++ b/examples/enumerate-devices.html
@@ -24,6 +24,10 @@
   #myAudio {
       background-color: #8EDBE6;
   }
+
+  #enumBtn {
+      display: none;
+  }
   </style>
 
 </head>
@@ -37,6 +41,7 @@
 </div>
 
 <script>
+var player;
 var options = {
     controls: true,
     width: 600,
@@ -64,77 +69,97 @@
 // apply some workarounds for certain browsers
 applyAudioWorkaround();
 
-var player = videojs('myAudio', options, function() {
-    // print version information at startup
-    var msg = 'Using video.js ' + videojs.VERSION +
-        ' with videojs-record ' + videojs.getPluginVersion('record') +
-        ', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
-        ', wavesurfer.js ' + WaveSurfer.VERSION + ' and recordrtc ' +
-        RecordRTC.version;
-    videojs.log(msg);
-});
-
-// user requested to enumerate devices
-document.getElementById('enumBtn').onclick = function(ev) {
-    player.record().enumerateDevices();
-};
+if (isSafari) {
+    // add start button for safari
+    addStartButton();
+} else {
+    // other browsers
+    createPlayer();
+}
+
+function createPlayer(event) {
+    document.getElementById('enumBtn').style.display = 'block';
+
+    if (isSafari) {
+        if (event) {
+            // hide start button on safari
+            event.target.style.display = 'none';
+        }
+        updateContext(options);
+    }
 
-player.on('enumerateReady', function() {
-    var devices = player.record().devices;
-    var list = document.getElementById('devices');
-    var node, textnode;
+    player = videojs('myAudio', options, function() {
+        // print version information at startup
+        var msg = 'Using video.js ' + videojs.VERSION +
+            ' with videojs-record ' + videojs.getPluginVersion('record') +
+            ', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
+            ', wavesurfer.js ' + WaveSurfer.VERSION + ' and recordrtc ' +
+            RecordRTC.version;
+        videojs.log(msg);
+    });
 
-    // remove existing list items
-    while (list.firstChild) {
-        list.removeChild(list.firstChild);
-    }
-    console.log('total devices:', devices.length);
-
-    // The user must have already granted permission to the page
-    // to use the media devices in order to get the device label
-    // populated. When served over HTTPS, the browser will remember
-    // permission granted on subsequent loads, so the permission
-    // will have been granted before requesting media. When using
-    // HTTP, not HTTPS, the getUserMedia request must be made and
-    // accepted before enumerateDevices will populate labels.
-    devices.forEach(function(device) {
-        description = device.kind + ' - label: ' +
-            (device.label || 'unknown') +
-            ' (id: ' + device.deviceId + ')';
-        console.log(description);
-
-        // add device to list
-        node = document.createElement('li');
-        textnode = document.createTextNode(description);
-        node.appendChild(textnode);
-        list.appendChild(node);
+    // user requested to enumerate devices
+    document.getElementById('enumBtn').onclick = function(ev) {
+        player.record().enumerateDevices();
+    };
+
+    player.on('enumerateReady', function() {
+        var devices = player.record().devices;
+        var list = document.getElementById('devices');
+        var node, textnode;
+
+        // remove existing list items
+        while (list.firstChild) {
+            list.removeChild(list.firstChild);
+        }
+        console.log('total devices:', devices.length);
+
+        // The user must have already granted permission to the page
+        // to use the media devices in order to get the device label
+        // populated. When served over HTTPS, the browser will remember
+        // permission granted on subsequent loads, so the permission
+        // will have been granted before requesting media. When using
+        // HTTP, not HTTPS, the getUserMedia request must be made and
+        // accepted before enumerateDevices will populate labels.
+        devices.forEach(function(device) {
+            description = device.kind + ' - label: ' +
+                (device.label || 'unknown') +
+                ' (id: ' + device.deviceId + ')';
+            console.log(description);
+
+            // add device to list
+            node = document.createElement('li');
+            textnode = document.createTextNode(description);
+            node.appendChild(textnode);
+            list.appendChild(node);
+        });
+    });
+
+    // error handling
+    player.on('enumerateError', function() {
+        console.log('enumerate error:', player.enumerateErrorCode);
+    });
+
+    player.on('deviceError', function() {
+        console.log('device error:', player.deviceErrorCode);
+    });
+
+    player.on('error', function(error) {
+        console.log('error:', error);
+    });
+
+    // user clicked the record button and started recording
+    player.on('startRecord', function() {
+        console.log('started recording!');
+    });
+
+    // user completed recording and stream is available
+    player.on('finishRecord', function() {
+        // the blob object contains the recorded data that
+        // can be downloaded by the user, stored on server etc.
+        console.log('finished recording: ', player.recordedData);
     });
-});
-
-// error handling
-player.on('enumerateError', function() {
-    console.log('enumerate error:', player.enumerateErrorCode);
-});
-
-player.on('deviceError', function() {
-    console.log('device error:', player.deviceErrorCode);
-});
-
-player.on('error', function(error) {
-    console.log('error:', error);
-});
-
-// user clicked the record button and started recording
-player.on('startRecord', function() {
-    console.log('started recording!');
-});
-
-// user completed recording and stream is available
-player.on('finishRecord', function() {
-    // the blob object contains the recorded data that
-    // can be downloaded by the user, stored on server etc.
-    console.log('finished recording: ', player.recordedData);
-});
+}
 </script>
 
 </body>
diff --git a/examples/plugins/audio-only-lamejs.html b/examples/plugins/audio-only-lamejs.html
index f945b12e..164c364a 100644
--- a/examples/plugins/audio-only-lamejs.html
+++ b/examples/plugins/audio-only-lamejs.html
@@ -17,6 +17,8 @@
   <script src="../../dist/videojs.record.js"></script>
   <script src="../../dist/plugins/videojs.record.lamejs.js"></script>
 
+  <script src="../browser-workarounds.js"></script>
+
   <style>
   /* change player background color */
   #myAudio {
@@ -29,6 +31,7 @@
 <audio id="myAudio" class="video-js vjs-default-skin"></audio>
 
 <script>
+var player;
 var options = {
     controls: true,
     width: 600,
@@ -57,35 +60,53 @@
     }
 };
 
-var player = videojs('myAudio', options, function() {
-    // print version information at startup
-    var msg = 'Using video.js ' + videojs.VERSION +
-        ' with videojs-record ' + videojs.getPluginVersion('record') +
-        ', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
-        ' and wavesurfer.js ' + WaveSurfer.VERSION;
-    videojs.log(msg);
-});
+if (isSafari) {
+    // add start button for safari
+    addStartButton();
+} else {
+    // other browsers
+    createPlayer();
+}
+
+function createPlayer(event) {
+    if (isSafari) {
+        if (event) {
+            // hide start button on safari
+            event.target.style.display = 'none';
+        }
+        updateContext(options);
+    }
+
+    player = videojs('myAudio', options, function() {
+        // print version information at startup
+        var msg = 'Using video.js ' + videojs.VERSION +
+            ' with videojs-record ' + videojs.getPluginVersion('record') +
+            ', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
+            ' and wavesurfer.js ' + WaveSurfer.VERSION;
+        videojs.log(msg);
+    });
 
-// error handling
-player.on('deviceError', function() {
-    console.log('device error:', player.deviceErrorCode);
-});
+    // error handling
+    player.on('deviceError', function() {
+        console.log('device error:', player.deviceErrorCode);
+    });
 
-player.on('error', function(error) {
-    console.log('error:', error);
-});
+    player.on('error', function(error) {
+        console.log('error:', error);
+    });
 
-// user clicked the record button and started recording
-player.on('startRecord', function() {
-    console.log('started recording!');
-});
+    // user clicked the record button and started recording
+    player.on('startRecord', function() {
+        console.log('started recording!');
+    });
 
-// user completed recording and stream is available
-player.on('finishRecord', function() {
-    // the blob object contains the recorded data that
-    // can be downloaded by the user, stored on server etc.
-    console.log('finished recording: ', player.recordedData);
-});
+    // user completed recording and stream is available
+    player.on('finishRecord', function() {
+        // the blob object contains the recorded data that
+        // can be downloaded by the user, stored on server etc.
+        console.log('finished recording: ', player.recordedData);
+    });
+}
 </script>
 </body>
 </html>
diff --git a/examples/plugins/audio-only-mp3.html b/examples/plugins/audio-only-mp3.html
index 2ce3bbb2..7a58956f 100644
--- a/examples/plugins/audio-only-mp3.html
+++ b/examples/plugins/audio-only-mp3.html
@@ -17,6 +17,8 @@
   <script src="../../dist/videojs.record.js"></script>
   <script src="../../dist/plugins/videojs.record.vmsg.js"></script>
 
+  <script src="../browser-workarounds.js"></script>
+
   <style>
   /* change player background color */
   #myAudio {
@@ -29,6 +31,7 @@
 <audio id="myAudio" class="video-js vjs-default-skin"></audio>
 
 <script>
+var player;
 var options = {
     controls: true,
     width: 600,
@@ -55,34 +58,52 @@
     }
 };
 
-var player = videojs('myAudio', options, function() {
-    // print version information at startup
-    var msg = 'Using video.js ' + videojs.VERSION +
-        ' with videojs-record ' + videojs.getPluginVersion('record') +
-        ' and videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer');
-    videojs.log(msg);
-});
+if (isSafari) {
+    // add start button for safari
+    addStartButton();
+} else {
+    // other browsers
+    createPlayer();
+}
+
+function createPlayer(event) {
+    if (isSafari) {
+        if (event) {
+            // hide start button on safari
+            event.target.style.display = 'none';
+        }
+        updateContext(options);
+    }
+
+    player = videojs('myAudio', options, function() {
+        // print version information at startup
+        var msg = 'Using video.js ' + videojs.VERSION +
+            ' with videojs-record ' + videojs.getPluginVersion('record') +
+            ' and videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer');
+        videojs.log(msg);
+    });
 
-// error handling
-player.on('deviceError', function() {
-    console.log('device error:', player.deviceErrorCode);
-});
+    // error handling
+    player.on('deviceError', function() {
+        console.log('device error:', player.deviceErrorCode);
+    });
 
-player.on('error', function(error) {
-    console.log('error:', error);
-});
+    player.on('error', function(error) {
+        console.log('error:', error);
+    });
 
-// user clicked the record button and started recording
-player.on('startRecord', function() {
-    console.log('started recording!');
-});
+    // user clicked the record button and started recording
+    player.on('startRecord', function() {
+        console.log('started recording!');
+    });
 
-// user completed recording and stream is available
-player.on('finishRecord', function() {
-    // the blob object contains the recorded data that
-    // can be downloaded by the user, stored on server etc.
-    console.log('finished recording: ', player.recordedData);
-});
+    // user completed recording and stream is available
+    player.on('finishRecord', function() {
+        // the blob object contains the recorded data that
+        // can be downloaded by the user, stored on server etc.
+        console.log('finished recording: ', player.recordedData);
+    });
+}
 </script>
 </body>
 </html>
diff --git a/examples/plugins/audio-only-ogg.html b/examples/plugins/audio-only-ogg.html
index c2ebdfe8..05ffe859 100644
--- a/examples/plugins/audio-only-ogg.html
+++ b/examples/plugins/audio-only-ogg.html
@@ -32,6 +32,7 @@
 <audio id="myAudio" class="video-js vjs-default-skin"></audio>
 
 <script>
+var player;
 var options = {
     controls: true,
     width: 600,
@@ -58,40 +59,56 @@
     }
 };
 
-// safari workaround for libvorbis.js
 if (isSafari) {
+    // safari workaround for libvorbis.js
     var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+    // add start button for safari
+    addStartButton();
+} else {
+    // other browsers
+    createPlayer();
 }
 
-var player = videojs('myAudio', options, function() {
-    // print version information at startup
-    var msg = 'Using video.js ' + videojs.VERSION +
-        ' with videojs-record ' + videojs.getPluginVersion('record') +
-        ', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
-        ' and wavesurfer.js ' + WaveSurfer.VERSION;
-    videojs.log(msg);
-});
+function createPlayer(event) {
+    if (isSafari) {
+        if (event) {
+            // hide start button on safari
+            event.target.style.display = 'none';
+        }
+        updateContext(options);
+    }
 
-// error handling
-player.on('deviceError', function() {
-    console.log('device error:', player.deviceErrorCode);
-});
+    player = videojs('myAudio', options, function() {
+        // print version information at startup
+        var msg = 'Using video.js ' + videojs.VERSION +
+            ' with videojs-record ' + videojs.getPluginVersion('record') +
+            ', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
+            ' and wavesurfer.js ' + WaveSurfer.VERSION;
+        videojs.log(msg);
+    });
 
-player.on('error', function(error) {
-    console.log('error:', error);
-});
+    // error handling
+    player.on('deviceError', function() {
+        console.log('device error:', player.deviceErrorCode);
+    });
 
-// user clicked the record button and started recording
-player.on('startRecord', function() {
-    console.log('started recording!');
-});
+    player.on('error', function(error) {
+        console.log('error:', error);
+    });
 
-// user completed recording and stream is available
-player.on('finishRecord', function() {
-    // the blob object contains the recorded data that
-    // can be downloaded by the user, stored on server etc.
-    console.log('finished recording: ', player.recordedData);
-});
+    // user clicked the record button and started recording
+    player.on('startRecord', function() {
+        console.log('started recording!');
+    });
+
+    // user completed recording and stream is available
+    player.on('finishRecord', function() {
+        // the blob object contains the recorded data that
+        // can be downloaded by the user, stored on server etc.
+        console.log('finished recording: ', player.recordedData);
+    });
+}
 </script>
 </body>
 </html>
diff --git a/examples/plugins/audio-only-opus.html b/examples/plugins/audio-only-opus.html
index 4c4d819d..597a5773 100644
--- a/examples/plugins/audio-only-opus.html
+++ b/examples/plugins/audio-only-opus.html
@@ -18,6 +18,8 @@
   <script src="../../dist/videojs.record.js"></script>
   <script src="../../dist/plugins/videojs.record.opus-recorder.js"></script>
 
+  <script src="../browser-workarounds.js"></script>
+
   <style>
   /* change player background color */
   #myAudio {
@@ -30,6 +32,7 @@
 <audio id="myAudio" class="video-js vjs-default-skin"></audio>
 
 <script>
+var player;
 var options = {
     controls: true,
     width: 600,
@@ -58,35 +61,53 @@
     }
 };
 
-var player = videojs('myAudio', options, function() {
-    // print version information at startup
-    var msg = 'Using video.js ' + videojs.VERSION +
-        ' with videojs-record ' + videojs.getPluginVersion('record') +
-        ', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
-        ' and wavesurfer.js ' + WaveSurfer.VERSION;
-    videojs.log(msg);
-});
+if (isSafari) {
+    // add start button for safari
+    addStartButton();
+} else {
+    // other browsers
+    createPlayer();
+}
+
+function createPlayer(event) {
+    if (isSafari) {
+        if (event) {
+            // hide start button on safari
+            event.target.style.display = 'none';
+        }
+        updateContext(options);
+    }
+
+    player = videojs('myAudio', options, function() {
+        // print version information at startup
+        var msg = 'Using video.js ' + videojs.VERSION +
+            ' with videojs-record ' + videojs.getPluginVersion('record') +
+            ', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
+            ' and wavesurfer.js ' + WaveSurfer.VERSION;
+        videojs.log(msg);
+    });
 
-// error handling
-player.on('deviceError', function() {
-    console.log('device error:', player.deviceErrorCode);
-});
+    // error handling
+    player.on('deviceError', function() {
+        console.log('device error:', player.deviceErrorCode);
+    });
 
-player.on('error', function(error) {
-    console.log('error:', error);
-});
+    player.on('error', function(error) {
+        console.log('error:', error);
+    });
 
-// user clicked the record button and started recording
-player.on('startRecord', function() {
-    console.log('started recording!');
-});
+    // user clicked the record button and started recording
+    player.on('startRecord', function() {
+        console.log('started recording!');
+    });
 
-// user completed recording and stream is available
-player.on('finishRecord', function() {
-    // the blob object contains the recorded data that
-    // can be downloaded by the user, stored on server etc.
-    console.log('finished recording: ', player.recordedData);
-});
+    // user completed recording and stream is available
+    player.on('finishRecord', function() {
+        // the blob object contains the recorded data that
+        // can be downloaded by the user, stored on server etc.
+        console.log('finished recording: ', player.recordedData);
+    });
+}
 </script>
 </body>
 </html>
diff --git a/examples/plugins/audio-only-recorderjs.html b/examples/plugins/audio-only-recorderjs.html
index bac51bf3..a1ee08dc 100644
--- a/examples/plugins/audio-only-recorderjs.html
+++ b/examples/plugins/audio-only-recorderjs.html
@@ -18,6 +18,8 @@
   <script src="../../dist/videojs.record.js"></script>
   <script src="../../dist/plugins/videojs.record.recorderjs.js"></script>
 
+  <script src="../browser-workarounds.js"></script>
+
   <style>
   /* change player background color */
   #myAudio {
@@ -30,6 +32,7 @@
 <audio id="myAudio" class="video-js vjs-default-skin"></audio>
 
 <script>
+var player;
 var options = {
     controls: true,
     width: 600,
@@ -55,34 +58,53 @@
     }
 };
 
-var player = videojs('myAudio', options, function() {
-    // print version information at startup
-    var msg = 'Using video.js ' + videojs.VERSION +
-        ' with videojs-record ' + videojs.getPluginVersion('record') +
-        ', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
-        ' and wavesurfer.js ' + WaveSurfer.VERSION;
-    videojs.log(msg);
-});
+if (isSafari) {
+    // add start button for safari
+    addStartButton();
+} else {
+    // other browsers
+    createPlayer();
+}
+
+function createPlayer(event) {
+    if (isSafari) {
+        if (event) {
+            // hide start button on safari
+            event.target.style.display = 'none';
+        }
+        updateContext(options);
+    }
+
+    player = videojs('myAudio', options, function() {
+        // print version information at startup
+        var msg = 'Using video.js ' + videojs.VERSION +
+            ' with videojs-record ' + videojs.getPluginVersion('record') +
+            ', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
+            ' and wavesurfer.js ' + WaveSurfer.VERSION;
+        videojs.log(msg);
+    });
+
+    // error handling
+    player.on('deviceError', function() {
+        console.log('device error:', player.deviceErrorCode);
+    });
 
-// error handling
-player.on('deviceError', function() {
-    console.log('device error:', player.deviceErrorCode);
-});
-player.on('error', function(error) {
-    console.log('error:', error);
-});
+    player.on('error', function(error) {
+        console.log('error:', error);
+    });
 
-// user clicked the record button and started recording
-player.on('startRecord', function() {
-    console.log('started recording!');
-});
+    // user clicked the record button and started recording
+    player.on('startRecord', function() {
+        console.log('started recording!');
+    });
 
-// user completed recording and stream is available
-player.on('finishRecord', function() {
-    // the blob object contains the recorded data that
-    // can be downloaded by the user, stored on server etc.
-    console.log('finished recording: ', player.recordedData);
-});
+    // user completed recording and stream is available
+    player.on('finishRecord', function() {
+        // the blob object contains the recorded data that
+        // can be downloaded by the user, stored on server etc.
+        console.log('finished recording: ', player.recordedData);
+    });
+}
 </script>
 </body>
 </html>
diff --git a/examples/plugins/video-only-ebml.html b/examples/plugins/video-only-ebml.html
index 2cd7e1a8..41b2628f 100644
--- a/examples/plugins/video-only-ebml.html
+++ b/examples/plugins/video-only-ebml.html
@@ -55,10 +55,12 @@
 player.on('error', function(error) {
     console.log('error:', error);
 });
+
 // user clicked the record button and started recording
 player.on('startRecord', function() {
     console.log('started recording!');
 });
+
 // user completed recording and stream is available
 player.on('finishRecord', function() {
     // the blob object contains the recorded data that
diff --git a/examples/upload/fine-uploader.html b/examples/upload/fine-uploader.html
index 71a64812..7160969a 100644
--- a/examples/upload/fine-uploader.html
+++ b/examples/upload/fine-uploader.html
@@ -39,10 +39,16 @@
                     endpoint: '/vendor/fineuploader/php-traditional-server/endpoint.php'
                 },
                 validation: {
-                    allowedExtensions: ['mp3', 'ogg', 'oga', 'ogg']
+                    allowedExtensions: ['mp3', 'ogg', 'oga', 'ogg', 'wav']
+                },
+                callbacks: {
+                    onError: function(id, name, errorReason, xhrOrXdr) {
+                        console.error('upload error:', errorReason);
+                    }
                 }
             });
             // setup videojs-record
+            var player;
             var options = {
                 controls: true,
                 width: 600,
@@ -69,36 +75,54 @@
             // apply some workarounds for certain browsers
             applyAudioWorkaround();
 
-            var player = videojs('myAudio', options, function() {
-                // print version information at startup
-                var msg = 'Using video.js ' + videojs.VERSION +
-                    ' with videojs-record ' + videojs.getPluginVersion('record') +
-                    ', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
-                    ', wavesurfer.js ' + WaveSurfer.VERSION + ' and recordrtc ' +
-                    RecordRTC.version;
-                videojs.log(msg);
-            });
+            if (isSafari) {
+                // add start button for safari
+                addStartButton();
+            } else {
+                // other browsers
+                createPlayer();
+            }
 
-            // player error handling
-            player.on('deviceError', function() {
-                console.warn('device error:', player.deviceErrorCode);
-            });
+            function createPlayer(event) {
+                if (isSafari) {
+                    if (event) {
+                        // hide start button on safari
+                        event.target.style.display = 'none';
+                    }
+                    updateContext(options);
+                }
 
-            player.on('error', function(error) {
-                console.log('error:', error);
-            });
+                player = videojs('myAudio', options, function() {
+                    // print version information at startup
+                    var msg = 'Using video.js ' + videojs.VERSION +
+                        ' with videojs-record ' + videojs.getPluginVersion('record') +
+                        ', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
+                        ', wavesurfer.js ' + WaveSurfer.VERSION + ' and recordrtc ' +
+                        RecordRTC.version;
+                    videojs.log(msg);
+                });
 
-            // data is available
-            player.on('finishRecord', function() {
-                // the blob object contains the audio data
-                var audioFile = player.recordedData;
+                // player error handling
+                player.on('deviceError', function() {
+                    console.warn('device error:', player.deviceErrorCode);
+                });
 
-                console.log('finished recording: ', audioFile);
+                player.on('error', function(error) {
+                    console.log('error:', error);
+                });
 
-                // upload data to server
-                var filesList = [audioFile];
-                uploader.addFiles(filesList);
-            });
+                // data is available
+                player.on('finishRecord', function() {
+                    // the blob object contains the audio data
+                    var audioFile = player.recordedData;
+
+                    console.log('finished recording: ', audioFile);
+
+                    // upload data to server
+                    var filesList = [audioFile];
+                    uploader.addFiles(filesList);
+                });
+            }
         </script>
 
     </body>
diff --git a/examples/upload/jquery.fileupload.html b/examples/upload/jquery.fileupload.html
index cc7a2271..4e2aa393 100644
--- a/examples/upload/jquery.fileupload.html
+++ b/examples/upload/jquery.fileupload.html
@@ -41,48 +41,40 @@
         <input id="fileupload" type="file" name="files[]" multiple>
 
         <script>
-        $(function () {
-            // Initialize the jQuery File Upload widget
-            $('#fileupload').fileupload({
-                url: '//localhost/jQuery-File-Upload/server/php/',
-                done: function (e, data) {
-                    $.each(data.files, function (index, file) {
-                        var message = 'Upload complete: ' + file.name + ' (' +
-                            file.size + ' bytes)';
-                        $('<p/>').text(message).appendTo(document.body);
-                        console.log(message);
-                    });
+        var player;
+        var options = {
+            controls: true,
+            width: 600,
+            height: 300,
+            plugins: {
+                wavesurfer: {
+                    src: 'live',
+                    waveColor: '#f7fff7',
+                    progressColor: '#ffe66d',
+                    debug: true,
+                    cursorWidth: 1,
+                    msDisplayMax: 20,
+                    hideScrollbar: true
+                },
+                record: {
+                    audio: true,
+                    video: false,
+                    maxLength: 20,
+                    debug: true
                 }
-            });
-
-            // setup videojs-record
-            var options = {
-                controls: true,
-                width: 600,
-                height: 300,
-                plugins: {
-                    wavesurfer: {
-                        src: 'live',
-                        waveColor: '#f7fff7',
-                        progressColor: '#ffe66d',
-                        debug: true,
-                        cursorWidth: 1,
-                        msDisplayMax: 20,
-                        hideScrollbar: true
-                    },
-                    record: {
-                        audio: true,
-                        video: false,
-                        maxLength: 20,
-                        debug: true
-                    }
+            }
+        };
+
+        function createPlayer(event) {
+            if (isSafari) {
+                if (event) {
+                    // hide start button on safari
+                    event.target.style.display = 'none';
                 }
-            };
-
-            // apply some workarounds for certain browsers
-            applyAudioWorkaround();
+                updateContext(options);
+            }
 
-            var player = videojs('myAudio', options, function() {
+            player = videojs('myAudio', options, function() {
                 // print version information at startup
                 var msg = 'Using video.js ' + videojs.VERSION +
                     ' with videojs-record ' + videojs.getPluginVersion('record') +
@@ -112,6 +104,35 @@
                 var filesList = [audioFile];
                 $('#fileupload').fileupload('add', {files: filesList});
             });
+        }
+
+        $(function() {
+            // Initialize the jQuery File Upload widget
+            $('#fileupload').fileupload({
+                url: '//localhost/jQuery-File-Upload/server/php/',
+                done: function (e, data) {
+                    $.each(data.files, function (index, file) {
+                        var message = 'Upload complete: ' + file.name + ' (' +
+                            file.size + ' bytes)';
+                        $('<p/>').text(message).appendTo(document.body);
+                        console.log(message);
+                    });
+                },
+                fail: function (e, data) {
+                    console.error('upload error:', e.type, data);
+                }
+            });
+
+            // apply some workarounds for certain browsers
+            applyAudioWorkaround();
+
+            if (isSafari) {
+                // add start button for safari
+                addStartButton();
+            } else {
+                // other browsers
+                createPlayer();
+            }
         });
         </script>
 
diff --git a/examples/upload/websocket.html b/examples/upload/websocket.html
index e4612e3b..ec804d27 100644
--- a/examples/upload/websocket.html
+++ b/examples/upload/websocket.html
@@ -63,67 +63,86 @@
 // apply some workarounds for certain browsers
 applyAudioWorkaround();
 
-var player = videojs('myAudio', options, function() {
-    // print version information at startup
-    var msg = 'Using video.js ' + videojs.VERSION +
-        ' with videojs-record ' + videojs.getPluginVersion('record') +
-        ', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
-        ', wavesurfer.js ' + WaveSurfer.VERSION + ' and recordrtc ' + RecordRTC.version;
-    videojs.log(msg);
-
-    // connect to websocket server
-    var sockjs_url = 'http://0.0.0.0:9999/upload-socket';
-    sock = new SockJS(sockjs_url);
-
-    // websocket event handlers
-    sock.onopen = function() {
-        console.log('connected to websocket: ' + sockjs_url);
-    };
-    sock.onmessage = function(e) {
-        console.log('message received: ', e.data);
-    };
-    sock.onclose = function() {
-        console.log('websocket connection closed.');
-    };
-});
-
-// error handling
-player.on('deviceError', function() {
-    console.log('device error:', player.deviceErrorCode);
-});
-
-player.on('error', function(error) {
-    console.log('error:', error);
-});
-
-// user clicked the record button and started recording
-player.on('startRecord', function() {
-    startedRecord = true;
-    sock.send('start');
-    console.log('started recording!');
-
-    player.on('audioBufferUpdate', function() {
-        // upload recorded data
-        upload(player.recordedData);
+if (isSafari) {
+    // add start button for safari
+    addStartButton();
+} else {
+    // other browsers
+    createPlayer();
+}
+
+function createPlayer(event) {
+    if (isSafari) {
+        if (event) {
+            // hide start button on safari
+            event.target.style.display = 'none';
+        }
+        updateContext(options);
+    }
+
+    player = videojs('myAudio', options, function() {
+        // print version information at startup
+        var msg = 'Using video.js ' + videojs.VERSION +
+            ' with videojs-record ' + videojs.getPluginVersion('record') +
+            ', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
+            ', wavesurfer.js ' + WaveSurfer.VERSION + ' and recordrtc ' + RecordRTC.version;
+        videojs.log(msg);
+
+        // connect to websocket server
+        var sockjs_url = 'http://0.0.0.0:9999/upload-socket';
+        console.log('connecting to ' + sockjs_url);
+        sock = new SockJS(sockjs_url);
+
+        // websocket event handlers
+        sock.onopen = function() {
+            console.log('connected to websocket: ' + sockjs_url);
+        };
+        sock.onmessage = function(e) {
+            console.log('message received: ', e.data);
+        };
+        sock.onclose = function() {
+            console.log('websocket connection closed.');
+        };
+    });
+
+    // error handling
+    player.on('deviceError', function() {
+        console.log('device error:', player.deviceErrorCode);
     });
-});
 
-// user completed recording and stream is available
-player.on('finishRecord', function() {
-    startedRecord = false;
+    player.on('error', function(error) {
+        console.log('error:', error);
+    });
+
+    // user clicked the record button and started recording
+    player.on('startRecord', function() {
+        startedRecord = true;
+        sock.send('start');
+        console.log('started recording!');
+
+        player.on('audioBufferUpdate', function() {
+            // upload recorded data
+            upload(player.recordedData);
+        });
+    });
 
-    // stop uploading
-    player.off('audioBufferUpdate');
+    // user completed recording and stream is available
+    player.on('finishRecord', function() {
+        startedRecord = false;
 
-    sock.send('stop');
+        // stop uploading
+        player.off('audioBufferUpdate');
 
-    // the blob object contains the recorded data that
-    // can be downloaded by the user, stored on server etc.
-    console.log('finished recording:', player.recordedData);
-});
+        sock.send('stop');
 
-function upload(data) {
-    sock.send(data);
+        // the blob object contains the recorded data that
+        // can be downloaded by the user, stored on server etc.
+        console.log('finished recording:', player.recordedData);
+    });
+
+    function upload(data) {
+        sock.send(data);
+    }
 }
 </script>