×
Namespaces

Variants
Actions

HTML 5 Video in Nokia Browser 8.5

From Nokia Developer Wiki
Jump to: navigation, search

This article introduces HTML5 Video tag usage in Browser 8.5

Article Metadata
Tested with
Devices(s): Nokia N9 -->
Compatibility
Device(s): Nokia N9
Article
Keywords: HTML5, Video, canPlayType()
Created: isalento (27 Oct 2011)
Last edited: hamishwillee (13 Aug 2012)

Contents

Web Video playback on N9

HTML 5 video tag support is very important for Nokia N9 as there is no support for Flash. In practice this means that only feasible way to play videos is by using HTML 5 video tag. Please note that in N9 videos are always played in a landscape mode in full screen. Inline playback is not supported.

Video Tag

<video id="movie" width="320" height="180" src="movie.mp4" 
poster="poster.png" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" controls loop>
</video>

Attributes explained

  • width and height. Video element width and height only affects to the preview size on N9, not actual video size. If you want to find out video size, HTMLVideoElement DOM offers videoHeight and videoWidth attributes.
  • src. Src attribute sets the source of the video.
  • Type, Type attribute is used to define mime type of the video and needed codecs. Specifying codec in the Type attribute helps the browser to decide if it can support the video. If browser can’t support requested format it can switch to fallback format.
  • controls, Controls is a boolean attribute. If controls attribute is present in any form (controls, controls="", controls="controls") browser offers a native playback UI. In case of a N9, a “play” arrow icon is placed on top of the video and the video would start playback when tapped.
  • Poster, Poster attribute can be used to set an image, which is shown until the video is loaded or until end user has pressed play. Currently first frame is not automatically used as a preview image, hence it is important to provide poster image.
  • loop. Loop is a boolean attribute as well. Once defined wide playback will start from begin when end is reached.
  • autoplay. Not supported in Browser 8.5
  • muted. Not supported in Browser 8.5
  • preload Not supported in Browser 8.5. Thus preload="metadata" is not supported a poster image should be used.

Supported container formats and codecs

Browser 8.5 only supports Mp4 container format and related codecs (H.264 & MPEG-4). WebM and Ogg container formats are supported, but VP8 and Theora video codecs are missing. For such videos, only audio is played as vorbis audio codec is present.

  • MP4 using H.264 (Baseline, Profile level 3.0) codec for video and Low-Complexity AAC for audio compression.
  • MP4 using MPEG-4 Visual Simple Profile Level 0 video and AMR audio


Following containers are frequently used together with HTML 5 Video, but not currently supported in Browser 8.5:

  • WebM uses VP8 codec for video and Vorbis for audio.
  • Ogg uses Theora codec for video and Vorbis for audio


Corresponding MIME and codec definitions to be used as type attribute values:

  • 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
  • 'video/mp4; codecs="mp4v.20.8, samr"'
  • 'video/webm; codecs="vp8, vorbis"'
  • 'video/ogg; codecs="theora, vorbis"'

You might need to configure your server to serve files with a correct MIME type. If you are using Apache you can modify .htaccess file as follows:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Defining fallback video and alternative formats

Video tag allows developer to chain videos with different formats by using multiple source tags. The browser tries to pick the format it supports. If there is no support for video tag an error message is displayed.

Source tags are listed in a preference order topmost being the one you would like to promote the most. If that is supported, the rest are neglected. Note that for Browser 8.5 you must set the MP4 option to be the first one as there is no codecs for VP8 or Theora.

<video id="vidprewfb" width="320" height="180" poster="poster.png" controls>
<!—Set MP4 first for Nokia N9-->
<source src="movie.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
<source src='movie.webm'type='video/webm; codecs="vp8.0, vorbis"'/>
<source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'/>
<p>Your browser does not support HTML 5 video</p>
</video>

If you wish you can implement Flash as a fallback option. To see how this can be done see Video For Everybody.

JavaScript access

Picks from DOM interface

HTMLVideoElement inherits most of the attributes and methods from HTMLMediaElement. Items explained below are just few picks from bigger list. For complete list see: http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#media-elements

  • play(). Starts full screen playback of the video
  • pause(). Would pause the video, however as the video is played on full screen mode, one really cannot use this to control the playback.
  • load(). Calling load will result into resetting vide element to its original state and to run video source selecting algorithm.
  • canPlayType(type). Can be used to find out, if browser thinks it could support mime type passed as argument. Empty string "" is returned if container/codec is not supported. "Maybe" is returned if browser thinks that it may be able to show the video. If a container format along with codecs is passed to canPlayType() browser should return "probably", if the container format and codecs are supported. Please do note that Browser 8.5 erroneously returns "probably" when this method is used to find out if WebM or Ogg is supported.
This page was last modified on 13 August 2012, at 02:16.
127 page views in the last 30 days.
×