Wistia Chooser
The Wistia Chooser enables people to access their Wistia videos from outside of the Wistia app, and easily embed and share them.
Want to let folks use video within your product? The Chooser's a great choice.
Alert
🚧 The Wistia Chooser is in beta. Please contact [email protected] if you plan on building something with it. We want to learn how you want to use it, and how we can make it great for you. Thanks! 🚧
Demo: Try The Chooser
Glitch
See live examples and create your own on Glitch: Wistia Chooser Demo.
Note
The Wistia Chooser is not compatible with medias in Channels. If you'd like to use the Wistia Chooser, make sure your medias are in Projects!
Getting Started
To add a Chooser to a page, include the following code snippet:
<script src="//fast.wistia.com/assets/external/chooser.js"></script>
<div id="wistia_chooser" style="height:400px;width:360px;"></div>
<script>
var wistiaChooser = new Wistia.Chooser({
accessToken: ACCESS_TOKEN_GOES_HERE,
domId: "wistia_chooser"
});
wistiaChooser.setup();
</script>
You'll just need to specify an accessToken
from your account to get that code ready to go. More options are available too. Check 'em out below.
Options
accessToken (required)
The access token to authenticate access to projects. You can use a permanent token from your account for prototyping, but for production usage we recommend getting an access token via OAuth2.
customAction
By default, a person can decide to do two things with the video they choose: "Copy URL" or "View in Wistia." You can optionally define a customAction
to provide a third option with your own custom-defined functionality. For example:
customAction: {
text: "Do something with the video!",
callback: myFunction // a function you define, which gets the `media` object as an argument
}
defaultUploadProjectId
You can specify a default project to upload videos into. This is only used if a person begins uploading before clicking into a project. If the person clicks into a project first, the video gets uploaded to that project instead of the default.
If a default project is not specified, the upload button is only visible upon clicking into a project.
domId (required)
The id
attribute of the DOM element the Chooser will appear in.
uploadsDisabled
You can remove the upload button by setting uploadsDisabled
to true
.
Chooser methods
setup()
After initalizing a Chooser object with all of its options, display it by calling the Chooser's setup()
method.
Media methods
getEmbedCode(options)
The media
object's getEmbedCode()
method gets an embed code for that media with the embed options and embed code type you specify, and returns a promise. When the promise is fulfilled, it provides an embedCode
object to your handler.
Alert
The getEmbedCode method does not currently accept those options (embed options or embed code type). That is planned, but not yet implemented.
media.getEmbedCode({ playerColor: "56be8e", embedType: "async"}).then(function(embedCode) {
console.log(embedCode);
});
Example embedCode
object
embedCode
object{
html: "<script src='//fast.wistia.com/assets/external/E-v1.js' async></script><div class="wistia_embed wistia_async_3zckaidcu1" style="height:540px;width:960px"> </div>"
id: "aa585890-8e2c-0134-e0a1-3c764e10a56f"
type: "embed_code"
}
getThumbnail(options)
The media
object's getThumbnail()
method gets a thumbanil for that media with the options you specify, and returns a promise. When the promise is fulfilled, it passes the thumbnail object to your fulfillment handler.
Valid options include:
play_button
: defaults to whether shown as specified in customizeplay_button_color
: RGB or hex color value, defaults to player color specified in customizewidth
: width of the image, in pixelsheight
: height of the image, in pixels
Note
If you only specify height or width, the other dimension will be calculated based on the aspect ratio of the original thumbnail image.
media.getThumbnail({ width: 300, play_button: true }).then(function(thumbnail) {
console.log("Preserve natural aspect ratio and set width to 300, with a play button", thumbnail.url);
});
Example thumbnail
object
thumbnail
object{
height: 720
id: "https://embed-ssl.wistia.com/deliveries/791f19b5603b8a5eee0713869d1aac37293205e5.jpg?image_crop_resized=1280x720&image_play_button=true&image_play_button_color=54bbffe0"
type: "thumbnail"
url: "https://embed-ssl.wistia.com/deliveries/791f19b5603b8a5eee0713869d1aac37293205e5.jpg?image_crop_resized=1280x720&image_play_button=true&image_play_button_color=54bbffe0"
width: 1280
}
Example implementations
Embed a video
<div id='wistia-chooser' style="height:400px;width:320px;"></div>
<!-- The div below will be filled in with the chosen video -->
<div id="wistia-video" style="height:360px;width:640px;"></div>
<script src="//fast.wistia.com/assets/external/chooser.js"></script>
<script>
var chooser = new Wistia.Chooser({
accessToken: ACCESS_TOKEN_GOES_HERE,
domId: 'wistia-chooser',
customAction: {
text: "Embed this video",
callback: function(media) {
media.getEmbedCode().then(function(embedData) {
document.getElementById('wistia-video').innerHTML = embedData.html;
document.querySelector('#wistia-video .wistia_embed').style.height = '100%';
document.querySelector('#wistia-video .wistia_embed').style.width = '100%';
});
}
}
});
chooser.setup();
</script>
Show URL for the video in Wistia
<script src="//fast.wistia.com/assets/external/chooser.js"></script>
<div id='wistia-chooser' style="height:400px;width:320px;"></div>
<input id="wistia-video-url" style="width:320px;margin-top:10px;">
<script>
var chooser = new Wistia.Chooser({
accessToken: ACCESS_TOKEN_GOES_HERE,
domId: 'wistia-chooser',
customAction: {
text: "Show video URL",
callback: function(media) {
document.getElementById('wistia-video-url').value = media.url;
}
}
});
chooser.setup();
</script>
Insert a thumbnail image link
<script src="//fast.wistia.com/assets/external/chooser.js"></script>
<div id='wistia-chooser' style="height:400px;width:320px;"></div>
<a id="wistia-video-link">
<img id="wistia-video-thumbnail" style="width:320px;">
</a>
<script>
var chooser = new Wistia.Chooser({
accessToken: ACCESS_TOKEN_GOES_HERE,
domId: 'wistia-chooser',
customAction: {
text: "Insert thumbnail link",
callback: function(media) {
document.getElementById('wistia-video-link').href = media.url;
media.getThumbnail({ play_button: true, width: 300 }).then(function(thumbnail) {
document.getElementById('wistia-video-thumbnail').src = thumbnail.url;
});
}
}
});
chooser.setup();
</script>
Updated about 1 year ago