YouTube Engineering and Developers Blog

Control your 360 videos with the YouTube IFrame Player API

Wednesday, August 1, 2018

360° videosCardboard mode360° live streamsimproved video qualitySpherical Video Control APIIFrame Player SDK #alienButton { position: relative; display:block; margin: 15px auto; border-width: 0; outline: none; border-radius: 10px; box-shadow: 0 3px 6px rgba(0, 0, 0, .24); background-color: #f00; color: #fff; transition: background-color .2s; } #alienButton:hover { background-color: #F44336; } #alienButton:active { box-shadow: 0 2px 6px rgba(0, 0, 0, .24); background-color: #EF9A9A; } #alienButton:disabled { box-shadow: 0 1px 3px rgba(0, 0, 0, .24); background-color: #9E9E9E; } #alienButton span { display: block; padding: 12px 24px; font-size: 20px; } Google Spotlight Stories

<div id="player"></div>
<script src="https://www.youtube.com/iframe_api"></script>

<script>
    let player;
    let panStarted = false;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            videoId: 'FAtdv94yzp4',
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }

    // Start animation when video starts playing.
    function onPlayerStateChange(event) {
        if (event.data == 1 && !panStarted) {
            requestAnimationFrame(panVideo);
            panStarted = true;
        }
    }

    function panVideo() {
        // 20 seconds per rotation.
        const yaw = (performance.now() / 1000 / 20 * 360) % 360;
        // 2 up-down cycle per rotation.
        const pitch = 20 * Math.sin(2 * yaw / 360 * 2 * Math.PI);
        player.setSphericalProperties({
            yaw: yaw,
            pitch: pitch
        });
        requestAnimationFrame(panVideo);
    }
</script>

Yingyu Yao, Software Engineer, recently watched "The Earth's Internet: How Fungi Help Plants Communicate". // Initialize the iframe embed's API. const tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; const firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); let ytplayer; window.onYouTubeIframeAPIReady = function() { ytplayer = new YT.Player('alien-iframe-embed', { events: { 'onStateChange': onPlayerStateChange, }, }); } // Disable the button by default. // When video goes into PLAYING state, enable the button. const alienButton = document.getElementById("alienButton"); alienButton.disabled = true; window.onPlayerStateChange = function(event) { if (event.data == 1) { alienButton.disabled = false; } } // This function constructs a polynomial using a list of input weights. function poly(weights) { return function(t) { let val = 0; let x = 1; for (let w of weights) { val += x * w; x *= t; } return val; } } // These are hand fitted polynomials that tracks the movement of the alien // throughout the video. // For yaw, we had to change between several different polynomial to keep // things performant. // For pitch, a single polynomial over the entire duration of the video // was sufficient. const yawTrack = function() { const yaw11 = poly([-3.04631909e+03, 1.19219406e+03, -1.88145883e+02, 1.55743418e+01, -7.41740578e-01, 2.10484076e-02, -3.51373142e-04, 3.18408210e-06, -1.20830410e-08 ]); const yaw58 = poly([2.14359903e+08, -1.95479428e+07, 7.41961802e+05, -1.50035469e+04, 1.70475072e+02, -1.03194757e+00, 2.60000087e-03 ]); const yaw74 = poly([-1.46264739e+06, 9.00087573e+04, -2.28526587e+03, 3.06432819e+01, -2.28920640e-01, 9.03520918e-04, -1.47226423e-06 ]); const yaw129 = poly([1.39044612e+05, -3.12771539e+03, 2.33594151e+01, -5.81151009e-02 ]); const yaw146 = poly([5.35468540e+04, -9.57843251e+02, 4.42486931e-01, 9.96639354e-02, -8.72828330e-04, 3.01098624e-06, -3.82035076e-09 ]); const yaw209 = poly([-1.00415969e+05, -2.56340987e+03, 7.66464454e+01, -6.85017122e-01, 2.88569970e-03, -5.93185145e-06, 4.80999119e-09 ]); return function(t) { let val; if (t < 11) { val = 0; } else if (t < 58) { val = yaw11(t); } else if (t < 74) { val = yaw58(t); } else if (t < 129) { val = yaw74(t); } else if (t < 146) { val = yaw129(t); } else if (t < 209) { val = yaw146(t); } else { val = yaw209(t); } return (val % 360 + 360) % 360; }; }(); const pitchTrack = poly([-1.45284489e+00, 1.60253082e+00, -2.48931512e-01, 1.19719311e-02, -2.92248673e-04, 4.13528625e-06, -3.56801619e-08, 1.89765163e-10, -6.05548401e-13, 1.06076048e-15, -7.82844242e-19 ]) // When the button is clicked, we starts an animation motion. // It essentially "drags" the view toward the target using // a predefined spring constant. alienButton.onclick = function() { const springConstant = -0.8; let previousYaw = null; let previousPitch = null; let initialTime = null; let animate = false; function onAnimationFrame() { const currentSetting = ytplayer.getSphericalProperties(); const currentYaw = currentSetting.yaw; const currentPitch = currentSetting.pitch; const currentTime = performance.now(); const videoTime = ytplayer.getCurrentTime(); if (!initialTime) { if (currentSetting.yaw != null) { initialTime = currentTime; animate = true; alienButton.disabled = true; } } if (animate) { const targetYaw = yawTrack(videoTime); const targetPitch = pitchTrack(videoTime); let yawDiff = targetYaw - currentYaw; if (yawDiff > 180) { yawDiff -= 360; } else if (yawDiff < -180) { yawDiff += 360; } const pitchDiff = targetPitch - currentPitch; if (Math.max(Math.abs(yawDiff), Math.abs(pitchDiff)) < 1) { animate = false; } deltaTime = (currentTime - initialTime) / 1000; let newYaw = targetYaw - yawDiff * Math.exp(springConstant * deltaTime); newYaw = (newYaw % 360 + 360) % 360; let newPitch = targetPitch - pitchDiff * Math.exp(springConstant * deltaTime); ytplayer.setSphericalProperties({ yaw: newYaw, pitch: newPitch, // Keeps the demo working on phones. // In practical use, calling this once is sufficient. // We are just piggybacking it here to keep things simple. enableOrientationSensor: false }); } if (animate) { requestAnimationFrame(onAnimationFrame); } else { alienButton.disabled = false; initialTime = null; } } return onAnimationFrame; }();

Making high quality video efficient

Tuesday, April 24, 2018

Figure 1: HTTP-based Adaptive Video Streaming.

Figure 2: Rate-quality curves of a video chunk for a given video codec at different encoding resolutions.

streaming bandwidthdelivered video quality1

Figure 3: Efficient streaming scenario before and after our proposal

Figure 4: For a given resolution 720p for example, the playback distribution across resolutions can be estimated from the probability density function of bandwidth. Partitioning the bandwidth using encoding bitrates of the different representations, the probability of watching a representation can then be estimated with the corresponding area under the bandwidth curve.

Fig.5 Our system for encoder optimization

-- Balu Adsumilli, Steve Benting, Chao Chen, Anil Kokaram, and Yao-Chung Lin1Encoding Bitrate Optimization Using Playback Statistics for HTTP-based Adaptive Video Streaming

Resonance Audio: Multi-platform spatial audio at scale

Monday, November 6, 2017

Cross-posted from the VR Blog
Posted by Eric Mauskopf, Product Manager

Resonance Audio Experience spatial audio in our Audio Factory VR app for Daydream and SteamVR Performance that scales on mobile and desktop

Using geometry-based reverb by assigning acoustic materials to a cathedral in Unity Multi-platform support for developers and sound designersWeb Audio API

DAW plugin for sound designers to monitor audio destined for YouTube 360 videos or apps developed with the SDK Model complex Sound Environments Cutting edge features

Controlling sound wave directivity for an acoustic guitar using the SDKdeveloper siteGitHub .blogimg1 img { width: 100%; border: 0; margin: 0; padding: 20px 0 10px 0; } .blogimg2 img { width: 100%; border: 0; margin: 0; padding: 20px 0 10px 0; } .blogimg3 img { width: 100%; border: 0; margin: 0; padding: 20px 0 10px 0; }

Variable speed playback on mobile

Thursday, September 7, 2017

Now, it’s here!Speed watchingspeed listeningspeed readingchoreographya guitar strumming patterntime stretchingchipmunk effectphase vocoderSonicbuilt in playback rateconfigurable time stretchingkey frame
Posted by Pallavi Powale, Software Engineer, recently watched “Dramatic Chipmunk” at 0.5x speed.

Blur select faces with the updated Blur Faces tool

Monday, August 21, 2017

face blurringcustom blurring english_us_short (3).gif

Blur Faces tool

Custom Blurring featureRyan Stevens, Software Engineer, recently watched 158,962,555,217,826,360,000 (Enigma Machine), and Ian Pudney, Software Engineer, recently watched Wood burning With Lightning. Lichtenberg Figures!

Visualizing Sound Effects

Thursday, March 23, 2017

360 million peoplecaptionsautomated captionsannouncedhere Click the CC button to see the sound effect captioning system in actionhereNoah Wang, software engineer, recently watched "The Expert (Short Comedy Sketch)."

Improving VR videos

Tuesday, March 14, 2017

360-degree videosVR (3D 360) videos360 live streaming and spatial audioa dedicated YouTube VR appin a joint effort between YouTube and Daydreamvisual acuityBetter Projectionsequirectangular projection

It has high quality at the poles (top and bottom of image) where people don’t look as much – typically, sky overhead and ground below are not that interesting to look at.

It has lower quality at the equator or horizon where there is typically more interesting content.

It has fewer vertical pixels for 3D content.

A straight line motion in the real world does not result in a straight line motion in equirectangular projection, making videos hard to compress.

Drawbacks of equirectangular (EQ) projectionskybox

Equirectangular projection saturation map

Cubemap projection saturation mapEqui-angular CubemapEAC

Equi-angular Cubemap - EAC div#EQvsEAC { width: 60vw; height: 60vw; max-width: 640px; max-height: 360px; overflow: hidden; } div#EQvsEAC figure { background-image: url(https://4.bp.blogspot.com/-LksAiIjxW3E/WMcyYPPjUVI/AAAAAAAAASE/xIcJBPIg4RAEDlIrUBpJdMV1-K2tORJJQCLcB/s1600/EAC.png); background-size: cover; position: relative; font-size: 0; width: 100%; height: 100%; margin: 0; } div#EQvsEAC figure > img { position: relative; width: 100%; } div#EQvsEAC figure div { background-image: url(https://4.bp.blogspot.com/-IBWF3S0VTvs/WMcyYOj4YVI/AAAAAAAAASA/RGvPl1MiyFE312oFPfvZ4saPKkPyF9lWgCLcB/s1600/EQ.png); background-size: cover; position: absolute; width: 50%; box-shadow: 2px 0px white; overflow: hidden; bottom: 0; height: 100%; } input[type=range]{ -webkit-appearance:none; -moz-appearance:none; position: relative; top: -2rem; left: -1%; background-color: rgba(255,255,255,0.1); width: 102%; } input[type=range]:focus { outline: none; } input[type=range]:active { outline: none; } input[type=range]::-moz-range-track { -moz-appearance:none; height:20px; width: 98%; background-color: rgba(255,255,255,0.1); position: relative; outline: none; } input[type=range]::active { border: none; outline: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width: 20px; height: 20px; background: white; border-radius: 0; } input[type=range]::-moz-range-thumb { -moz-appearance: none; width: 20px; height: 20px; background: white; border-radius: 0; } input[type=range]:focus::-webkit-slider-thumb { background: gray; } input[type=range]:focus::-moz-range-thumb { background: gray; }

Creating Industry Standardsmesh format draft standardupload recommendationsAnjali Wheeler, Software Engineer, recently watched "Disturbed - The Sound Of Silence."

Engineering and Developers Blog