ChromeでもPicture in Picture / Picture in Picture on Chrome

フロントエンド 百物語( https://kfug.connpass.com/event/93822/ )でGoogleChromeに追加されたPicture in Picture APIの話をしました。

Transcript

1. ChromeͰ΋ Picture in Picture ฏ໺ ণ࢜(@shisama) ϑϩϯτΤϯυ ඦ෺ޠ 2018/08/12
2. { "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter": "@shisama_", "github": “shisama” } }
3. ࣍ճ։࠵͸·ܾͩ·ͬͯͳ͍͚Ͳɺ
   ৗʹొஃऀɾձ৔ఏڙͯͩ͘͠͞ΔํΛ
   ืूதͰ͢ʂ
   ڵຯ͋Δํ͸ͥͻͱ΋͓ئ͍͠·͢ʂ
4. https://nodefest.jp/2018/
5. Chrome 68 is now stable
6. HTTP Sites Marked as "Not Secure”
7. Not SecureͳWebΛ΍ͬͯΔํʑ͕য͍ͬͯΔ๣Βɺ ͋Δػೳ͕experimentalͰ௥Ճ͞Ε·ͨ͠
8. https://wicg.github.io/picture-in-picture/ WICGʹ࢓༷͸্͕͍ͬͯ·͢
9. What is Picture in Picture? :PV5VCFΞϓϦͱ͔Ͱ͓ͳ͡Έͷ
   ಈըΛখ૭දࣔ͢Δ΍ͭ
10. How to use Picture in Picture?
11. Chrome version >=68 ͍͔ͭ͘ͷflagΛEnabledʹ͢Δ Canary(70)Ͱ͸DefaultͰOK API How to use Picture in Picture?
12. chrome://flags
13. document.pictureInPictureEnabled Picture in Picture͕࢖͑Δ͔Ͳ͏͔booleanͰ஋ Λ͍࣋ͬͯΔϓϩύςΟ document.pictureInPictureElement Picture in Pictureͷཁૉ API
14. video.requestPictureInPicture() Picture in PictureΛ༗ޮʹ͢Δ document.exitPictureInPicture() Picture in PictureΛղআ͢Δ API
15. JavaScript pipButton.hidden = !document.pictureInPictureEnabled; pipButton.addEventListener('click', function() { if (!document.pictureInPictureElement) { video.requestPictureInPicture() .catch(error => { alert('failed to request'); }); } else { document.exitPictureInPicture() .catch(error => { alert('failed to exit'); }); } }); http://bit.ly/2MBnEQB
16. enterpictureinpicture Picture in Picture͕༗ޮʹͳΔͱ͖ leavepictureinpicture Picture in PictureΛղআ͞ΕΔͱ͖ resize Picture in Pictureͷwindow͕resize͞Εͨͱ͖ Event
17. Javascript video.addEventListener(‘enterpictureinpicture', (event) => { if (!confirm('Enable Picture in Picture?')) { document.exitPictureInPicture(); } }); video.addEventListener(‘leavepictureinpicture', (event) => { windowSize.textContent = ''; alert('Leave Picture in Picture!'); }); http://bit.ly/2MBnEQB
18. Javascript video.requestPictureInPicture() .then((pipWindow) => { pipWindow.addEventListener('resize', (e) => { const {width, height} = e.target; windowSize.textContent = `w: ${width} h: ${height}`; }); }).catch(error => { alert('failed to enable'); }); http://bit.ly/2MBnEQB
19. $(‘video’).requestPictureInPicture()Λ࣮ߦ
20. enterpictureinpictureΠϕϯτʹconfirmΛ࢓ࠐΜͰ͍·͢
21. Title Text SFTJ[F
    FWFOU resizeΠϕϯτ͕ൃՐ͞Ε͍ͯΔ
22. Title Text document.exitPictureInPicture()Λ࣮ߦ͢Δͱऴྃ
23. leavepictureinpictureΠϕϯτʹ࢓ࠐΜͩalert͕࣮ߦ͞ΕΔ
24. ࣮͸JavaScriptΛ࢖Θͳͯ͘΋ Picture in PictureͰ͖ΔΜͰ͢
25. videoλάʹcontrolsଐੑ෇͚Δ͚ͩ <video controls src=“./ sample.mp4”> controls attribute
26. ͜ΕΛΫϦοΫ
27. ͜ΕΛΫϦοΫ
29. MediaStreams are NOT supported!
30. ࣮͸Safari 10͔Β Picture in PictureͰ͖ΔΜͰ͢
31. λΠτϧςΩετ
32. Safariʹ΋API͕༻ҙ͞Ε͍ͯΔ Chromeͱ͸ผͰSafariಠࣗ ChromeͷAPIͱࠞࡏ͸Մೳ API
33. Safari൛ if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") { // Toggle PiP when the user clicks the button. pipButton.addEventListener(“click",(event) => { const mode = video.webkitPresentationMode; video.webkitSetPresentationMode(mode === "picture-in- picture" ? "inline" : "picture-in-picture"); }); } else { // Chrome༻ίʔυ } http://bit.ly/2MBnEQB
34. http://bit.ly/2MBnEQB
35. Picture in Picture API͕௥Ճ͞Εͨ ·ͩExperimentalͳػೳ controlsଐੑ෇͚Δ͚ͩͰ΋OK SafariͰ΋Ͱ͖Δ͚ͲAPI͸ผ ·ͱΊ
36. Picture In Picture (PiP) | Web | Google Developers Picture-in-Picture Mode Now Working on Desktop Google Chrome 68+ ͓͍ɺChromeͰPicture In PictureͰ͖ΔΑ͏ʹͳͬͨͧ(2018/04/15) The Picture-in-Picture API – Arnelle's Blog Adding Picture in Picture to Your Safari Media Controls | Apple Developer Documentation ࢀߟ
37. Thanks. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ