Assuming you already have a Zidivo account, the first thing you need to do is Upload a Video
Once you have uploaded a video to your account, you need to Create a Campaign
. A campaign pulls together your video along with any specific settings (like geo-restrictions) and the player of your choice so that it looks and behaves the way you want it to. This, then gives you the embed code you need to be able to embed a video on your website.
If you're live streaming, then the process for embedding is very much the same, only you need to Create a Channel
in order to generate your embed code.Regardless of whether you are streaming live or on-demand the options are the same, so from here we'll just refer to on-demand campaigns to keep it simple.
You will find the code needed to embed your video in the same place for both live and on-demand - in step 4 of the setup wizard, location. You will see 3 options.
Publish on webpage: this option is used if you do not have your own website, and your selection here will be used for when you preview your video. It's a good idea to refer to this page if you have any issues with video once embedded on your website as generally, if it works here then the issue is on your website rather than with the video.
Get Script: This is the JScript for embedding your player. It is the more technical way of adding video to your website, but it is also more robust. The script tags should be placed in the <head> of your website and the embed code in the <body> where you would like the player to appear.
While every website is a little different, depending on whether you are using a page builder, if you have access to edit the HTML you should end up with something that looks a little like this...
If you follow these instructions, you should end up with something that looks a little like this...
If you experience any playback issues, you can check out our playback troubleshooting guide here
To enable your video to play in fullscreen, add the allowfullscreen parameter to your iframe, like this...
If you are live streaming, you may want to use a holding image so there is something to show when you are not actively streaming. Most popular encoders (including OBS, Wirecast & vMix) have built in options for this. But there may be scenarios where you need to completely shut off your encoder. In this situations, it's simple to add a holding image using HTML to place the iframe in a <div> and setting a background image.
You can see in this example below, that by using a hosted gif you can get a really good result without needing to run your encoder continuously. Then, if for any reason your stream goes down or the content is restricted to a viewer, they get more than just an error code.