jwplayer getting error "No playable source found"

Question

I am working with jwplayer, In which i want to add HD toggling like 720p,360p,260p, for that i am using below code but it is giving me error like "No playable source found",

<html>
<head>
    <script type="text/javascript" src='http://content.jwplatform.com/libraries/vHksukSC.js'></script>

</head>
<body>
<div id="container">Loading the player...</div>
<script>
var playerInstance = jwplayer("container");
playerInstance.setup({
    image: "https://testvideoout.s3.amazonaws.com/Videos/Thumb/Thumb_Videos_29_1446555606635_00001.png",
    sources: [{
      file: "https://testvideoout.s3.amazonaws.com/Videos/Streaming/webm_Videos_66_1450099348116",
      label: "720p HD"
    },{
      file: "https://testvideoout.s3.amazonaws.com/Videos/Streaming/webm_Videos_66_1450099348116",
      label: "360p SD",
      "default": "true"
    },{
      file: "https://testvideoout.s3.amazonaws.com/Videos/Streaming/webm_Videos_66_1450099348116",
      label: "180p Web"
    }]
  });
</script>
</body>
</html>

For reference i am using this url

https://support.jwplayer.com/customer/portal/articles/1428524-hd-quality-toggling

Can anyone please tell me what is issue in it ? I tried googling but didn't get any solution

score 0 · Answer 1 · answered Dec 24 '15 at 22:30

Media type of the source. Is only needed when the file property does not contain a recognized file extension (like .mp4 for mp4). The Media Formats Reference lists all supported types.

So add the type to each video.

playerInstance.setup({
    image: "https://testvideoout.s3.amazonaws.com/Videos/Thumb/Thumb_Videos_29_1446555606635_00001.png",
    sources: [{
      file: "https://testvideoout.s3.amazonaws.com/Videos/Streaming/webm_Videos_66_1450099348116",
      label: "720p HD",
      type: "video/webm"
    },{
      file: "https://testvideoout.s3.amazonaws.com/Videos/Streaming/webm_Videos_66_1450099348116",
      label: "360p SD",
      "default": "true",
      type: "video/webm"
    },{
      file: "https://testvideoout.s3.amazonaws.com/Videos/Streaming/webm_Videos_66_1450099348116",
      label: "180p Web",
      type: "video/webm"
    }]
  });

The documentation wasn't specific as to what exactly should be used as type, so if video/webm doesn't work, try webm.

score 0 · Answer 2 · answered Jan 26 '16 at 17:58

Here is a working demo of your solution. As zer00ne noted, you need to include the type (not mime-type), "webm"

jwplayer('player').setup({
image: "https://testvideoout.s3.amazonaws.com/Videos/Thumb/Thumb_Videos_29_1446555606635_00001.png",
    sources: [{
      file: "https://testvideoout.s3.amazonaws.com/Videos/Streaming/webm_Videos_66_1450099348116",
      label: "720p HD",
      type: "webm"
    },{
      file: "https://testvideoout.s3.amazonaws.com/Videos/Streaming/webm_Videos_66_1450099348116",
      label: "360p SD",
      "default": "true",
      type: "webm"
    },{
      file: "https://testvideoout.s3.amazonaws.com/Videos/Streaming/webm_Videos_66_1450099348116",
      label: "180p Web",
      type: "webm"
    }],
      width: 720,
      height: 406
    });

http://jsfiddle.net/simsketch/5n5qcLca/

jwplayer getting error "No playable source found"

2 Answers2