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
   

   View Slide

2. {
   "about": {
   "name": "Masashi Hirano",
   "works": "Weblio, Inc.",
   "twitter": "@shisama_",
   "github": “shisama”
   }
   }
   

   View Slide

3. ࣍ճ։࠵͸·ܾͩ·ͬͯͳ͍͚Ͳɺ
   ৗʹొஃऀɾձ৔ఏڙͯͩ͘͠͞ΔํΛ
   ืूதͰ͢ʂ
   ڵຯ͋Δํ͸ͥͻͱ΋͓ئ͍͠·͢ʂ
   

   View Slide

4. https://nodefest.jp/2018/
   

   View Slide

5. Chrome 68 is now stable
   

   View Slide

6. HTTP Sites Marked as "Not Secure”
   

   View Slide

7. Not SecureͳWebΛ΍ͬͯΔํʑ͕য͍ͬͯΔ๣Βɺ
   ͋Δػೳ͕experimentalͰ௥Ճ͞Ε·ͨ͠
   

   View Slide

8. https://wicg.github.io/picture-in-picture/
   WICGʹ࢓༷͸্͕͍ͬͯ·͢
   

   View Slide

9. What is Picture in Picture?
   :PV5VCFΞϓϦͱ͔Ͱ͓ͳ͡Έͷ
   ಈըΛখ૭දࣔ͢Δ΍ͭ
   

   View Slide

10. How to use
    Picture in Picture?
    

    View Slide

11. Chrome version >=68
    ͍͔ͭ͘ͷflagΛEnabledʹ͢Δ
    Canary(70)Ͱ͸DefaultͰOK
    API
    How to use Picture in Picture?
    

    View Slide

12. chrome://flags
    

    View Slide

13. document.pictureInPictureEnabled
    Picture in Picture͕࢖͑Δ͔Ͳ͏͔booleanͰ஋
    Λ͍࣋ͬͯΔϓϩύςΟ
    document.pictureInPictureElement
    Picture in Pictureͷཁૉ
    API
    

    View Slide

14. video.requestPictureInPicture()
    Picture in PictureΛ༗ޮʹ͢Δ
    document.exitPictureInPicture()
    Picture in PictureΛղআ͢Δ
    API
    

    View Slide

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
    

    View Slide

16. enterpictureinpicture
    Picture in Picture͕༗ޮʹͳΔͱ͖
    leavepictureinpicture
    Picture in PictureΛղআ͞ΕΔͱ͖
    resize
    Picture in Pictureͷwindow͕resize͞Εͨͱ͖
    Event
    

    View Slide

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
    

    View Slide

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
    

    View Slide

19. $(‘video’).requestPictureInPicture()Λ࣮ߦ
    

    View Slide

20. enterpictureinpictureΠϕϯτʹconfirmΛ࢓ࠐΜͰ͍·͢
    

    View Slide

21. Title Text
    SFTJ[FFWFOU
    resizeΠϕϯτ͕ൃՐ͞Ε͍ͯΔ
    

    View Slide

22. Title Text
    document.exitPictureInPicture()Λ࣮ߦ͢Δͱऴྃ
    

    View Slide

23. leavepictureinpictureΠϕϯτʹ࢓ࠐΜͩalert͕࣮ߦ͞ΕΔ
    

    View Slide

24. ࣮͸JavaScriptΛ࢖Θͳͯ͘΋
    Picture in PictureͰ͖ΔΜͰ͢
    

    View Slide

25. videoλάʹcontrolsଐੑ෇͚Δ͚ͩ
    sample.mp4”>
    controls attribute
    

    View Slide

26. ͜ΕΛΫϦοΫ
    

    View Slide

27. ͜ΕΛΫϦοΫ
    

    View Slide

28. View Slide

29. MediaStreams are NOT supported!
    

    View Slide

30. ࣮͸Safari 10͔Β
    Picture in PictureͰ͖ΔΜͰ͢
    

    View Slide

31. λΠτϧςΩετ
    

    View Slide

32. Safariʹ΋API͕༻ҙ͞Ε͍ͯΔ
    Chromeͱ͸ผͰSafariಠࣗ
    ChromeͷAPIͱࠞࡏ͸Մೳ
    API
    

    View Slide

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
    

    View Slide

34. http://bit.ly/2MBnEQB
    

    View Slide

35. Picture in Picture API͕௥Ճ͞Εͨ
    ·ͩExperimentalͳػೳ
    controlsଐੑ෇͚Δ͚ͩͰ΋OK
    SafariͰ΋Ͱ͖Δ͚ͲAPI͸ผ
    ·ͱΊ
    

    View Slide

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
    ࢀߟ
    

    View Slide

37. Thanks.
    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    

    View Slide