Webcomponent embed

Sample embed code

<script
  data-cfasync="false"
  data-no-defer="1"
  src="https://player.vdocipher.com/v2/player.js"
></script>

<vdocipher-player
  otp="[[REPLACE_WITH_OTP]]"
  playbackInfo="[[REPLACE_WITH_PLAYBACKINFO]]"
  style="width: 400px; height: auto;"
>
</vdocipher-player>

• The script tag can be added to the head of the page. Only <vdocipher-player> needs to be where the video is to be added.
• The data-cfasync and data-no-defer attributes here ensures that it does not get deferred when trying to optimize loading speed. It is required mainly for Cloudflare and some optimizer plugins.

Ordering is important

Note that the <script> tag for the player must be loaded before this element gets loaded in the DOM. If the script tag is deferred, then it will not render the player.

What is a web component

The special HTML tags that you see with vdocipher-player is called a web component. It is comparatively newer tech than iframes which have been supported forever on the web. Web components have now been stable and supported in all browsers released since 2017.

Web component along with a few other technologies under the hood helps us keep the embed code styles contained and still stay in the same DOM hierarchy as the rest of your website. In this case, the <vdocipher-player> is a custom element that gets populated with a shadow-root by the player script.

Why you might use this instead of iframe?

We plan to make web component the default embed code in the future. iframe and its APIs will always be supported. You can use iframes in cases where web component is not possible due to any reason. If you are using iframe currently, you can continue with it. Below are some possible reasons for webcomponent embed.

• mute, fullscreen and play methods
• Building custom player controls
• Preview upcoming player features
• There are some security benefits too.

How to pass variables?

For more details on variables that can be set as part of embed code, see the table on iframe embed page. Below is a sample embed code with autoplay, litmode, cclanguage, loop added. Note that the attributes keys are case insensitive.

<!--For auto play -->
<vdocipher-player
  otp="[[REPLACE_WITH_OTP]]"
  playbackInfo="[[REPLACE_WITH_PLAYBACKINFO]]"
  style="width: 400px; height: auto;"
  autoplay="true"
>
</vdocipher-player>

<!--For lite mode-->
<vdocipher-player
  otp="[[REPLACE_WITH_OTP]]"
  playbackInfo="[[REPLACE_WITH_PLAYBACKINFO]]"
  style="width: 400px; height: auto;"
  litemode="true"
></vdocipher-player>

<!-- for default caption language -->
<vdocipher-player
  otp="[[REPLACE_WITH_OTP]]"
  playbackInfo="[[REPLACE_WITH_PLAYBACKINFO]]"
  style="width: 400px; height: auto;"
  cclanguage="ar"
></vdocipher-player>

<!-- for video to loop -->
<vdocipher-player
  otp="[[REPLACE_WITH_OTP]]"
  playbackInfo="[[REPLACE_WITH_PLAYBACKINFO]]"
  style="width: 400px; height: auto;"
  loop="true"
></vdocipher-player>

How to style a web component embed and keep it responsive?

Webcomponent is responsiveness by itself. In your styles, make sure height is set to auto and keep the width as needed.

If you have vertical video, it might need special handling to ensure that the height is contained within the viewport.

How to use API with web component?

The important method to be used here is getPlayer(). This gives you the same interface as provided by the getInstance() method when using iframe.

const myWebcomponent = document.querySelector('#my-player');
myWebcomponent.getPlayer().then((player) => {
  // player.video is the proxy video element.
  // player.api is the API interface for non-HTML5 API methods.
});

Typescript with JSX

• Add a global JSX declaration in your global.d.ts, for type support.

declare namespace JSX {
  interface IntrinsicElements {
    'vdocipher-player': React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLElement>,
      HTMLElement
    > & {
      otp?: string;
      videoid?: string;
      playbackInfo?: string;
      src?: string;
      autoplay?: 'true' | 'false';
      cclanguage?: string;
      loop?: 'true' | 'false';
      controls?: 'on' | 'off' | 'native';
      litemode?: 'true' | 'false';
    };
  }
}