Uploading videos in the background while video preview is shown

Completed

Bane

• June 10, 2016 10:26

v1 of our recorder does not allow you to see the video until the upload is finished.

 

For that reason we were contacted few time to have the option of previewing the video before or during the video upload.

 

Are you interested in the same feature?

0

• Official comment

  

  Bane

  • August 20, 2016 18:54
  • Edited

  There is a lot of interest in how to have the preview shown as the upload starts.

  You will find two sample files attached to this post which will show how you can implement the recorder to your website using either HTML embedding or JavaScript embedding. Both work the same, even though the preview that you will see is different due to the use of different recorder themes (default and modern) - this is intentional to show you how you can set each, while you can use any theme for any type of embedding - this is completely up to you :)

   

  There are few gotchas that you need to look for:

  1. localplayback parameter needs to be specified if you want the preview to be shown before the upload - if it is not, the uploading is done and preview is shown.

  * Unlike with V1 recorder it will not wait for processing to be finished, however all events will fire as usually.

  2. depending on your setup, it is possible that you are not allowing the embedding to play the videos until they are moderated. In such case, you would need to approve the video first, or change the settings and this is usually showing the following error: "The video is not ready. It is processing or under moderation." (contact us if you experience this and we will help you)

  3. It is not possible to use this on V1 recorder. V1 recorder will always show uploading and processing event as they happen.

  4. Before v1-r15 the video preview was not possible  unless you were in early beta testing where r14 was possible to be used as well.

  5. v1-r16 resolves the bug where you needed to wait for the recording to be fully uploaded and processed before you could re-record again

  If you are using v2 and looking for preview before upload, the recommendation would be to either use our latest headers:

  <link rel="stylesheet" href="//assets-cdn.ziggeo.com/v1-latest/ziggeo.css" />
  <script src="//assets-cdn.ziggeo.com/v1-latest/ziggeo.js"></script>

  or version r16 or higher.

  <link rel="stylesheet" href="//assets-cdn.ziggeo.com/v1-r16/ziggeo.css" />
  <script src="//assets-cdn.ziggeo.com/v1-r16/ziggeo.js"></script>

   

  Next to the above, it is possible that for some strange reason v2 recorder fails to load and v1 is loaded instead (since it is used as fallback). In such case, it would not be possible to have a preview shown, however this does not happen.

  Of course, if you have any kind of question related to the same, just let us know and we would be more than happy to check it out and provide you with the answer :)

   

  Samples:

  Sample using HTML embedding

  Sample using JavaScript embedding
• 

  Bane

  • August 03, 2016 21:46
  • Edited

  With our v1-r14 the beta recorder - written by Ziggeo team -from scratch- is now available.

  It has many great things to offer and one of them is the background uploading of videos, so do check it out :)

   

  To use them, you can use the following headers:

  <link rel="stylesheet" href="//assets-cdn.ziggeo.com/v1-r14/ziggeo.css" />
  <script src="//assets-cdn.ziggeo.com/v1-r14/ziggeo.js"></script>

   

  Now to get your V2 recorder ready for action it is quite simple.

  You can do it this way:

  <ziggeorecorder
       ziggeo-theme='modern'
       ziggeo-width=640
       ziggeo-height=480
       id="ziggeo-recorder">
   </ziggeorecorder>
  
  <script>
       ZiggeoApi.Events.on("system_ready", function() {
           var element = document.getElementById('ziggeo-recorder');
           var recorder = ZiggeoApi.V2.Recorder.findByElement(element);
           recorder.on("uploading", function() {
               console.log("Video Token", recorder.get('video'));
           });
       });
   </script>

   

  Or you can do it this way:

  <div id="ziggeo-recorder"></div>
  
  <script>
      var recorder = new ZiggeoApi.V2.Recorder({
          element: document.getElementById("ziggeo-recorder"),
          attrs: {
              video: "video-token",
              stretch: true
          }
       });
       recorder.activate();
  </script>

   

  Did you try it out for size? Well, I believe I heard clapperboard's sweet sound, so write a comment and let us know of your experience :)

  0
• 

  Josh Schwartzman

  • August 20, 2016 14:48
  • Edited

  Thanks for the updates! It's really great to be able to offer immediate playback, as I find most users want to be able to see the recording first.

  0

Please sign in to leave a comment.