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

Magento 2 site does not show video player


Trying to setup a player on my new site based on Magento 2 and I can not get it to work
I can setup a hosted player through the publishing wizard but not when I use the element embed.
Please see test page here http://videodesk.com.au/jwplayer

Note my player library is in the head tag
and my player setup goes like this
<div id="myElement">&nbsp;</div>
<script type="text/JavaScript">// <![CDATA[
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: "http://d1szn49efqz1r9.cloudfront.net/30fpsbbb1min-progressive_768Kbps_360p.mp4"
});
// ]]></script>
But it does not load anything

4 Community Answers

Todd

JW Player Support Agent  
0 rated :

From what I can tell, it looks like jwplayer().setup() is being called before your <div id="myElement"> exists in the DOM.

Make sure the player events happen in this order:

1) jwplayer.js loads
2) <div> exists in the DOM
3) jwplayer().setup() is called

mark

User  
0 rated :

How or why do you think this. I showed the code in above and div comes before setup.

Todd

JW Player Support Agent  
0 rated :

I put a breakpoint into your page source right before jwplayer().setup() is called. When the browser loaded the page, I noticed that <div id="myPlayer"> did not exist in the DOM yet.

On second look, my guess is that require.js is conflicting with jwplayer.js in some way. Our engineers say that jwplayer.js needs to be loaded before require.js is. Please see https://developer.jwplayer.com/jw-player/docs/developer-guide/api/javascript_api_introduction/#requirejs-and-jw-player for more details.

mark

User  
0 rated :

Thanks Todd. So I need to find a way to move the library script up. Magento offers the misc scripts from backend , which put the scripts at the bottom, of the head tag but I can probably edit some static files to include it above require.js
Will see how it goes soon.
Cheers

This question has received the maximum number of answers.