When using the iframe methods all seem to work fine - I see the video on the form and can refer to its JS function with Python (eg. play() function in the example below)
<iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
function play() {
var iframe = document.querySelector('iframe');
var myPlayer = new Vimeo.Player(iframe);
myPlayer.play();
return 42;
}
</script>
Now, I would like to use a method that uses JS to set video parameters so my Vimeo form/component can accept parameters like videoID. I do everything as in Vimeo SDK documentation:
<div id="made-in-ny"></div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var options = {
id: 59777392,
width: 640,
loop: true
};
var player = new Vimeo.Player('made-in-ny', options);
player.setVolume(0);
});
</script>
But when I run the app I see nothing and get the [An internal error has occurred]
I tried multiple variations but all I get is this error message which doesn’t tell me much.
What do I do wrong here? How can I create a Vimeo form/component that I can set up rather with JS than iFrame?
The order of loading of <script> tags is a little unpredictable if you place them in Custom HTML. It’s OK in the first instance because the SDK gets loaded long before you call play(), but in your second version you use the Vimeo.Player() API straight away, and it’s possible it won’t have loaded.
This will make sure that the SDK is loaded before any of your Javascript executes.
Extra bonus: Support multiple videos on one page
The example you’ve used, using a <div id=...>, means that you can’t have multiple Vimeo videos on the same page – only one element can have that ID.
However, if you’re calling the play() function from an HTML form with self.call_js(), Anvil actually provides the form’s DOM element (as this). So you can use jQuery to find where the element should go in this instance’s. Something like:
<div class="my-video"></div>
<!-- Notice that we're not including the SDK here; it should be in Native Libraries -->
<script>
function play(videoId) {
var options = {
id: videoId,
width: 640,
loop: true
};
var element = $(this).find(".my-video")[0];
var player = new Vimeo.Player(element, options);
player.setVolume(0);
}
</script>
(PS: If you get this working as a Custom Component, we’d love to add it to the Anvil Component Library!)
@meredydd thanks a lot for the quick response! And for going one step beyond with the Extra bonus:)
I moved the Vimeo SDK to Native Libraries. The JS version worked!
But… then I tried the “Extra bonus” with the DOM element utilisation and it didn’t work - I don’t see the player in the preview after running the app. I tried calling the function and even changing id:videoId to a hardcoded number but nothing worked.
And then something even stranger happened - I changed the code to the original code from the example above and now I don’t see the player in the preview and when Running it I get [An internal error has occurred] message. (the SDK is still in Native Libraries)
I’ll be happy to contribute and add the Vimeo player to the library when I’m finished:)
