Documentation

Overview SDKs API Reference Dashboard Integrations How To's
SDKs > JavaScript SDK > Browser Interaction > Embedding Events

Embedding Events

Events concerning particular embeddings such as recorder and player.

Benefits

These events are specific to individual recorders or players.

  • Ziggeo's SDK raises events in real time
  • Simply prepare code to run at requested times
  • No need to monitor or institute checks for particular occurrences

Preface

  • Parameters of events depending on the particular event
  • If you need to obtain additional data from the embedding, you can use the embedding.get function, i.e.: embedding.get('video') within as well as outside of events.

Access recorder embedding

var element = document.getElementById('elementID');
var embedding = ZiggeoApi.V2.Recorder.findByElement(element);

Access player embedding

var element = document.getElementById('elementID');
var embedding = ZiggeoApi.V2.Player.findByElement(element);

List of events

Here is the full list of events.

  1. Media events 10/10

    The list of all events that are connected to your media

    Media can be recorded, played and re-recorded. This section will help you get the details about your media as it happens, telling you exactly what happens and where.

  2. ended

    Fires when a video has ended

    • healthy true if healthy 
    embedding.on("ended", function (healthy) {
//Your code goes here
});
  3. invoke-skip

    Someone skipped choosing the poster image

    embedding.on("invoke-skip", function () {
//Your code goes here
});
  4. loaded

    Triggered when the media is loaded

    embedding.on("loaded", function () {
//Your code goes here
});
  5. paused

    Fires when the pause button is clicked

    embedding.on("paused", function () {
//Your code goes here
});
  6. playing

    Fires after each play action is triggered (even if paused and then played, or if a seek operation is done)

    embedding.on("playing", function () {
//Your code goes here
});
  7. recording

    Triggered when a recording process has started

    embedding.on("recording", function () {
//Your code goes here
});
  8. rerecord

    Triggered when a recorded video is discarded and is being re-recorded

    embedding.on("rerecord", function () {
//Your code goes here
});
  9. seek

    Triggered when the user moves the progress indicator to continue video playback from a different position

    • position position in video 
    embedding.on("seek", function (position) {
//Your code goes here
});
  10. select-image

    Fires once the cover image has been selected

    • image the image object representing the selected image 
    embedding.on("select-image", function (image) {
//Your code goes here
});
  11. uploading

    Triggered when a video is uploading

    embedding.on("uploading", function () {
//Your code goes here
});
  1. DOM related events 1/1

    The list of events that are connected to DOM in some way

    These events would usually fire as some change happens in the HTML (DOM tree). The DOM event can be specific to our embedding, or more global in its nature.

  2. attached

    Fires when the embedding is attached to the DOM element

    embedding.on("attached", function () {
//Your code goes here
});
  1. Progress events 6/6

    The list of events that inform you of different progress states

    If you want to create something special, provide additional ways of keeping your visitors informed or attentive as things happen, you often need to know different states of progress. One good example is if you plan to build your own flashy upload progress bar.

    That and all other events are shown here.

  2. countdown

    Triggered while a video recorder counts down

    • time Timer time 
    embedding.on("countdown", function (time) {
//Your code goes here
});
  3. processed

    Processing completed

    embedding.on("processed", function () {
//Your code goes here
});
  4. processing

    Processing Progress

    • percentage Percentage processed 
    embedding.on("processing", function (percentage) {
//Your code goes here
});
  5. recording_progress

    Recording Progress

    • time Elapsed time while recording
    • paused Only with WebRTC recorder, accept true value if recorder was paused, default is false 
    embedding.on("recording_progress", function (time, paused) {
//Your code goes here
});
  6. upload_progress

    Upload Progress

    • uploaded Bytes uploaded
    • total Bytes total 
    embedding.on("upload_progress", function (uploaded, total) {
//Your code goes here
});
  7. uploaded

    Triggered when a video has been uploaded / recorded (but not processed)

    embedding.on("uploaded", function () {
//Your code goes here
});
  1. Errors related events 7/7

    The list of events that inform you when some forms of errors happen

    Errors are common thing for any web and non web based systems. Some errors are actually notifications that we need to do something like plugging in our camera. Others can be more serious. These events help you know when these happen and react as you wish.

  2. access_forbidden

    Triggered when access to camera or microphone is not granted

    • error Error data 
    embedding.on("access_forbidden", function (error) {
//Your code goes here
});
  3. access_granted

    Triggered when access to camera and microphone is granted

    embedding.on("access_granted", function () {
//Your code goes here
});
  4. camera_nosignal

    Triggered when camera has no signal.

    • data The object data 
    embedding.on("camera_nosignal", function (data) {
//Your code goes here
});
  5. camera_unresponsive

    Triggered when camera has become unresponsive.

    • error Error data 
    embedding.on("camera_unresponsive", function (error) {
//Your code goes here
});
  6. error

    Triggered when an embedding encounters an error

    • error_type type of the error
    • error_code code giving more details about the error 
    embedding.on("error", function (error_type, error_code) {
//Your code goes here
});
  7. no_camera

    Triggered when no camera has been detected.

    embedding.on("no_camera", function () {
//Your code goes here
});
  8. no_microphone

    Triggered when no microphone has been detected.

    embedding.on("no_microphone", function () {
//Your code goes here
});
  1. Informational events 19/19

    The list of events that inform you of different things that happen on your form

    All events are informational in their nature. While the events are not specific as the ones above, they still offer you insight into different things that happen on your pages and around your embeddings.

  2. bound

    Happens when hardware has been bound and is about to be ready to use

    embedding.on("bound", function () {
//Your code goes here
});
  3. camera_signal

    Triggered when camera has signal.

    embedding.on("camera_signal", function () {
//Your code goes here
});
  4. camerahealth

    Triggered when camera health changes.

    • healthy true if healthy 
    embedding.on("camerahealth", function (healthy) {
//Your code goes here
});
  5. change-google-cast-volume

    Fires when volume is changed on playback on Google Cast

    embedding.on("change-google-cast-volume", function () {
//Your code goes here
});
  6. has_camera

    Triggered when a camera has been detected.

    embedding.on("has_camera", function () {
//Your code goes here
});
  7. has_microphone

    Triggered when a microphone has been detected.

    embedding.on("has_microphone", function () {
//Your code goes here
});
  8. mainvideostreamended

    Fires once multistream capture is stopped.

    embedding.on("mainvideostreamended", function () {
//Your code goes here
});
  9. manually_submitted

    Triggered when a video has been manually submitted

    embedding.on("manually_submitted", function () {
//Your code goes here
});
  10. microphonehealth

    Triggered when microphone health changes.

    • healthy true if healthy 
    embedding.on("microphonehealth", function (healthy) {
//Your code goes here
});
  11. pause-google-cast

    Fires when Google Cast is used to play the video and the video is paused

    embedding.on("pause-google-cast", function () {
//Your code goes here
});
  12. play-google-cast

    Fires when Google Cast is used to play the video

    embedding.on("play-google-cast", function () {
//Your code goes here
});
  13. ready_to_play

    Triggered when a video player is ready to play a video

    embedding.on("ready_to_play", function () {
//Your code goes here
});
  14. ready_to_record

    Triggered when a video recorder is ready to record a video

    embedding.on("ready_to_record", function () {
//Your code goes here
});
  15. ready-to-trim

    Triggered when a video is waiting to be trimmed.

    embedding.on("ready-to-trim", function () {
//Your code goes here
});
  16. recording_stopped

    Recording Stopped

    embedding.on("recording_stopped", function () {
//Your code goes here
});
  17. stopped

    Fires when playback is manually stopped

    embedding.on("stopped", function () {
//Your code goes here
});
  18. upload_selected

    Triggered when a file has been selected for upload

    • file File object 
    embedding.on("upload_selected", function (file) {
//Your code goes here
});
  19. verified

    Triggered after video is uploaded and verified that it can be processed.

    embedding.on("verified", function () {
//Your code goes here
});
  20. video-trimmed

    Triggered after a video is trimmed manually or using the trimming overlay.

    • start Time in seconds where trimmed video should start
    • end Time in seconds where trimmed video should end
    • originalDuration Duration of the video before trimming 
    embedding.on("video-trimmed", function (start, end, originalDuration) {
//Your code goes here
});