Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Masashi Hirano

August 12, 2018
Tweet

More Decks by Masashi Hirano

Other Decks in Programming

Transcript

  1. ChromeͰ΋
    Picture in Picture
    ฏ໺ ণ࢜(@shisama)
    ϑϩϯτΤϯυ ඦ෺ޠ 2018/08/12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Chrome 68 is now stable

    View full-size slide

  6. HTTP Sites Marked as "Not Secure”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. How to use
    Picture in Picture?

    View full-size slide

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

    View full-size slide

  12. chrome://flags

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. ͜ΕΛΫϦοΫ

    View full-size slide

  27. ͜ΕΛΫϦοΫ

    View full-size slide

  28. MediaStreams are NOT supported!

    View full-size slide

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

    View full-size slide

  30. λΠτϧςΩετ

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  35. 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 full-size slide

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

    View full-size slide