Play the pre-recorded video when the recorder is opened

DarthVeyda

• September 11, 2018 04:29
• Edited

Hi,

I'm trying to implement something that seemed straightforward on paper :) Our website uses Ziggeo to allow people to record video messages along with the emails they send, and a common scenario is to compose an email, record a video, go to the preview screen to see how it all looks together, and then go back to editing. The recorded video token is retained in the hidden field, and the video itself is, naturally, saved on the server, but the recorder itself is re-initialized after leaving the page and going back, so it shows default initial screen, confusing the users who assume that their recording got deleted.

 

I want to show (play?) the existing video in the recorder if a video token is available, but I cannot figure out how to do that. Thought that this is what the folowing parameters are for:

{

    video: <video_token>,

    preload: true,

}

but is doesn't work. Tried the source parameter with the generated video link, too, but that doesn't work either (is it the player-only parameter?).

 

Is what I'm trying to do even possible? What am I missing? Using v2.32 now.

 

Thanks!

0

• 

  Bane

  • September 11, 2018 15:35

  Hi,

  Yes, that is possible and once you know the parameter to set, all is done. First let me mention what the parameters you have mentioned are:

  1. video
  2. preload
  3. source

  Video parameter allows us to mention a key or a token of a video that exists within your Ziggeo application. As you do, it will show you the video that you are referencing in your player (or in rerecorder - see more bellow for what else is needed).

  Preload parameter is pure player parameter and its purpose is to load the video before it is being played. This is good if the videos you have on your website are of large resolution. As soon as the page is loaded and player created, it will start buffering the video into the browser. That way as soon you click play it just starts the playback.

  * It is not recommended to put this on all videos as it might slow things down on slower network speeds simply because all videos would be downloaded in the same time, however for one video that is perfect. Others would just load as usually when you click on play button.

  Source parameter is if your videos are in another location (not in your Ziggeo account). For example if you have access to a video of event you were part of and you would like to present it on your website, however rights for it do not allow you to copy the video. In such case you would not set the video parameter rather just source parameter with full link to the video (starting with protocol and to the extension)

  Now, what you are after is rerecordable parameter. So just adding that to your embedding if you detect that token exists would work fine.

  So your object would look like:

  {
      video: <video_token>,
      rerecordable: true
  }

  Please do let us know how it goes :)

  Regards,
  Bane

  1
• 

  DarthVeyda

  • September 12, 2018 03:24

   

  Hi @Bane :)

   

  Thank you so much! I've tried the video+rerecordable, and it seems I'm still doing something wrong.

  After the recorder gets reinitialized, the video token is saved (at least it shows in the field that is specified in the 'input-bind'), and the rerecordable property is true in the debugger, but nothing plays (tried calling _recorder.play() explicitly, too) - I get the initial screen, or the camera if I skip the initial screen, but not the player with the video I've made before the recorder was reinitialized.

  I get the token for the recorded video from the field specified in the input-bind - this is the token and not the key, right?

  I've also found a property called 'playermodeifexists' - the recorder seems to have it only when rerecordable isn't set to true, and it isn't in the docs, either - what is this one about?

  Here's the code that creates the recorder:

  _recorder = new ZiggeoApi.V2.Recorder({
      element: _videoRecorder,
      attrs: {
         // skipped styling params and duration limits
         allowcustomupload: false,
         'early-rerecord': true,
         'input-bind': 'VideoMessageID',
          video: $('[id$="VideoToken"]').attr('value'), //hidden field where the token is stored between reloads
          rerecordable: true
      }
   });

  0
• 

  Bane

  • September 13, 2018 18:04

  Hi,

  Sorry, I see now what happened. Seems that me from the past missed mentioning the other parameter that is needed. :)

  So your code would look like this:

  _recorder = new ZiggeoApi.V2.Recorder({
    element: _videoRecorder,
    attrs: {
      // skipped styling params and duration limits
      allowcustomupload: false,
      'early-rerecord': true,
      'input-bind': 'VideoMessageID',
      video: $('[id$="VideoToken"]').attr('value'), //hidden field where the token is stored between reloads
      rerecordable: true,
      recordermode: false
    }
  });

  Now let me explain the reasoning behind this.

  recordermode is setting the recorder as recorder or rerecorder. Having that said, you need rerecordable to be true as well in order to have the option to rerecord. If you set it to false, it would not show you the button.

  With the above code though you should be able to see the video and make the rerecording.

  Now the playermodeifexists is in our docs, however there is one important detail about parameters and some other parts of our docs. You will see the dropdown to select your revision. So depending on your selection you may or may not see some parameter.

  In this case the playermodeifexists exists in r31 and above and is there to change the recorder to player (not a rerecorder) so this would not be good for your usecase.

  Please let me know how it goes :)

  Regards,
  Bane

  1
• 

  DarthVeyda

  • September 17, 2018 06:13

  @Bane - thank you so much, the last combination works like charm!

   

  (And thank you for your patience, too :))

  0
• 

  Bane

  • September 17, 2018 16:50

  Hi,

  Happy to hear that :)

  Of course, always happy to help, thank you for asking the question :)

  Regards,
  Bane

  0

Please sign in to leave a comment.