Sometimes publishers will want to load the Oovvuu player in their own React/Angular widgets and hence will want to use their own loading mechanisms for this.
To do this you will need to do the following:
Step 1: Manually adding the Script
The Oovvuu embed script can be manually placed in your page template for use within your page lifecycle. Add the following to the page head to make the oovvuuRuntime()
function available on the page.
<script
id="oovvuu-player-sdk-v2"
type="module"
src="https://playback.oovvuu.media/player/v2/index.js">
</script>
Note: If you are manually adding the script tag to the page, you can now strip the script from the generated embed snippets.
Step 2: Placing the Embed snippet
After adding the script from Step 1 to your webpage, you can proceed to place the embed code for the video players as normal. (Noting the script included with the embed snippet is no longer required if included on the page already)
Step 3: Calling the oovvuuRuntime()
function
Any time you render a page containing an embed, or dynamically add an embed to a page, you will need to rerun oovvuuRuntime()
. This will create the player in place. Try and avoid calling the function multiple times in quick succession though. We do our best to handle multiple calls to the runtime but sometimes multiple runs can sneak through the cracks, especially when using frameworks like React and place the call inside a useEffect
. You might end up with multiple players rendering in this case.