Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Dynamic embed of BOTR (JW platform) player


Hi,

what is the recommended way for embedding a player dynamically? So far I tried it with no luck inside a handlebars template and also in doing it this way:

bc.. var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://content.jwplatform.com/players/'+ talk.video_id + '-' + config.default_player_id + '.js';
this.$speakerVideoView.append(script);



Both ways fail with the error: "Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."

Certainly, I could just put in an embed code with a useless default video and change it to the desired one just after initializing via js:

bc.. jwplayer().load("http://content.bitsontherun.com/jwp/KEY.xml");



But theres a better solution, isnt it?

Thanks
Ren

13 Community Answers

Ethan Feldman

JW Player Support Agent  
0 rated :

Can I see where you tried to embed this ?

JW Player

User  
0 rated :

Sure, Ive made a simple plunker for you:

Preview:
http://embed.plnkr.co/r3UFvo/preview

Edit view:
http://plnkr.co/edit/r3UFvo?p=info

JW Player

User  
0 rated :

Hi Ethan,

is the example code helpful and do you have a solution for me?


Thanks
Ren

Ethan Feldman

JW Player Support Agent  
0 rated :

The div ID you are writing to needs to exist on the page before the scripts are called.

JW Player

User  
0 rated :

But, the div with the class video already exists before the script is called (its called right before the closing body). To illustrate it even more, I just added a DOMContentLoaded listener to the plunker.

So that shouldnt be the problem. Any other ideas or solutions?

Heres the link to the updated version: http://embed.plnkr.co/N7LBLkVEydb6ocOx86N7/preview

You can click on "code" in the header navigation to see the source code.


Thanks a lot
Ren

Ethan Feldman

JW Player Support Agent  
0 rated :

You have:

<div class="video"></div> <script src="script.js"></script>

Shouldn’t it be:

<script src="script.js"></script> <div class="video"></div>

JW Player

User  
0 rated :

Here is the link to your version with the same problem:
http://embed.plnkr.co/N7LBLkVEydb6ocOx86N7/preview

Error message in chrome:
"Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."
"Uncaught TypeError: Cannot set property 'innerHTML' of null"

Ethan Feldman

JW Player Support Agent  
0 rated :

I get this error:

TypeError: document.getElementById(…) is null
http://content.jwplatform.com/players/gJlowkOJ-xAZhdZcU.js
Line 108

JW Player

User  
0 rated :

Yes, youre right. Its because of this warning just before the error: "Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."

Your error: "TypeError: document.getElementById(...) is null"
My error: "Uncaught TypeError: Cannot set property 'innerHTML' of null"

These are basically the same.

The interesting part is before both of our resulting errors.

Ethan Feldman

JW Player Support Agent  
0 rated :

Ah, yes, that is because in JW6 you need a default video loaded when the player is first set up.

Basically what you said:

“Certainly, I could just put in an embed code with a useless default video and change it to the desired one just after initializing via js:”

I just use a blank mp4 file for this purpose.

JW Player

User  
0 rated :

I assume, youre using Firefox with the Firebug extension. The error in the native Firefox console is comparable to my error message in the chrome browser...

JW Player

User  
0 rated :

Ok, thanks for your help. Now Im feeling better when I start using this hack...

Ethan Feldman

JW Player Support Agent  
0 rated :

Np.

This question has received the maximum number of answers.