Testing Picture-in-Picture for videos in Firefox 69 Beta and Developer Edition

Firefox has an experimental new UI feature in Firefox 69 Beta and Developer Edition – and Firefox engineers are looking for feedback on the implementation. Picture in Picture in the browser lets you pop a video out from where it’s being played into a special kind of window that’s always on top. Then you can move that window around or resize it however you need! Let us know what you think.
The post Testing Picture-in-Picture for videos in Firefox 69 Beta and Developer Edition appeared first on Mozilla Hacks – the Web developer blog.

Link: https://hacks.mozilla.org/2019/07/testing-picture-in-picture-for-videos-in-firefox-69/

Native Video on the Web

TIL about the HLS video format:

HLS stands for HTTP Live Streaming. It’s an adaptive bitrate streaming protocol developed by Apple. One of those sentences to casually drop at any party. Äh. Back on track: HLS allows you to specify a playlist with multiple video sources in different resolutions. Based on available bandwidth these video sources can be switched and allow adaptive playback.

This is an interesting journey where the engineering team behind Kitchen Stories wanted to switch away from … Read article
The post Native Video on the Web appeared first on CSS-Tricks.

Link: https://engineering.kitchenstories.io/our-road-to-native-videos-on-the-web-22ffb807657b

Firefox 66 to block automatically playing audible video and audio

Unsolicited volume can be a great source of distraction and frustration for users of the web. So we are making changes to how Firefox handles playing media with sound and we want to make sure web developers are aware of this new audio autoplay blocking default. With the release of Firefox 66, now in Firefox Beta/Developer Edition, the browser will block audible audio and video, and will allow a site to play audio or video aloud via the HTMLMediaElement API only once the user has initiated the audio.
The post Firefox 66 to block automatically playing audible video and audio appeared first on Mozilla Hacks – the Web developer blog.

Link: https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/

Algorithmic Layouts

Don’t miss this video by Heydon that digs into CSS layouts. It’s great how he combines fundamental knowledge, like the way elements flow, wrap, and can have margin with new layout methods like flexbox and grid (with specific examples). Of particular note is the clear demonstration of how flexbox and grid help avoid the need to constantly intervene with media queries in order to affect responsive layouts.

So, in place of this…
.sidebar {
float: left;
width: 20rem;
}

.not-sidebar
… Read article
The post Algorithmic Layouts appeared first on CSS-Tricks.

Link: https://www.youtube.com/watch?v=qOUtkN6M52M

Into the Depths: The Technical Details Behind AV1

AV1, the next generation royalty-free video codec from the Alliance for Open Media leapfrogs the performance of VP9 and HEVC. The AV1 format is and will always be royalty-free with a permissive FOSS license. In this video presentation, Mozilla’s Nathan Egge dives deep into the technical details of the codec and its evolution.
The post Into the Depths: The Technical Details Behind AV1 appeared first on Mozilla Hacks – the Web developer blog.

Link: https://hacks.mozilla.org/2018/11/into-the-depths-the-technical-details-behind-av1/

Recent Videos!

I’ve recorded a decent number of videos lately, most of which are pairing with someone and digging into a topic as I glean as much information as I can! Several of these are sponsored, in that they are a part of an advertising package. Hopefully, you know me well enough that I don’t work with companies I don’t like or that sell something I don’t think you’d be good buying, but hey, heads up.

Phil Hawksworth and I do…
The post Recent Videos! appeared first on CSS-Tricks.

Link: https://css-tricks.com/recent-videos/