Electroteque Media

API Methods Demo

Video captures using api methods

This example demonstrates using the javascript method api to create the capture and a javascript event to manage the capture completion.

The base64 encoded image is sent to the preview layer for displaying the preview image in the html. The dock button is also configured to be disabled.

function app() {
  return {

    init() {
      //do init stuff here
    },
    capture(e) {
        player.capture();
    }
  }
}

    <div class="flex w-full h-auto my-auto">
      <video class="video-js vjs-default-skin vjs-fluid is-snapshot" crossorigin="anonymous" controls="" id="api"></video>
  </div>

  <script type="text/javascript">

  	var player = videojs("api", {
    "plugins": {
        "snapshot": {
            "dockbutton": false,
            "serverurl": "https://api.electroteque.org/save",
            "tokenurl": "https://api.electroteque.org/token"
        }
    },
    "snapshotname": "test2-[time].jpg",
    "sources": [
        {
            "src": "https://videos.electroteque.org/bitrate/elephants_dream_2000k.webm",
            "type": "video/webm"
        },
        {
            "src": "https://videos.electroteque.org/bitrate/elephants_dream_2000k.mp4",
            "type": "video/mp4"
        },
        {
            "src": "https://videos.electroteque.org/bitrate/elephants_dream_2000k.ogv",
            "type": "video/ogg"
        }
    ]
});




      player.on("capturecomplete", function(api, data) {
console.log("Capture Complete");
});

  </script>