[{"data":1,"prerenderedAt":363},["ShallowReactive",2],{"project-18939145":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":45,"post_text":46,"what":47,"said":85,"maker_in_thread":185,"shape":193,"grid":197,"attempts":325,"same_week":326,"maker_shows":34,"maker_hidden":356,"reader_version":357,"card":358},"18939145","indigo-player","HTML5 Video Player in TypeScript","title","Show HN: HTML5 Video Player in TypeScript","https:\u002F\u002Fgithub.com\u002Fmatvp91\u002Findigo-player","github.com","matvp",1547818488,2019,151,53,281,2195,13,"notable","creative","video player","library",[24,25,26,27,28],"html5 video player","typescript video player","mpeg-dash player","hls player","video.js alternative","mixed",0.13,{"positive":32,"neutral":33,"mixed":34,"critical":35},10,12,1,3,26,{"design":38,"idea":41,"execution":43,"docs":44},{"positive":39,"critical":40},4,0,{"positive":42,"critical":34},5,{"positive":40,"critical":34},{"positive":40,"critical":34},[40,40,35,42,35,35,42,42,35,35,35,40,42,42,40,40,42,40,35,35,40,34,35,40,40,40,35,34,40,42,42,40,40,34,35,42,35,40,40,42],null,{"problem":48,"audience":46,"pricing":46,"motivation":46,"time_to_build":46,"stack":59,"openness":83,"stage":84,"team_size":83},{"value":49,"source":50,"evidence":51},"Existing players lack extensibility and clean ad\u002Fstreaming integration","commenter",[52,56],{"id":53,"by":54,"text":55},"18939460","Ambroos","Some extra background: I worked on a predecessor of this with Matthias about two years back. We had to build a web video player with a lot of advanced capabilities, and found…",{"id":57,"by":54,"text":58},"18939627","The way plugins\u002Fbackends work in this is fundamentally different. Video.js at it's core does very little and doesn't provide a very strict API. The result tends to be that every…",[60,64,68,72,79],{"value":61,"source":50,"evidence":62},"TypeScript",[63],{"id":53,"by":54,"text":55},{"value":65,"source":50,"evidence":66},"React (default UI)",[67],{"id":53,"by":54,"text":55},{"value":69,"source":50,"evidence":70},"Webpack",[71],{"id":53,"by":54,"text":55},{"value":73,"source":50,"evidence":74},"Shaka Player",[75],{"id":76,"by":77,"text":78},"18939466","colde","The \u003Cvideo> tag for instance doesn't support MPEG-DASH and HLS (outside of Edge and Safari). So if you want to do DRM or live streaming, that isn't supported. Thats why this…",{"value":80,"source":50,"evidence":81},"hls.js",[82],{"id":76,"by":77,"text":78},"unknown","beta",{"praise":86,"objections":99,"requests":122,"questions":151,"alternatives":166},[87,92],{"value":88,"source":50,"evidence":89},"Extensible architecture with lightweight dynamic loading",[90,91],{"id":57,"by":54,"text":58},{"id":53,"by":54,"text":55},{"value":93,"source":50,"evidence":94},"Clean, simple UI",[95],{"id":96,"by":97,"text":98},"18940902","flixic","Really nice UI. Simple, neutral and sharp. In addition to other feedback in this thread, I'd also want the Volume icon to change: show muted state \u002F volume level state without…",[100,111,115],{"value":101,"source":50,"evidence":102},"Missing click-to-pause on video",[103,107],{"id":104,"by":105,"text":106},"18939382","melcor","Looks pretty good, at first glance I miss the functionality to pause\u002Fun-pause by clicking on the video. I believe this is a pretty common functionality that you should consider…",{"id":108,"by":109,"text":110},"18939553","mig4ng","Amazing job, I have a few suggestions on how to improve its UX: - Clicking the video should pause\u002Fplay; - Clicking the volume button on mobile when the volume bar is hidden…",{"value":112,"source":50,"evidence":113},"Volume button behaves poorly on mobile",[114],{"id":108,"by":109,"text":110},{"value":116,"source":50,"evidence":117},"Fullscreen exit resets scroll position",[118],{"id":119,"by":120,"text":121},"18939516","fasterthanlime","As long as you're taking feedback (I don't mean to be overwhelming!) - any idea why exiting fullscreen resets the scroll position to 0? Try scrolling down to the player, entering…",[123,130,140,147],{"value":124,"source":125,"evidence":126},"Click video to pause\u002Fplay","maker",[127],{"id":128,"by":11,"text":129},"18939576","Thanks for the suggestions! 1. Absolutely, it's on my radar. 2 & 3. According to me, the volume button seems off in mobile. I think I'll remove it completely on mobile devices,…",{"value":131,"source":50,"evidence":132},"Force landscape in fullscreen on mobile",[133,136],{"id":134,"by":11,"text":135},"18939670","Do you mean something like: \"force the player in landscape mode when you hit the fullscreen button on a mobile device?\". I like it, YouTube does that with it's mobile apps and I…",{"id":137,"by":138,"text":139},"18942185","antonkm","I'd vote for this - toggling landscape manually is icky. If I press fullscreen the default for video should be landscape mode always.",{"value":141,"source":50,"evidence":142},"Spacebar play\u002Fpause",[143],{"id":144,"by":145,"text":146},"18941058","mikeryan","Just to jump on these, traditionally hitting the space bar will also toggle play\u002Fpause.",{"value":148,"source":50,"evidence":149},"Volume icon showing level without slider",[150],{"id":96,"by":97,"text":98},[152,159],{"value":153,"source":50,"evidence":154},"How does it differ from using the video tag?",[155],{"id":156,"by":157,"text":158},"18939451","btbuildem","How is this preferable to using the \u003Cvideo> tag?",{"value":160,"source":50,"evidence":161},"Does it support subtitles?",[162],{"id":163,"by":164,"text":165},"18943036","elcomet","Does it support subtitles ? I've been looking for a video player that supports uploading subtitles, or loading then from a url",[167,174],{"value":168,"source":50,"evidence":169},"video.js",[170,173],{"id":171,"by":77,"text":172},"18939484","Why not use something like video.js which already has a number of pluggable backend and third party plugins supported. Just for the lack of TypeScript?",{"id":57,"by":54,"text":58},{"value":175,"source":50,"evidence":176},"Plyr",[177,181],{"id":178,"by":179,"text":180},"18944265","andyidsinga","Thanks - I've been using \"Plyr\" [0] for some personal video projects. Interesting to compare features and see this one done in TS. [0] https:\u002F\u002Fgithub.com\u002Fsampotts\u002Fplyr",{"id":182,"by":183,"text":184},"18940192","kohanz","Nice work! As someone that uses https:\u002F\u002Fgithub.com\u002Fsampotts\u002Fplyr in one of my projects (and react-plyr), what are the main differences between the two players & designs?",{"comments":186,"answered":39,"key":187},11,[188,191,192],{"id":189,"text":190},"18939623","You're more than welcome to contribute! Good ol' days!",{"id":128,"text":129},{"id":134,"text":135},{"commenters":194,"max_depth":42,"maker_replies":186,"first_comment_mins":195,"lifespan_hours":196},27,38,81,[198,200,202,204,206,209,213,215,216,218,219,220,222,225,226,230,232,235,237,239,241,245,247,250,252,254,255,257,259,262,265,268,270,273,275,278,282,284,287,289,292,294,296,298,303,306,308,309,312,313,315,318,321],[53,40,40,199,54,40],"commenter\u002Fpositive\u002Fidea",[189,40,40,201,11,34],"maker\u002Fneutral\u002Fnone",[108,34,35,203,109,40],"project\u002Fmixed\u002Fdesign",[128,34,40,205,11,34],"maker\u002Fneutral\u002Fdesign",[207,34,42,208,109,40],"18939638","project\u002Fpositive\u002Fdesign",[210,34,35,211,212,40],"18939643","project\u002Fneutral\u002Fdesign","gwillz",[214,34,35,211,109,40],"18939658",[134,34,40,205,11,34],[217,34,42,208,109,40],"18940477",[137,34,42,208,138,40],[144,34,35,211,145,40],[221,34,40,201,11,34],"18943384",[156,223,35,224,157,40],2,"project\u002Fneutral\u002Fidea",[76,223,35,224,77,40],[227,223,40,228,229,40],"18940079","commenter\u002Fneutral\u002Fnone","leshow",[231,223,40,228,77,40],"18940953",[233,223,42,234,54,40],"18941577","project\u002Fpositive\u002Fidea",[236,223,42,234,54,40],"18939478",[238,223,40,228,229,40],"18940068",[240,223,40,228,54,40],"18941558",[242,223,40,243,244,40],"18940094","other\u002Fneutral\u002Fnone","junetic",[246,223,42,234,145,40],"18941115",[248,223,40,243,249,40],"18942361","favorited",[251,223,40,243,145,40],"18964261",[178,35,35,253,179,40],"project\u002Fneutral\u002Fnone",[104,39,35,211,105,40],[256,39,40,205,11,34],"18939400",[119,39,34,258,120,40],"project\u002Fcritical\u002Fexecution",[260,39,40,261,11,34],"18939549","maker\u002Fneutral\u002Fexecution",[263,42,35,211,264,40],"18940140","hawski",[266,42,40,243,267,40],"18940184","JeremyBanks",[269,42,40,243,264,40],"18940293",[271,42,40,243,272,40],"18940588","llao",[274,42,40,243,267,40],"18943576",[276,42,35,211,277,40],"18940185","donut2d",[279,42,34,280,281,40],"18940285","project\u002Fcritical\u002Fidea","callalex",[182,283,35,224,183,40],6,[285,283,40,286,11,34],"18940420","maker\u002Fneutral\u002Fidea",[288,283,42,234,54,40],"18941420",[290,283,40,291,183,40],"18949879","commenter\u002Fpositive\u002Fnone",[96,293,42,208,97,40],7,[295,293,40,205,11,34],"18941198",[297,293,40,205,11,34],"18943372",[299,300,34,301,302,40],"18939463",8,"project\u002Fcritical\u002Fdocs","VikingCoder",[304,300,40,305,11,34],"18939512","maker\u002Fneutral\u002Fdocs",[171,307,35,224,77,40],9,[57,307,42,234,54,40],[310,307,40,291,311,40],"18942346","nbpalomino",[163,32,35,253,164,40],[314,32,40,305,11,34],"18943213",[316,186,40,243,317,40],"18942219","vernie",[319,186,40,243,320,40],"18942297","vdnkh",[322,33,42,323,324,40],"18944382","project\u002Fpositive\u002Fnone","danabrams",[],[327,332,337,342,347,351],{"id":328,"name":329,"points":330,"category":331},"18975189","Simple Opt Out",233,"security_privacy",{"id":333,"name":334,"points":335,"category":336},"18965729","2read",198,"productivity",{"id":338,"name":339,"points":340,"category":341},"18940407","Musish",141,"consumer_social",{"id":343,"name":344,"points":345,"category":346},"18967693","Esy",134,"dev_tools",{"id":348,"name":349,"points":350,"category":346},"18954890","mini-async-log",131,{"id":352,"name":353,"points":354,"category":355},"18929742","Json2graphql",120,"infrastructure",false,"v2",{"id":359,"name":5,"line":6,"ai":356,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":30,"top":18,"kw":360,"maker":11,"domain":10,"tier":19,"attempts":40,"strip":361,"url":9,"mix":362,"praise":88,"objection":101,"sub":21},18939145,[24,25,26,27,28],"0035335533305500503301300031055001353005",[32,33,34,35],1794036574066]