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

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

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

https://nodefest.jp/2018/

Chrome 68 is now stable

HTTP Sites Marked as "Not Secure”

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

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

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

How to use Picture in Picture?

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

chrome://flags

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

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

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

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

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

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

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

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

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

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

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

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

videoλάʹcontrolsଐੑ෇͚Δ͚ͩ controls attribute

͜ΕΛΫϦοΫ

͜ΕΛΫϦοΫ

No content

MediaStreams are NOT supported!

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

λΠτϧςΩετ

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

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

http://bit.ly/2MBnEQB

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

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

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