タイムラインでの動画自動再生 はどうやってやるの?

今や色々なアプリで出来るようになったタイムラインで動画を自動再生するアプリを作る機会があったので、その技術について解説します。

Transcript

1. Laura House
2. ࣗݾ঺հ ߹ಉձࣾϩʔϥϋ΢ε ळຊ େհ 2014/8/1 ઃཱ
3. λΠϜϥΠϯͰͷಈըࣗಈ࠶ੜ ͸Ͳ͏΍ͬͯ΍Δͷʁ
5. ಈըࣗಈ࠶ੜΛߦͳ͍ͬͯΔΞϓϦ ɾTwitter ɾFacebook ɾInstagram ɾLINE ɾYouTube ɾPinterest ɾTikTok
6. ΄ͱΜͲશ෦
7. ࡞ͬͯΈͨ ػձ͕͋ͬͨͷͰ
8. ΞϓϦ୯ମͱͯ͠ͷ࢖༻ٕज़ ɾUITableView ɾUIScrollViewDelegate ɾscrollViewDidScroll ɾAVPlayer ׈Β͔ʹ੾Γସ͑Δͷʹ͸௥͍ࠐΈ͕ඞཁ
9. ಈըϑΝΠϧ࠶ੜͰͷ໰୊఺ ɾΠϯλʔωοτ্ͷmp4ϑΝΠϧ ɾ਺ඵʙ਺ेඵͷμ΢ϯϩʔυ࣌ؒ ɾWiFi͸ͦΕ΄ͲετϨε͕ͳ͍ ɾ4GͰ͸ݟΔʹת͑ͳ͍
10. ετϦʔϛϯάͤ͞Δඞཁ͕͋Δ →HTTP Live Streaming
11. HTTP Live StreamingʢHLSʣͱ͸ʁ ɾถΞοϓϧʹΑͬͯ։ൃ͞Εͨಈը഑৴ٕज़ ɾ௨ৗͷHTTPαʔόΛར༻ ɾϏοτϨʔτͷҟͳΔෳ਺ͷ୅ସετϦʔϜΛαϙʔτ ɾΫϥΠΞϯτ͸ωοτϫʔΫଳҬͷมߋʹԠͯ͡ɺ ɹΠϯςϦδΣϯτʹετϦʔϜ੾Γସ͕͑Մೳ ɾAVPlayerͰରԠ
12. HTTP Live StreamingʢHLSʣͱ͸ʁ ɾΠϯσοΫεϑΝΠϧʢ.m3u8 ϓϨΠϦετʣ ɾϝσΟΞηάϝϯτϑΝΠϧʢ.ts τϥϯεϙʔτετϦʔϜϑΝΠϧ) ϚελʔϓϨΠϦετ .m3u8 ϝσΟΞϓϨΠϦετ .m3u8 τϥϯεϙʔτ ετϦʔϜϑΝΠϧ .ts τϥϯεϙʔτ ετϦʔϜϑΝΠϧ .ts τϥϯεϙʔτ ετϦʔϜϑΝΠϧ .ts ϝσΟΞϓϨΠϦετ .m3u8 τϥϯεϙʔτ ετϦʔϜϑΝΠϧ .ts τϥϯεϙʔτ ετϦʔϜϑΝΠϧ .ts τϥϯεϙʔτ ετϦʔϜϑΝΠϧ .ts ϝσΟΞϓϨΠϦετ .m3u8 τϥϯεϙʔτ ετϦʔϜϑΝΠϧ .ts τϥϯεϙʔτ ετϦʔϜϑΝΠϧ .ts τϥϯεϙʔτ ετϦʔϜϑΝΠϧ .ts
13. HTTP Live StreamingʢHLSʣͱ͸ʁ #EXTM3U #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=400000,RESOLUTION=480x270 https://xxxxxxxxxxxxx.cloudfront.net/main/teststream_a_low.m3u8 #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=400000,RESOLUTION=480x270 https://xxxxxxxxxxxxx.cloudfront.net/backup/teststream_b_low.m3u8 #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1000000,RESOLUTION=960x540 https://xxxxxxxxxxxxx.cloudfront.net/main/teststream_a_mid.m3u8 #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1000000,RESOLUTION=960x540 https://xxxxxxxxxxxxx.cloudfront.net/backup/teststream_b_mid.m3u8 #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2000000,RESOLUTION=1280x720 https://xxxxxxxxxxxxx.cloudfront.net/main/teststream_a_high.m3u8 #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2000000,RESOLUTION=1280x720 https://xxxxxxxxxxxxx.cloudfront.net/backup/teststream_b_high.m3u8 ϚελʔϓϨΠϦετ
14. ഑৴·Ͱͷ࢓૊Έ
15. ΞϓϦ࢓༷ ɾࡱӨͯ͠Ξοϓϩʔυʢmp4ϑΝΠϧʣ ɾλΠϜϥΠϯͰࢹௌ →HLSܗࣜʹม׵͢Δ࢓૊Έ͕ඞཁ ʢmp4→m3u8+tsʣ
16. γεςϜઃܭʢAWS࢖༻ʣ App APIαʔό ετϨʔδ&CDN EC2 RDS Lambda Elastic Transcoder Cognito S3 Cloud Front ϝσΟΞίϯόʔτ Ξοϓϩʔυ REST ೝূ ίϯςϯπࢀর Πϕϯτ ىಈ mp4→m3u8+ts
17. ɾS3 Πϯλʔωοτ༻ͷετϨʔδ ɾLambda ΠϕϯτۦಈܕͷαʔόʔϨείϯϐϡʔςΟϯάϓϥοτϑΥʔϜ ɾElastic Transcoder Ϋϥ΢υͷϝσΟΞม׵αʔϏε ɾCloudFront άϩʔόϧͳίϯςϯπ഑৴ωοτϫʔΫ γεςϜઃܭʢओͳ࢖༻ίϯϙʔωϯτʣ
18. γεςϜઃܭʢϝσΟΞม׵ʣ App ετϨʔδ&CDN Lambda Elastic Transcoder S3 Cloud Front ϝσΟΞίϯόʔτ 1. Ξοϓϩʔυ 4.ίϯςϯπࢀর 2.Πϕϯτ 2.ىಈ 3. mp4→m3u8+ts 1. ΞϓϦ͕S3ʹΞοϓϩʔυʢS3 API࢖༻ʣ 2. Lambda͕S3্ͷmp4ϑΝΠϧ࡞੒Λݕ஌ɺ ɹElastic TranscoderΛىಈ 3. Elastic Transcoder ͸mp4ϑΝΠϧ͔Β ɹෳ਺ଳҬ෼ͷm3u8+tsϑΝΠϧΛ࡞੒ 4. Cloud Front Ͱ͸S3্ͷm3u8+tsϑΝΠϧΛ ɹΠϯλʔωοτ഑৴
20. γεςϜͰߟ͑Δ͜ͱ ͷॏཁੑ
21. ߹ಉձࣾϩʔϥϋ΢ε εϚʔτϑΥϯΞϓϦ։ൃ΍Γ·͢ iOS Android αʔόαΠυʢAWS౳ʣ SPA ͓࢓ࣄͷґཔ͸͓ؾܰʹ
22. Laura House