{"type":"excalidraw","version":2,"source":"https://AwesomeSystemDesign.dev","elements":[{"angle":0,"strokeColor":"#6577aa","backgroundColor":"#eef1fc","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-1"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-1"}],"updated":0,"link":null,"locked":false,"id":"shape-0","type":"rectangle","seed":41,"x":36,"y":32,"width":272.8523200000001,"height":68,"customData":{"revealStep":1}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-1"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-1","type":"text","seed":114,"x":56,"y":54.3,"width":232.85232000000008,"height":23.400000000000002,"fontSize":18,"fontFamily":1,"text":"Video Timeline (segments)","originalText":"Video Timeline (segments)","textAlign":"center","verticalAlign":"middle","containerId":"shape-0","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":1}},{"angle":0,"strokeColor":"#628572","backgroundColor":"#edf5ee","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-2"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-3"}],"updated":0,"link":null,"locked":false,"id":"shape-2","type":"rectangle","seed":187,"x":348.8523200000001,"y":32.00000000000001,"width":363.0244,"height":82.80000000000001,"customData":{"revealStep":2}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-2"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-3","type":"text","seed":260,"x":368.8523200000001,"y":50.000000000000014,"width":323.0244,"height":46.800000000000004,"fontSize":18,"fontFamily":1,"text":"1080p |1080p | 720p | 480p |720p\nseg1 | seg2 | seg3 | seg4 | seg5","originalText":"1080p |1080p | 720p | 480p |720p\nseg1 | seg2 | seg3 | seg4 | seg5","textAlign":"center","verticalAlign":"middle","containerId":"shape-2","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":2}},{"angle":0,"strokeColor":"#a68a53","backgroundColor":"#fff7e6","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-3"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-5"}],"updated":0,"link":null,"locked":false,"id":"shape-4","type":"rectangle","seed":333,"x":36,"y":154.8,"width":544.4699,"height":478,"customData":{"revealStep":3}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-3"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-5","type":"text","seed":406,"x":56,"y":172.8,"width":504.46990000000005,"height":442,"fontSize":17,"fontFamily":1,"text":"Adaptive Bitrate Streaming\n\nThe player dynamically switches quality based on the\nviewer's network bandwidth.\n\nbandwidth bandwidth\ndropped recovered\n\nEach segment is 2-10 seconds of video.\nPlayer can switch quality at segment boundaries.\nSeamless to the viewer -- no pause needed.\n\nProtocol: HLS (Apple) or DASH (MPEG-DASH)\nBoth work the same way:\n1. Client fetches a MANIFEST file\n2. Manifest lists all available qualities + segment URLs\n3. Client selects quality based on bandwidth estimation\n4. Client fetches segments one by one\n5. Client monitors download speed, switches quality\nif bandwidth changes","originalText":"Adaptive Bitrate Streaming\n\nThe player dynamically switches quality based on the\nviewer's network bandwidth.\n\nbandwidth bandwidth\ndropped recovered\n\nEach segment is 2-10 seconds of video.\nPlayer can switch quality at segment boundaries.\nSeamless to the viewer -- no pause needed.\n\nProtocol: HLS (Apple) or DASH (MPEG-DASH)\nBoth work the same way:\n1. Client fetches a MANIFEST file\n2. Manifest lists all available qualities + segment URLs\n3. Client selects quality based on bandwidth estimation\n4. Client fetches segments one by one\n5. Client monitors download speed, switches quality\nif bandwidth changes","textAlign":"left","verticalAlign":"middle","containerId":"shape-4","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":3}}],"appState":{"viewBackgroundColor":"#fbfbf8","gridSize":null},"files":{}}