2
votes

I am building an app and I'm trying to add a video section. My videos are hosted in jwplayer and I'm using jwplayer as the player as well.

I separated the issue and built the simplest app to test it out and it's not working.

hello.js

  Template.hello.rendered = function (){
    var playerInstance = jwplayer("myElement");
        playerInstance.setup({
            file: "http://content.jwplatform.com/players/AVO71KYC-ahYuWCf3.js",
            width: 750,
            height: 360
        });
  }

hello.html

<div id="myElement">Loading the player...</div>

And I also have the player code inside the tag.

According to the instructions here: http://support.jwplayer.com/customer/portal/articles/1406723-basic-video-embed This should work, but I get the error: Error loading player: No playable sources found

All the instructions I find are for self hosted players. as I mentioned before, the video is hosted at jwplayer.

Thanks in advance for any help.

3

3 Answers

1
votes

To expand a bit, a full example:

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>JW Player</title>
<script src='the URL of the player script, whether you are self-hosting it or getting it from JW'></script>
</head>
<body>
<div id='myElement'>Loading the player...</div>
<script>
    jwplayer('myElement').setup({
        file: 'the URL of the actual video file, no matter where it is hosted',
        image: 'wildlife.jpg',
        width: 640,
        height: 360
    });
</script>
</body>
</html>
1
votes

The line file: "http://content.jwplatform.com/players/AVO71KYC-ahYuWCf3.js", should be your video. That url should be placed at the <head>. Your file should look like this: http://example.com/myVideo.mp4

Here's a simple demo of a JW Player instance.

<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <script src="https://ssl.p.jwpcdn.com/6/12/jwplayer.js"></script>
  </head>
  <body>
     <div id="myElement">...</div>
     <script>
        jwplayer("myElement").setup({
          playlist: 'https://content.jwplatform.com/jw6/AVO71KYC.xml',   
          height: 750,
          width: 630
        });
     </script>
   </body>
</html>

I haven't used JW Platform, but from what I've seen in the documentation it's similar to the regular JW Player. I never seen such code applied to JW Player before so as you can see I have stripped what I'm not familiar with, relocated what was in the wrong place, and added what was missing.

  • Unfamiliar Code

    • Template.hello.rendered = function (){ var playerInstance =jwplayer("myElement") ;playerInstance.setup({

    • Relocated Code

    • file: "http://content.jwplatform.com/players/AVO71KYC-ahYuWCf3.js", to the </head> as this: <script src="http://content.jwplatform.com/players/AVO71KYC-ahYuWCf3.js"></script>
    • Unfortunately this file wasn't working so I took a look at it and found your real configuration at the bottom of the file. You can review the script by pasting this address in your addressbar: http://content.jwplatform.com/players/AVO71KYC-ahYuWCf3.js

    • Missing Code

    • I replaced the previously mentioned script with this: <script src="https://ssl.p.jwpcdn.com/6/11/jwplayer.js"></script>
    • I found your playlist buried in the original script and replaced file: with this: playlist: 'https://content.jwplatform.com/jw6/AVO71KYC.xml',

As a JW Platform customer you can generate customized scripts with a wizard. As I write this, I have found the page you should follow. Anyways, just keep in mind the pattern I've given you while you are reading the documentation. It looks like JW Platform is bloated with alot of options which is why they have a wizard to generate it.

1
votes
http://content.jwplatform.com/players/AVO71KYC-ahYuWCf3.js

Is a single line JW Platform embed code.

To embed this, you just need to embed it like so:

<script src="http://content.jwplatform.com/players/AVO71KYC-ahYuWCf3.js"></script>

That's all.