1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Plex HTML5 App WorldWide Request

Discussion in 'Developers Corner' started by jgametest, Dec 17, 2013.

  1. Aug 12, 2014 #81 of 457
    moyekj

    moyekj Well-Known Member

    11,134
    27
    Jan 23, 2006
    Mission...
    Inside "loadedmetadata" trigger event function I think you can get videoHeight and videoWidth properties of the source video and then based on that decide how to size the video while preserving the aspect ratio?
     
  2. Aug 12, 2014 #82 of 457
    ntlord

    ntlord New Member

    183
    0
    Nov 30, 2013
    Thanks. I read somewhere that might work. I'll give that a shot when I have a chance.

    As to caching. I just change the directory I have it stored on my laptop. It's not fancy, but it works.

    One thing I was planning to do was change all of the javascript imports to passing fake parameters, like this:

    http://stackoverflow.com/questions/7413234/how-to-prevent-caching-of-my-javascript-file

    I should probably get a github setup with this so we aren't duplicating efforts.

    I've fixed a few issues already. For example, you can speed up the thumbnail loading, but doing one massive append to the html instead of appending each thumbnail. I also fixed the weird scroll bars too.
     
  3. Aug 12, 2014 #83 of 457
    moyekj

    moyekj Well-Known Member

    11,134
    27
    Jan 23, 2006
    Mission...
    For the video sizing issue, I post relevant snippets from my previously written player which used to size videos properly.
    The video element in html had this:
    Code:
    <video id="video" autoplay height="auto"></video>
    
    Register event listener functions:
    Code:
    video.addEventListener('loadedmetadata', videoSize, false); // Video 1st loaded
    video.addEventListener('timeupdate', videoInfo, false); // Video play position changes
    
    
    Code:
    function videoSize() {
       var minw = 1280; // Want this min width
       var w = video.videoWidth;
       if (w < minw)
          w = minw;
       video.style.width = "" + w + "px";
    }
    
    function videoInfo() {
       var duration = video.duration;
       var current = video.currentTime;
       if (current < 5)
          videoSize();
       info.innerHTML = formattedTime(current) + " / " + formattedTime(duration); 
    }
    
    NOTE: I think the sizing during "loadmetadata" trigger didn't always work which is why I also call that function within 1st few seconds of "timeupdate" trigger just to be sure it gets done.
     
  4. Aug 12, 2014 #84 of 457
    ntlord

    ntlord New Member

    183
    0
    Nov 30, 2013
  5. Aug 12, 2014 #85 of 457
    moyekj

    moyekj Well-Known Member

    11,134
    27
    Jan 23, 2006
    Mission...
    Strange. I tried this in "loadmetadata" trigger:
    video.setAttribute("width", "" + video.videoWidth);
    video.setAttribute("height", "" + video.videoHeight);

    But querying always returns "null":
    Code:
    $("#message").html("w=" + video.getAttribute("width") + " h=" + video.getAttribute("height"));
    $("#message").show();
    
    EDIT: Even worse, I did this inside "timeupdate" trigger function:
    Code:
    $("#message").html("w=" + video.videoWidth + " h=" + video.videoHeight);
    $("#message").show();
    
    And I always get w=0 h=0

    So looks like HLS is not giving video dimensions which would explain why attempts to use the variables to set dimensions don't work.
     
  6. Aug 13, 2014 #86 of 457
    moyekj

    moyekj Well-Known Member

    11,134
    27
    Jan 23, 2006
    Mission...
    setting video playbackRate property > 1 or < -1 doesn't work either so no go on FF/REW. I don't know if Plex client/server model even allows for that to work?
     
  7. Aug 13, 2014 #87 of 457
    ntlord

    ntlord New Member

    183
    0
    Nov 30, 2013
    I think its just HLS support with Opera TV. All of these features work in safari, including playbackRate and setting currentTime to seek. I think HLS is just broken in Opera, which is not surprising.

    It may make sense to switch back to MPEG-DASH. For sure, under dash we could implement seeking. It would just be a question of getting the right segment, and putting it on the buffer.

    BTW, with respect to the caching. If you add the appropriate no cache meta tags to the HTML and add a fake parameter to the javascript imports (e.g. "?nocache=1.0), it won't cache. When you make a change to javascript just change the parameter in the html (e.g. ?nocache=1.1).
     
  8. Aug 13, 2014 #88 of 457
    moyekj

    moyekj Well-Known Member

    11,134
    27
    Jan 23, 2006
    Mission...
    Thanks for the no caching tips - that is very helpful.
    I attach to this message my very simple html5 video test for TiVo. I confirmed last night that 30 sec skip forwards and 8 sec skip backwards work fine for it. If you want to try it out just edit the video.html to replace test videos I have in there with ones that you have available to your web server.

    It did seem like perhaps the mpeg-dash version was a little better behaved, but I think I did still have trouble seeking with it as well, though it did work some of the time. So that was more likely a web server buffering related issue as you say.
     

    Attached Files:

  9. Aug 13, 2014 #89 of 457
    gonzotek

    gonzotek tivo_xml developer

    2,401
    3
    Sep 24, 2004
    Outside...
    Thanks for the tip about the no-cache meta tag. Here's a js snippet that'll save some time and sanity while editing the js and/or css, by generating the script/link tags, including a cache-busting timestamp:
    Code:
    <script>
    var styleSheet=document.createElement("link")
    styleSheet.setAttribute("rel", "stylesheet")
    styleSheet.setAttribute("type", "text/css")
    styleSheet.setAttribute("href", "style.css?ts=" + new Date().getTime())
    document.getElementsByTagName("head")[0].appendChild(styleSheet);
    
    var script=document.createElement('script');
    script.type='text/javascript';
    script.src="script.js?ts=" + new Date().getTime();
    document.getElementsByTagName("body")[0].appendChild(script);
    </script>
    I include that at the bottom of my index.htm file(just above </html>). Combine that with the html meta tag ntlord pointed out, and the cache should now not be used at all while using the Opera developer tools (n.b. for future readers: you'd probably want to go back to cached resources for most files for 'release' versions of the code).
     
  10. Aug 13, 2014 #90 of 457
    moyekj

    moyekj Well-Known Member

    11,134
    27
    Jan 23, 2006
    Mission...
    Just for completeness on the no caching setup, this is the correct html header to use right?
    Code:
    <header>
     <meta http-equiv="Cache-Control" content="no-store"/>
    </header>
    
     
  11. Aug 13, 2014 #91 of 457
    gonzotek

    gonzotek tivo_xml developer

    2,401
    3
    Sep 24, 2004
    Outside...
    I haven't checked it yet, and would have used content="no-cache", but I'd assume either no-store or no-cache would work. If not, here's a mess of cache -related meta tags to try:
    Code:
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="-1" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
     
  12. Aug 13, 2014 #92 of 457
    moyekj

    moyekj Well-Known Member

    11,134
    27
    Jan 23, 2006
    Mission...
    Well, the caching tricks don't seem to work for me. I have this in index.html:
    Code:
    <head>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <script src="system/script/jquery-2.0.3.min.js"></script>
    <script src="system/script/jquery.lazyload.js"></script>
    <script src="system/script/jquery.mousewheel.js"></script>
    <script src="system/script/jquery.querystring.js"></script>
    <script src="system/script/jquery.caret.js"></script>
    <script src="system/script/jquery.tooltips.min.js"></script>
    <script src="system/script/plex.js"></script>
    <script src="system/script/index.js?<?php echo time(); ?>"></script>
    <script src="system/script/language.js"></script>
    
    And I have this in player.html:
    Code:
    <head>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <script src="system/script/jquery-2.0.3.min.js"></script>
    <script src="system/script/jquery.lazyload.js"></script>
    <script src="system/script/jquery.progress.js"></script>
    <script src="system/script/jquery.mousewheel.js"></script>
    <script src="system/script/jquery.querystring.js"></script>
    <script src="system/script/jquery.tooltips.min.js"></script>
    <script src="system/script/plex.js"></script>
    <script src="system/script/player.js?<?php echo time(); ?>"></script>
    <script src="system/script/language.js"></script>
    
    I then load index.html in browser once and play a video, then exit back out to URL loader using the skip back button a few times, make a change to system/script/player.js and then re-load index.html by pressing GO and run same video and see my changes are cached from last load... Frustrating. If the php part wasn't working then I figure it wouldn't load in 1st place, but it does load the file the 1st time (after a TiVo reboot to make sure cache is clear), so I think the php trick is OK.

    Just in case, I went back to manually adding ?version=# prefix as part of the .js load instead of the php trick, and updating version after each player.js change, and it still doesn't work. So the caching is still happening...
    NOTE: I even go so far as to kill my webserver and start it again between code changes to make sure it isn't caching something, but still no dice.
     
  13. Aug 14, 2014 #93 of 457
    jgametest

    jgametest New Member

    117
    0
    Oct 30, 2013
    How exactly do you enter the test page into the URL Redict page. The only one I can type out is plex.tv and logon where it's not showing my page correctly. I did add the the tivo file in the profile page. When i tried to type in my http://127.0.0.1:32400/web/index.html this comes back as "broken" with a sad dog holding the cord from within Opera.
     
  14. Aug 14, 2014 #94 of 457
    moyekj

    moyekj Well-Known Member

    11,134
    27
    Jan 23, 2006
    Mission...
    You can't use 127.0.0.1:32400 since 127.0.0.1 is the URL of your TiVo when you are running on the TiVo. You need to replace that IP with that of the Plex server. i.e. If computer running Plex is 192.168.1.200 then you would enter http://192.168.1.200:32400 as the URL.
     
  15. Aug 14, 2014 #95 of 457
    gonzotek

    gonzotek tivo_xml developer

    2,401
    3
    Sep 24, 2004
    Outside...
    If most of the development action is happening in player.js, I'd suggest not generating the timestamp in php but doing it in javascript as I detailed above. Then you only need to refresh the html one more time so that from then on, every following time the document loads, Opera will generate a newly timestamped script tag, forcing it to fetch the script from the server. I haven't had a chance to test any of the meta (no)caching tags, but I've been using the javascript method with the TiVo/Opera environment for awhile now with no issues, so I'm certain about that.

    Other options:
    1) The webserver can potentially send no cache headers(this is easy in most proper web servers like Apache or with access to the source code, e.g. pytivo; it may be not so easy if you're just piggybacking on some half-baked server that's part of some other project).

    2) Rather than rebooting things, in the URL loader, just add an extra parameter there: http://server/myscript.html?v=1 and keep changing it (still more work than it should be).

    I'll try some things out and write out detailed steps of what works/doesn't if I can find some time later this weekend.
     
  16. Aug 14, 2014 #96 of 457
    jgametest

    jgametest New Member

    117
    0
    Oct 30, 2013
  17. Aug 14, 2014 #97 of 457
    moyekj

    moyekj Well-Known Member

    11,134
    27
    Jan 23, 2006
    Mission...
    OK, I got caching to work using your method, but only after having to move the js loading trick to very bottom of the html page as you mentioned. So I have this at bottom of index.html page (before </html>):
    Code:
    <script>
    var script=document.createElement('script');
    script.type='text/javascript';
    script.src="system/script/index.js?ts=" + new Date().getTime();
    document.getElementsByTagName("body")[0].appendChild(script);
    </script>
    
    And similarly in player.html:
    Code:
    <script>
    var script=document.createElement('script');
    script.type='text/javascript';
    script.src="system/script/player.js?ts=" + new Date().getTime();
    document.getElementsByTagName("body")[0].appendChild(script);
    </script>
    
    BTW, I've moved focus back to the mpeg-dash version since the HLS version has too many limitations that perhaps can be overcome using dash version.
     
  18. Aug 16, 2014 #98 of 457
    ntlord

    ntlord New Member

    183
    0
    Nov 30, 2013
    I switched back to dash too. I got seeking mostly working. Its a bit unstable on resume, but it seems to work most of the time. I'll post the new code tommorow.
     
  19. Aug 16, 2014 #99 of 457
    ntlord

    ntlord New Member

    183
    0
    Nov 30, 2013
  20. moyekj

    moyekj Well-Known Member

    11,134
    27
    Jan 23, 2006
    Mission...
    Great update! My biggest issue with mpeg-dash now is the volume is extremely low compared to the hls version when playing on the TiVo. Do you know how to get an audio boost?
     

Share This Page