Permalink
Browse files

Add a playsinline attribute to <video>

Closes #1237. For most user agents this will be a no-op, but this gives
a standardized pragma for opting into inline behavior in iOS Safari.
  • Loading branch information...
domenic committed Jun 21, 2016
1 parent db361b6 commit 6e17d01489060988451fc6607089ef4e2d00bbfa
Showing with 32 additions and 6 deletions.
  1. +32 −6 source
View
38 source
@@ -29691,6 +29691,7 @@ interface <dfn>HTMLParamElement</dfn> : <span>HTMLElement</span> {
<dd><code data-x="attr-video-poster">poster</code></dd>
<dd><code data-x="attr-media-preload">preload</code></dd>
<dd><code data-x="attr-media-autoplay">autoplay</code></dd>
<dd><code data-x="attr-video-playsinline">playsinline</code></dd>
<dd><code data-x="attr-media-loop">loop</code></dd>
<dd><code data-x="attr-media-muted">muted</code></dd>
<dd><code data-x="attr-media-controls">controls</code></dd>
@@ -29705,6 +29706,7 @@ interface <dfn>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span> {
readonly attribute unsigned long <span data-x="dom-video-videoWidth">videoWidth</span>;
readonly attribute unsigned long <span data-x="dom-video-videoHeight">videoHeight</span>;
[<span>CEReactions</span>] attribute USVString <span data-x="dom-video-poster">poster</span>;
[<span>CEReactions</span>] attribute boolean <span data-x="dom-video-playsInline">playsInline</span>;
};</pre>
</dd>
</dl><!--TOPIC:HTML-->
@@ -29791,6 +29793,17 @@ interface <dfn>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span> {
video (typically one of the first non-blank frames) that gives the user an idea of what the video
is like.</p>
<p>The <dfn><code data-x="attr-video-playsinline">playsinline</code></dfn> is a <span>boolean
attribute</span>. If present, it serves as a hint to the user agent that the video ought to be
displayed "inline" in the document by default, constrained to the element's playback area, instead
of being displayed fullscreen or in an independent resizable window.</p>
<p class="note">The absence of the <code data-x="attr-video-playsinline">playsinline</code> does
not imply that the video will display fullscreen by default. Indeed, most user agents have chosen
to play all videos inline by default, and in such user agents the <code
data-x="attr-video-playsinline">playsinline</code> attribute has no effect.</p>
<div w-nodev>
<hr>
@@ -29960,12 +29973,15 @@ interface <dfn>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span> {
description tracks, and other additional data associated with the video stream, though such
features should, again, not interfere with the page's normal rendering.</p>
<p>User agents may allow users to view the video content in manners more suitable to the user
(e.g. fullscreen or in an independent resizable window). As for the other user interface
features, controls to enable this should not interfere with the page's normal rendering unless the
user agent is <span data-x="expose a user interface to the user">exposing a user interface</span>.
In such an independent context, however, user agents may make full user interfaces visible, even
if the <code data-x="attr-media-controls">controls</code> attribute is absent.</p>
<p>User agents may allow users to view the video content in manners more suitable to the user,
such as fullscreen or in an independent resizable window. User agents may even trigger such a
viewing mode by default upon playing a video, although they should not do so when the <code

This comment has been minimized.

Show comment
Hide comment
@enjikaka

enjikaka Jun 23, 2016

Encourage/enforce the same default behaviour in all browsers instead of having developers having to throw 20 attributes on an element for elements to behave the same across all browsers please.

@enjikaka

enjikaka Jun 23, 2016

Encourage/enforce the same default behaviour in all browsers instead of having developers having to throw 20 attributes on an element for elements to behave the same across all browsers please.

data-x="attr-video-playsinline">playsinline</code> attribute is specified. As with the other user
interface features, controls to enable this should not interfere with the page's normal rendering
unless the user agent is <span data-x="expose a user interface to the user">exposing a user
interface</span>. In such an independent viewing mode, however, user agents may make full user
interfaces visible, even if the <code data-x="attr-media-controls">controls</code> attribute is
absent.</p>
<p>User agents may allow video playback to affect system features that could interfere with the
user's experience; for example, user agents could disable screensavers while video playback is in
@@ -29976,6 +29992,10 @@ interface <dfn>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span> {
<p>The <dfn><code data-x="dom-video-poster">poster</code></dfn> IDL attribute must
<span>reflect</span> the <code data-x="attr-video-poster">poster</code> content attribute.</p>
<p>The <dfn><code data-x="dom-video-playsInline">playsInline</code></dfn> IDL attribute must
<span>reflect</span> the <code data-x="attr-video-playsinline">playsinline</code> content
attribute.</p>
</div>
<div class="example">
@@ -115555,6 +115575,7 @@ interface <dfn>External</dfn> {
<code data-x="attr-video-poster">poster</code>;
<code data-x="attr-media-preload">preload</code>;
<code data-x="attr-media-autoplay">autoplay</code>;
<code data-x="attr-video-playsinline">playsinline</code>;
<code data-x="attr-media-loop">loop</code>;
<code data-x="attr-media-muted">muted</code>;
<code data-x="attr-media-controls">controls</code>;
@@ -116639,6 +116660,11 @@ interface <dfn>External</dfn> {
<code data-x="attr-textarea-placeholder">textarea</code>
<td> User-visible label to be placed within the form control
<td> <a href="#attribute-text">Text</a>*
<tr>
<th> <code data-x="">playsinline</code>
<td> <code data-x="attr-video-playsinline">video</code>
<td> Encourage the user agent to display video content within the element's playback area
<td> <span>Boolean attribute</span>
<tr>
<th> <code data-x="">poster</code>
<td> <code data-x="attr-video-poster">video</code>

0 comments on commit 6e17d01

Please sign in to comment.