Re: [media-and-entertainment] Reflowable Video Content (#102)

Two separable subtopics of this issue are:

1. HTML5, e.g., exploring the utilization of [CSS Media Queries](https://www.w3.org/TR/mediaqueries-5/) with the `media` attribute on those `<source>` elements contained by `<video>` elements
2. video container and streaming technologies

With respect to the first subtopic, HTML5, here is a first example which depicts providing different video sources for selection based on devices', e.g., smartphones', instantaneous orientations:

```xml
<video>
  <source media="(orientation:portrait)" src="portrait.mp4" />
  <source media="(orientation:landscape)" src="landscape.mp4" />
</video>
```

Here is a second example which depicts providing different video sources for selection based on instantaneous widths:

```xml
<video>
  <source media="(width > 800px)" src="wide.mp4" />
  <source media="(width <= 800px)" src="normal.mp4" />
</video>
```

The [`width`](https://www.w3.org/TR/mediaqueries-5/#descdef-media-width) media feature describes the width of the targeted display area of the output device. It would be useful to be able to express or refer to the width of the containing `<video>` element. Brainstorming, we could introduce new features for these purposes: `element-width` and `element-height`. This might resemble:

```xml
<video>
  <source media="(element-width > 800px)" src="wide.mp4" />
  <source media="(element-width <= 800px)" src="normal.mp4" />
</video>
```

Here is a third example which depicts providing different video sources for selection based on whether a device is a monochrome e-ink device, a color e-ink device, or some other device.

```xml
<video>
  <source media="(monochrome) and (update:slow)" src="monochrome-slow.mp4" />
  <source media="(color) and (update:slow)" src="color-slow.mp4" />
  <source media="(color) and (update:fast)" src="color-fast.mp4" />
</video>
```

With respect to the second subtopic, video envelope and streaming technologies, these technologies could provide some or all of those features possible with source selection based on [CSS Media Queries](https://www.w3.org/TR/mediaqueries-5/) to playback devices without any HTML5 expressiveness being required – at least that functionality for dynamically selecting video tracks based on instantaneous video width and height – enabling reflowable video content.

-- 
GitHub Notification of comment by AdamSobieski
Please view or discuss this issue at https://github.com/w3c/media-and-entertainment/issues/102#issuecomment-1685156468 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 20 August 2023 02:14:26 UTC