Thoughts and issues

[TheAntinormal]

Hello,

I've been experiencing this player for WS:// purposes, and I've not been disappointed in it for this use ;)

But there are a few let downs that I'd like to pass to you :

1 - Following the docs, I've tried to add mulitple sources and even though it loads, it doesn't seem to work.. Basically, I've created 5 ws:// streams, added them to the playlist and changing the label to be sure of the ones I pick, and the first works perfectly, the other doesn't load and an error message appear.

2 - The other types of streams : I've been trying to play http://.../.../stream.flv, and it shows me an error message, same with a rtmp://..../.../stream, following the docs, and it doesn't work too. The m3u8 and dash are showing the same message.. so I'm quite disappointed from this point of view but maybe I did it wrong ?

On the other side :

1 - The player is easy and ready to use, it works well with ONE ws:// file and can be modified, that I appreciate !

2 - I've found myself with a full width/height player by changing some of the css, and the player goes itself fullscreen when first played, and it's responsive to the window height and width, I like that too !

---

Here were my thoughts about this player, I really like it, I just feel sad that all the functionalities don't seem to work :/

Thanks for your hard work !

Here is the bit of code I've been using as an example :

sources: [{ file: 'http://127.0.0.1/live/sample.flv', type: 'flv', label: 'HTTP-FLV' }, { file: 'ws://127.0.0.1/live/sample.flv', type: 'flv', label: 'WS-FLV' }, { file: 'ws://127.0.0.1/live/sample', type: 'rtmpmate', label: 'WS-RTMPMATE' }, { file: 'ws://127.0.0.1/live/sample', type: 'wss', label: 'WS-fMP4' }, { file: 'http://127.0.0.1/live/sample/manifest.mpd', type: 'dash', label: 'MPEG-DASH' }, { file: 'rtmp://127.0.0.1/live/sample', type: 'flash', label: 'RTMP-STREAM' }, { file: 'http://127.0.0.1/live/sample/index.m3u8', type: 'def' }],/ mode: 'live', controls: true, autoplay: false, loader: { name: 'xhr-chunked-loader', chunkSize: 2 1024 1024, mode: 'cors' }, bulletscreen: { enable: true, visible: true }, fullpage: { visible: false }, render: { name: 'flv', bufferLength: 4 1024 * 1024, swf: '../swf/playease.swf' }

Basically, I've just set my rtmp/ws/http.. like in this example, and tried leaving xhr-chunked-loader and flv, and tried deleting it too .. but either way, only the first source of the playlist and WS:// only, seem to work :/

(I'm a rookie, just starting dev.. don't mind my comment ^^)

[TheAntinormal]

I just changed to fetch stream loader and now ws:// and http:// (flv) works.

rtmp still shows "player not ready", dash shows "undefined", m3u8 doesn't appear as a source (def + label but the label doesn't appear).

With multiple ws:// in the source playlist, it stills shows me error 1005 and 1006 when try to switch :/

Could you show me a working example of rtmp/m3u8/dash on the same playlist ? Please ?

Thanks, I'll keep updating this post if I get anything else to work :D

[oddengine]

Hi there, I'm testing the live streaming now, and all gose fine for me. Can you visit this page below? I'll publish the stream for one or tow hours. PC: http://studease.cn/solutions.html Mobile: http://studease.cn/solutions-mobile.html

There for the setup config, use the default loader for live streaming, which means that the player will check the browser and fined a loader itself. Such as fetch in Chrome, moz for Firefox, ms for Edge. The chunked loader is used only for http flv vod files. Have a look at the network requests in browser and you'll understand. It is not suggested to use fetch or other loader to play the flv vod files, because the buffer in browser(MSE) is limited, and large files will cause an error.

The sources in the config, will be checked while the player starting. If the browser not supports the item, it will be deleted. For example, hls/m3u8 is not supported in the most of browser on pc, only works on mobile, and flv files are not supported on iOS because the browser dosen't support MSE. So, it is possible to use the same config in both pc and mobile pages, but the items showing may not the same.

As for the rtmp streaming, flash player is needed at first, pc only. If so, get the last version of swf file here, https://github.com/studease/playease-flash. Or just use the swf file in the swf folder of this project.

Let me know if you still get the errors.

[oddengine]

I just changed to fetch stream loader and now ws:// and http:// (flv) works.

rtmp still shows "player not ready", dash shows "undefined", m3u8 doesn't appear as a source (def + label but the label doesn't appear).

With multiple ws:// in the source playlist, it stills shows me error 1005 and 1006 when try to switch :/

Could you show me a working example of rtmp/m3u8/dash on the same playlist ? Please ?

Thanks, I'll keep updating this post if I get anything else to work :D

See the answer upstairs.

[TheAntinormal]

Hello and thank you for your quick answer !

First, know that I'm starting in web development, so I probably don't get everything, sorry ^^

1) M3u8 and Dash : I got what you meant, but as your example of dash works, and not mine (from my own server) I think it's an issue of mine and not of the player. Though, I used a public m3u8 sample to run the test (http not https) and it didn't work either. I even tried on Android :/ The sample is : http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8

One little more issue with m3u8 : when you add a m3u8 with "def" type, you can't put a label to it and it doesn't appear as a source so you can't use it :/

2) RTMP : Even from your example on your website, it still doesn't run. I'm using Opera, I've tried to read it with Edge, and same result. Flash is active on both, I checked, and the last version is installed :/

3) WS & Http FLV : Websocket and HTTP Flv streams works just fine ! And I could satisfy myself using just these two. The problem is : if I try to run one ws:// source, it works. If I add a second ws:// in the playlist, it doesn't work :/ same with http flv.. and if it run once, it means it's supported right ?

Though, if I put ws:// as source 1 and http flv as source 2, I can run both ! But 2 of the same protocol returns an infinite loading :/ (no error)

I've uploaded the error to youtube so you can see : https://youtu.be/ysjn06BqbcY

I'll check the playease-flash and see if I can manage to use it as I'm a rookie :D thanks for your quick support !

[oddengine]

Hello and thank you for your quick answer !

First, know that I'm starting in web development, so I probably don't get everything, sorry ^^

1. M3u8 and Dash : I got what you meant, but as your example of dash works, and not mine (from my own server) I think it's an issue of mine and not of the player. Though, I used a public m3u8 sample to run the test (http not https) and it didn't work either. The sample is : http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8

One little more issue with m3u8 : when you add a m3u8 with "def" type, you can't put a label to it and it doesn't appear as a source so you can't use it :/

1. RTMP : Even from your example on your website, it still doesn't run. I'm using Opera, I've tried to read it with Edge, and same result. Flash is active on both, I checked, and the last version is installed :/
2. WS & Http FLV : Websocket and HTTP Flv streams works just fine ! And I could satisfy myself using just these two. The problem is : if I try to run one ws:// source, it works. If I add a second ws:// in the playlist, it doesn't work :/ same with http flv.. and if it run once, it means it's supported right ?

Though, if I put ws:// as source 1 and http flv as source 2, I can run both ! But 2 of the same protocol returns an infinite loading :/ (no error)

I've uploaded the error to youtube so you can see : https://youtu.be/ysjn06BqbcY

I'll check the playease-flash and see if I can manage to use it as I'm a rookie :D thanks for your quick support !

1. I think the issue of m3u8 might be the url format, and maybe I need not to check it here: https://github.com/studease/playease/blob/master/cn/studease/utils/playease.utils.js#L320

The dash render is not wildly tested. It can only play "dynamic" mpd files, known as live stream, not "static". I only checked it with wowza media server. And it will be more close to international standards later (we are testing our own media server now).

The "wss" and "rtmpmate" render works with our media server, still testing.

2. I just checked rtmp stream with Edge and Chrome, works fine. I got confused. What did the console say?

3. The label of source item, is designed for HD switching (Multiple bit rates for one same show). So, if there's only one checked item in the sources, the label will not show. Just click the play button. Otherwise, it is possible to add 2 items, even with same url and label. I may need your whole sample to test (html and the script files).

I got a situation that I can't visit youtu, it's a sad story... Email (670292548@qq.com) would be just fine.

[TheAntinormal]

Here is the video, I think it will be better description of my issue ^^ https://www104.zippyshare.com/v/J5DG53YR/file.html or https://mega.nz/#!tBgBjaCR!IhJ_Nj5wSucdowQW4GE1LfXKj3tAEtZ0wSHVBYPZyMw

And I understand what you say about HD sources, but the first ws and the rtmp are same stream with different protocols, it should work ?

Same, about the console, the 2nd ws:// seems to work in the console but the player stays dark :/

Anyway, just watch the video I think it will help ^^

And you can try to run rtmp in VLC or else, it will work.. so it's strange ^^"

[oddengine]

Here is my code, the console says "Active render : Flash" "Media source : Close" when I try to run rtmp from your site or from my own rtmp server :/

Here is the code

<script type="text/javascript">
  var pw = document.getElementById('conteneur');
  if (playease.utils.isMobile()) {
      pw.style.margin = '0 auto';
  }

  var width = pw.clientWidth;
  var height = width * 9 / 16 + 40;

  var events = playease.events;
  var player = playease('player');
  player.addEventListener(events.PLAYEASE_FULLPAGE, onFullpage);
  player.addEventListener(events.RESIZE, onResize);
  player.setup({
      width: width,
      height: height,
      aspectratio: '16:9',
      file: '',
      file: '',
      sources: [{
          file: 'ws://82.234.91.118:2222/live/essai.flv',
          type: 'flv',
          label: 'WS'
      }, {
          file: 'http://82.234.91.118:2222/live/essai.flv',
          type: 'flv',
          label: 'http'
      }, {
          file: 'rtmp://82.234.91.118/live/essai',
          type: 'flash',
          label: 'rtmp'
      }, {
          file: 'http://www.streambox.fr/playlists/test_001/stream.m3u8',
          type: 'def',
          label: 'm3u8'
      }, {
          file: 'ws://82.234.91.118:2222/live/3.flv',
          type: 'flv',
          label: 'WS 2'
      }, {
          file: '',
          type: ''
      }],
      mode: 'live',
      bufferTime: 1,
      maxretries: 0,
      retrydelay: 3000,
      controls: true,
      autoplay: false,
      //poster: 'sample.png',
      //report: true,
      loader: {
          name: 'fetch-stream-loader',
          chunkSize: 2 * 1024 * 1024,
          mode: 'cors'
      },
      bulletscreen: {
          enable: false,
          visible: false
      },
      fullpage: {
          visible: false
      },
      render: {
          name: 'flv',
          bufferLength: 4 * 1024 * 1024,
          swf: '../swf/playease.swf'
      }
  });

  function onFullpage(e) {
      pw.style.margin = e.exit ? '40px auto 0' : '0';
      if (e.exit && playease.utils.isMobile()) {
          pw.style.margin = '0 auto';
      }

      pw.style.height = e.exit ? '' : '100%';
      pw.style.position = e.exit ? '' : 'fixed';
      pw.style.maxWidth = e.exit ? '640px' : '100%';
      pw.style.zIndex = e.exit ? '' : '99';
  }

  function onResize(e) {
      if (playease.utils.isAndroid() && playease.utils.isQQBrowser()) {
          var video = document.getElementById('player').firstChild.lastChild;
          video.style.width = window.innerWidth + "px";
          video.style.height = window.innerHeight + "px";
          video.style['object-position'] = 'center top';

          var controlbar = document.getElementById('player').childNodes[1];
          controlbar.style.top = e.height - 40 + "px";
          controlbar.style.position = "absolute";

          var next = pw.parentNode.childNodes[3];
          next.style.top = e.height + "px";
          next.style.bottom = '0px';
          next.style.position = "absolute";
          next.style.zIndex = 999;
      }
  }

  if (playease.utils.isMobile()) {
      window.addEventListener('resize', function(e) {
          setTimeout(function() {
              player.fullscreen(!playease.utils.isHorizontal());
          }, 500);
      });
  }
</script>

It works with this loader right now, and all streams are up and running, if you want to test .. ^^"

I'll run it for an hour so you have the time to see,

Thanks again !

The rtmp render runs in playease.swf, and the network of browser won't show the request.

There's a loader error showing in your video. I'll try your config to figure out the problem tomorrow. Otherwise, I think you should visit the player html through http protocol, not open it in file system. It might cause a CORS issue. May you google crossdomain.xml

[TheAntinormal]

Okay I'll try to see if I can make it work with CORS and maybe run the HTML through http as you said, and if I still have an issue, I'll just email you directly. Thank you a lot and, again, I really like your player, it's just a few issue but I like it a lot ! :D

About the stream, I just ran them to show you but they're not 24/7 online so it'll probably be off tomorrow, I'll try to find the answer by my own, don't worry ^^