 You are tired I can fit it so I will cut to the chase media on the web matters and I'm not just saying it because I deeply believe in this Let me share some numbers with you Almost 40,000 years of video are watched every day in Chrome You may want to take some time to digest this 30% of all time on Chrome for Android is spent watching video and It is about 15% of all time on Chrome for Android. It is huge And I'm not the only one to have noticed media PWAs across the world have seen business impact Spotify globally and Ghana in India are both in great success and it's just the beginning In the next 20 minutes or so and GNI will work you through four topics We think will help you build great and modern media experiences We'll cover multitasking with picture-in-picture Bend with saving with the AV one video codec a brand new way of switching codec seamlessly and finally Playback quality predictability with the media capabilities API Let me tell you a little bit about myself first and how I work. I Love to multitask on my computers doing many things at the same time Browsing obviously writing some code sharing news on social media platforms Watching educational videos and so on. This is what I do on a daily basis and I'm quite sure I'm not the only one to do that But you may wonder Francois this looks cool, but are you good at it? Does that make you more productive? This does not matter. I love to do that and I want to be efficient at it, but it's not always easy For instance Watching a video while I'm coding How does that work? So first I have to open a separate YouTube window Move it to a corner of my screen and making sure other windows are not covering it and only then I can start to enjoy But can you imagine my frustration when window position are not remembered or when some new window open in the middle of my little video? But that's okay. That's okay because today a brand new web API called picture and picture sold at very specific use case Picture and picture also known as peep is a common features in television That allows users to watch video in a floating window always on top of other window So that they can keep an eye on what they're watching while interacting with other sites or applications The BBC website actually picture and picture a month ago, and they are quite happy with the earlier result they got Now like I said earlier, I like to write code. So let me show you some code To enter picture and picture on a video element you simply have to call request picture and picture on a video element and Because this call is asynchronous It will return a promise that can either resolve or reject and I explain why it can reject in a bit The important thing to notice here is that the user has to interact with the page first to be able to enter a picture and picture In this example, I've used the button Making this button a toggle button a toggle button. Sorry, it's quite straightforward By checking if the video element is not the document that picture and picture element in other words already in picture and picture I'll proceed as before if it is let's call document that exit picture and picture Requesting picture and picture may server may reject for several reasons The most common ones being the video metadata not loaded yet Picture and picture not supported by the platform or simply not allowed by the user The full list of reasons is available in the documentation updating your website when the video is playing and could be pictured picture is crucial and You may think that waiting for the request picture and picture promise to wait is good enough, but it is not What if the video enters picture and picture from another path for instance? What if the user click the browser context menu for instance or the browser trigger picture and picture Automatically like Chrome does on full screen video on Android This is why I strongly recommend you update your layout and enter and leave picture and picture event listeners Now having a 4k video playing in a small window may not be what you want So to adjust the quality of the picture and picture The video sorry based on the picture and picture window size You can simply check the width and height attribute of the picture and picture window available in the picture and picture event Too many picture and picture. I know Adding a resize event to this object would also let you know when the user resize the picture and picture window So that you can update the video quality By the way, Angie will walk you later on how to change seamlessly the video quality and the codec container to help with that and Finally defining the availability of your custom picture and picture button should be as easy as checking the boolean value of Document that picture and picture enable, but it is not because you want your website to be perfect So you'd also have to check if the HTML video attribute disabled picture and picture is present and Finally for real this time you'd have to check if the video is actually ready to play and only then you'd get a perfect Implementation for your custom picture and picture button in your media player I'm glad to say that we have shipped picture and picture API last month in Chrome 70 in Linux Mac and Windows Chrome OS and Android are coming soon and we're looking forward to see other browser vendors implement this API as well You'll find all documentation and sample units at this URL Now what if I tell you this is just the tip of the iceberg in Chrome 71 currently beta Will support media stream video in picture and picture These two little lines of JavaScript do what you think it does your webcam video stream in a picture and picture window and this already makes me happy and In case you're wondering Those are real fake glasses, but wait, there's more Soon a brand new web API calls screen capture will allow website in Chrome to capture a screen to a media stream for Recording or sharing over the network This API will enable a number of web application including screen sharing Imagine now if you combine this API with picture and picture Let's have a look at this code after getting the screen We've get me display media and the voice audio stream we get user media I create from scratch a new media stream that concerns the screen video stream Including my picture and picture window and my voice as the audio stream This code is simply gorgeous in my opinion. This is it. There's nothing more So let me show what this code does we'll show demo I've created just for you and Can we switch them up this so on the left? Is me Francois the hardcore gamer on the right? It's still me, but this time as a casual viewer and what you're gonna see on the left is me Sharing my screen including the picture and picture window while I'm playing the dino game So this is me. Hi mom and let's say If I'm not bad So like I said I'm a hardcore game. Okay. Sorry. I like So keep in mind that the code you've just seen with 10 more lines of JavaScript involving the media recorder API and some web sockets Are pretty much the entire code for this demo Okay, we switch back to the slice base The demo is available for you on glitch if you want to play with it later on Now some of you may have noticed that the picture and picture window contains only two buttons a Play post button and a close button. Those are blue there We've talked to other browser vendors interested in picture and picture about this and we're happy to share that the media session API We've talked about last year at Chrome. They submit will be used in a new feature to add and customize some actions to picture and picture window Think of seek backwards forward previous track next track and even new ones If you are already using it for your mobile website, this will come for free To illustrate these upcoming possibilities Imagine a web app that shows the poster image of a podcast show for instance in a picture and picture window All on top and use these window media controls to tailor the media experience. I Think that looks cool and this is coming as well So to summarize picture and picture is great for multitasking and in the near future It may also be used to record your screen with your webcam Or even to create a custom media center always on top of other windows that user can access easily. I think we all agree that picture and picture improves a lot the user experience in general and You know what else improves it a lot? Video codec and to talk about this let me introduce Andy Chang a software engineer working on video compression Thank you Francois. Hi everyone. I'm Andrew from Google's web ending Today, I'm going to share with you that a new generation video codec If you want was launched recently So we have three main goals for every one First off we want everyone to provide state-of-the-art compression efficiency among other codecs Secondly, we want everyone to be accessible by everyone. So we made it an open source project and it's royalty free Finally, we want to deploy everyone widely and quickly So before I jump into how we did or will do to achieve these goals Let me explain a little bit why video compression is important for users to visualize the importance of compression for video service Let me give you an example Using H.264 a five minutes HD compressed video will take about 300 megabyte on the other hand The uncompressed version will take about 25 gigabyte 80 times larger than the compressed version This means without video compression watching video online will eat up all your internet bandwidth Not to mention the sky skyrocket cost of storage on the cloud So more compression gives user a better user experience We have seen the proof of this with bp9 the predecessor of av1 YouTube did an comprehensive ab experiment When launching vp9 compared to h.264 performance improved in a number of ways Automatically result in higher watch time. This is due to vp9's outperforming coding efficiency With a v1 we have done it again A new generation codec provides 30% b-ray reduction over vp9 across a variety of visual qualities This means given the same quality Av1's video size will be 30% smaller than vp9 This project integrated over a hundred algorithm tools Including the technologies from open source projects like mozilla's dala project and sysco's sorrow project And again Av1 is an open source project and it's royalty free So it's development community Alliance for open media has attracted 40 companies to join And to contribute their technologies into av1 There are content providers streaming service providers and hardware companies Which covered a wide spectrum of the ecosystem for video on the web Having google, apple, microsoft and mozilla Means we can have av1 to work everywhere on the web platform So we have been working hard toward this goal in this quarter Av1 decoder is supported by chrome browser And we started serving video content from youtube Firefox and h Are also launched in the beta platform last month And we plan to integrate av1 with webRTC And deploy av1 into android platform in the following years hardware support is also under development First arriving in 2020 for TVs and mobile handsets For web developers using av1 is easy You simply need to code its type supportive function to make sure the browser supports av1 Then you can start playing the video So av1 is very exciting But running out av1 is not easy To ease the process of the codec transition A new change type function is supported from browser Which allows the browser to switch one codec to the other seamlessly So for example, when av1 is not performing on some low-end devices The stream service can always fall back to vp9 Which is less complex and may have higher support Here is a simple code for using change type So initially we added a source buffer using vp9 And later on we can call the change type function to switch to av1 Let me give you some demo about change type So we start playing video using h264 You can see that from the top left corner By clicking the button we can switch to av1 Yeah, now we are using av1 By clicking the button again Now we switch back to h264 You can tell there's a transition, right? I think this is really cool Let's go back to the slide This is a support slide where you can find information about If you want decoder and change type Please welcome back on stage Francois Who's going to talk about playback prediability with media capabilities API? Did you ever wish you could predict the future? I know I did Be some kind of fortune teller I personally would love to jump into my future Have a quick look and just come back Out of curiosity, I asked people around me what they would do with this kind of power Some said they would love to know if they would become grandparents Some would like to see if that project is going to be successful And some obviously would simply look for upcoming lottery numbers Now brace yourself In a sense The media capabilities API allows you to predict the future But only for a media playback on the web Until recently web developers had to realize solely on web API Such as is type spotted or can play type to discover whether media could be decoded While this told them whether media could be played at all It didn't provide an indication of whether the media playback Would drop lots of frame or rapidly drains device battery In the absence of the signal Developer he didn't have to create their own heuristic or just assume that if a device could play back a combination of codec and resolution It could do so smoothly and power efficiently For users with less capable devices this often led to very poor experience By using the media capabilities API today You can get more information about the client's video decoded performance and make an informed decision about which codec and resolution to deliver to the user In other words, it helps ensure adaptive video streaming only selects resolution that will play back smoothly on some specific device Here's how it works in chrome The media capabilities API use metrics from previous playback to predict whether future playback In the same codec and at the same resolution will be smoothly decoded When you ask this API about a specific media configuration, it will return a synchronously three booleans Is this configuration spotted? This is the same result returned by his type supported You can use it for instance to detect whether every one video codec is supported by the way Is playback going to be smooth? It is currently true if less than 10 percent of frame have been previously dropped for this media configuration Is playback going to be power efficient? Am I basically going to drain the device battery? It is true if more than 50 percent of frame have been decoded by the hardware for this media configuration Now warning, this is not some kind of magic API that will tell you what to play You are in control and have to make decision about which media configuration to play eventually based on the result of this API Speaking of results, YouTube experimented with the media capabilities API to prevent their adaptive between algorithms from selecting resolution That a device could not playback smoothly For users who were part of the experimental group, the meantime between web affairs, also known as MTBR Increased by 7.1 percent increased by 7.1% while the average resolution served to the aggregate group measured by video height only declined by 0.5%. These results, as obscure as maybe to some of you, basically show that some users on no end devices saw less frequently on YouTube the frustrating buffering animation. So just for that, thank you. The Media Coverage API is available today in Chrome, Firefox and Safari Tech Preview. As usual, you'll find all documentation and sample you need at this URL. Now, if you remember one thing from this talk about those features, it is that media on the web matters, and the web platform is the best place to serve efficient and delightful media experiences. One last thing, you can find all audio and video updates in Chrome by simply searching for Chrome media updates on your favorite search engine. This will allow you to stay up-to-date with the amazing media feature that Chrome is adding to the web platform every release. And with that, I humbly thank you for your time.