Abstract

This Profile defines requirements for playing videos and audios which are downloaded from web servers or which are pre-fetched and stored in terminals. Protecting media data and streaming are out of scope. When we need them, we will make a profile as an extension.

Status of this document

This specification was published by the Web-based Signage Business Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Contributor License Agreement (CLA) there is a limited opt-out and other conditions apply. Learn more about W3C Community and Business Groups.

Conformance

As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.

The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this document are to be interpreted as described in RFC2119. For readability, these words do not appear in all uppercase letters in this document. [RFC2119]

1 Introduction

This section is non-normative.

The "Architecture and Requirements for Web-based Signage Player" defines precise requirements for web-based signage players.

The Architecture and Requirements for Web-based Signage Player consist of a number of profiles. Basically, web-based signage is based on the core profile. As necessary, web-based signage systems adopt the other profiles additionally.

These profiles are also intended to be used as product specification sheets of web-based signage products for vendors, RFP (request for proposal) used by the signage operators to request SDCs (Systems Development Corporations) to develop a web-based signage system , etc.

Through these activities, the Web-based Signage Business Group aims to:

We believe that web-based signage contribute to cost-efficiencies and rich functionalities in the digital signage industry. As a result, we hope that the digital signage industry will grow up increasingly.

2 Scope and terminology

Web-based signage is digital signage whose contents are created using web-technologies. Besides, it has a capability of connecting to a network. It is not a matter whether the network is the Internet or not. The web-based signage includes the terminal in an intranet.

A player plays contents for web-based signage. It is a set of an application and a runtime. This document is not aimed for limitation of underlying hardware and the operating system. Basically, web-based signage is based on the core profile. As necessary, web-based signage systems adopt the other profiles additionally.

An application is comprised of the software such as frameworks or the libraries for signage. An application is a set of JavaScript programs and style sheets and HTML. An application is run on a runtime, fetches contents form a content server, then plays the contents appropriately. The architecture and the functions of the applications will be prescribed as the features for web-based signage.

A player uses the functions and the expressions which the underlying runtime provides. Basically, they are specified in HTML5 in wide sense. This document does not restrict the use of the functions which are out of scope of this document. Applications may use such functions and expressions.

A runtime is a common web browser (e.g. webkit-based browsers, Firefox, IE, etc.) or a web-based application runtime (e.g. Firefox OS, Tizen, Windows 8, etc.) installed in tablets, PCs, STBs, TV (most of current high-end TV products implement a web-browser), etc. On the other hand, it is not a dedicated subset or subset-based derivation of HTML5 in wide sense. Basically, runtime offers functions called HTML5 in the wide sense. Basically, the specifications of HTML5 in wide sense are be specified particularly by W3C.

This document mainly defines the requirements for applications. But it implicitly includes the requirements for runtimes because applications must use web technologies implemented in runtimes to meet the requirements for applications. Therefore, this document defines the requirements for players (applications and runtimes).

Contents mean everything shown on a digital signage display. The contents of web-based signage are served by a content server through a network. They consist of HTML, CSS, and JavaScript. Some contents are possibly created using XML-based technologies which are embedded in HTML, such as SVG. [SVG]

A scene means a part of web-based signage contents. In this document, It is limitted to videos and audios. Generally, web-based signage plays a sequence of scenes, and shows each scene one by one continuously and repeatedly. See the Core Profile for more details.

A region means the area where scenes are shown. Applications can show some regions and play contents in each region simultaneously on the display. See the Core Profile for more details.

3 Types of media data

The media data in this profile means audio data and video data. The conformant runtime and application must support playing audio data and video data. The runtime must support video element, audio element, and the relevant APIs specified in HTML5. [HTML5]

The application may use Web Audio API to play the audio content. [WEBAUDIOAPI]

The conformant runtime and application which supports playing video data, must support at least one of the video data types in the table blow:

Video Data Types
MIME Type Video Codec Audio Codec Container
video/mp4 H.264 AAC MP4
video/webm VP8 Vorbis WebM

The conformant runtime and application which support playing audio data, must support at least one of the audio data types in the table blow:

Audio Data Types
MIME Type Audio Codec Container
audio/mp3 MP3 MP3
audio/mp4 AAC M4A
audio/webm Vorbis WebM
audio/ogg Vorbis Ogg

4 Auto play

Web-based signage has to continue to play scenes without any user actions. Especially, media data is needed to be played automatically controlled by the application.

Unfortunately, some runtimes which are widely-spread in the world, especially browsers installed in mobile operating systems (e.g. iOS, Android) don't allow scripts to play media data without any user actions for the purpose of avoiding extra charge by mobile-phone operators.

The runtime must allow applications to start playing media data without any user actions. The runtime must accept the steps as follows for this purpose:

  1. The application creates a HTMLMediaElement object using document.createElement() method. If the HTMLMediaElement is a HTMLVideoElement object, appends it in the body element of the HTML document.
  2. The application sets the URL of the media resource to the src attribute of the HTMLMediaElement object.
  3. The application invokes the play() method of the HTMLMediaElement object.
  4. The runtime must start to play the media resource.
Autoplay code example
var media_el = document.createElement("video");
document.body.appendChild(media_el);
media_el.src = "v.mp4";
media_el.play();

If the application runs inside a hybrid mobile app and the underlying runtime doesn't allow the application to start playing media data, the application may invoke non-standard APIs exposed by the hybrid mobile app framework.

5 Properties for video scenes

Videos are shown in the region as a scene. Regions necessarily don't have the same width and height as the video. Furthermore, the aspect ratios of the region and video could be not identical. Therefore, applications need to support the same properties as image scene defined in the Core Profile for showing videos.

The scene whose content is a video has 3 properties as follows. The application must support all properties:

Fit

This property defines how to scale the video fitting to the size of the region. Applications must support the fitting types as follows at least:

None

The video is not scaled at all. The video will be shown as it is in the region. If the size of the video is smaller than the size of the underlying region, margins will appear. The margin will be colored the background color specified for the region (typically, it will be black).

Meet

The video is scaled preserving the aspect ratio of the video so that either the width or the height of the video is equal to that of the region, and the whole video is visible. If the aspect ratio of the video is not as same as the aspect ratio of the region, the video will be letterboxed or pillarboxed (i.e. margins will appear on both of the top and bottom sides or both of the left and right sides of the region). The margin will be colored in the background color specified for the region (typically, it will be black).

Fill

The video is scaled preserving the aspect ratio of the video so that either the width or the height of the video is equal to the one of the region, and the whole region is covered by the video. If the aspect ratio of the video is not as same as the aspect ratio of the region, a part of the video is invisible.

Horizontal align

This property defines how to align the video horizontally in the region. Applications must support the horizontal align types as follows:

Left

The video is aligned so that the left side of the video fits the left side of the region.

Center

The video is aligned so that the horizontal center of the video fits the horizontal center of the region.

Right

The video is aligned so that the right side of the video fits the right side of the region.

Vertical align

This property defines how to align the video vertically in the region. Applications must support the vertical align types as follows:

Top

The video is aligned so that the top side of the video fits the top side of the region.

Middle

The video is aligned so that the vertical center of the video fits the vertical center of the region.

Bottom

The video is aligned so that the bottom side of the video fits the bottom side of the region.

To implement the fit property, the application can use the width, height attribute of the video element specified in HTML5.

Whenever the width and height attribute of the HTMLVideoElement object is set by the application, the runtime must adapt the dimension of the video exactly to these request. [HTML5]

6 Transforming video

Some scenes play a video inside the scene as a part of the contents. The video could be scaled down, scaled up, rotated, and moved.

Besides, the video needs to be transformed for the transition effects specified in the Core Profile.

The runtime must support at least translate(), scale(), rotate() specified in CSS Transforms for videos. Besides, the runtime must support the combination of these functions.

CSS Transform code example
var video_el = document.createElement("video");
video_el.src = "v.mp4";
video_el.play();
video_el.style.transform = "translate(200px, 100px) scale(0.5) rotate(90deg)";

If possible, the runtime is encouraged to support CSS Transforms completely. [CSSTRANSFORMS]

7 Properties for audio

An audio content is associated to a scene by the control data. The application must play the audio data following the control data. Audio contents are mainly used for background music or getting attention of passers.

A scene with an audio content has the properties for the audio data as follows. The application must support all properties:

Type

This value represents the MIME-Type of the audio file (e.g. audio/mp3)

URL

This value represents the URL of the audio file.

Loop

This value represents the flag indicating that the audio data should be replayed more than once, or not. If the value is true, the audio data must be played repeatedly as long as the scene is shown.

The application must play the audio content when the scene is shown.

If the loop property above is set to true, the application may use the loop attribute of the audio element.

8 Preloading media data

Web-based signage is required to start playing videos as soon as the scene is shown followed by the control data. The size of a media file is generally big, it is too late to start to load the data when the scene are shown.

To start playing media data smoothly, the application are strongly recommended to preload enough data to start to play before the relevant scene are shown. The application can create a media element (i.e. video or audio element) and set the src attribute to the URL of the media file before the scene is shown. The application must not set the preload attribute of the media element to "none" or "metadata", because setting these value prevents preloading media data. If the preload attribute is needed, the value should be "auto".

It is preferable that the canplaythrough event are fired on the video element before the scene is shown. The application are recommended to start to prepare media element well in advance.

The runtime must support the preload attribute of the media element (i.e. video or audio element), and must preload enough media data unless the preload attribute is set to "none" or "metadata" purposefully.

If the runtime preloads enough media data, the runtime must fire the canplaythrough event on the relevant media element.

9 Runtime conformance test suites

The conformant runtime must run the test suites appropriately without any JavaScript error:

Video codec, preload, autoplay test

The conformant runtime must run this test appropriately.

This test checks which video codecs the runtime supports, whether the runtime preloads media data enough to start to play before playing a video, and whether the runtime can start to play a video without any user actions.

The runtime must pass all tests at least for one codec.

Audio codec, preload, autoplay test

The conformant runtime must run this test appropriately.

This test checks which audio codecs the runtime supports, whether the runtime preloads media data enough to start to play before playing an audio, and whether the runtime can start to play an audio without any user actions.

The runtime must pass all tests at least for one codec.

Video scaling test

The conformant runtime must run this test appropriately.

This test checks whether the video is scaled appropriately setting the width and height attribute of the HTMLVideoElement object.

Video transforming test

The conformant runtime must run this test appropriately.

This test checks whether translate(), scale(), rotate(), and the combination specified in CSS Transforms affect a video appropriately.

References

All references are normative unless marked "Non-normative".

[CSSTRANSFORMS]
CSS Transforms, Simon Fraser, Dean Jackson, Edward O'Connor, Dirk Schulze, Aryeh Gregor, David Hyatt, Chris Marrin. W3C.
[HTML5]
HTML5, Robin Berjon, Travis Leithead, Erika Doyle Navara, Edward O'Connor, Silvia Pfeiffer, Ian Hickson. W3C.
[RFC2119]
Key words for use in RFCs to Indicate Requirement Levels, S. Bradner. IETF.
[WEBAUDIOAPI]
Web Audio API, Paul Adenot, Chris Wilson, Chris Rogers. W3C.