www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/videojs/README.md

   1 # Video.js support module 5 for Drupal 8
   2
   3 Video.js is a HTML5-based video player with a built-in Flash fallback for older
   4 browsers. This means that videos can be played on nearly all devices and
   5 operating systems, provided the right codecs are used.
   6
   7 This module is a support module for Video.js. It doesn't contain Video.js
   8 itself, but integrates it with the File, Link and Video modules after you've
   9 installed it.
  10
  11 ## New in 8.x-1.x
  12
  13 - Support for Video.js 5.0.x
  14 - Support for subtitle tracks.
  15 - Support for looping, hiding player controls and changing preload behavior.
  16 - Setup above settings for each field and view individually, as well as width
  17   and height of the player.
  18 - Load the Video.js files from the Video.js CDN - downloading and installing
  19   the player is no longer necessary!
  20 - Locate the Video.js files using the Libraries API.
  21
  22 ## Required dependencies
  23
  24 None
  25
  26 ## Optional dependencies
  27
  28 - Drupal core File module
  29 - [Libraries API 2](http://drupal.org/project/libraries)
  30 - [Link](http://drupal.org/project/link)
  31
  32 ## Installation
  33
  34 1. Install the Video.js module by copying the sources to a modules directory,
  35    such as `sites/all/modules` or `sites/[yoursite]/modules`.
  36 2. Download the Video.js library from http://videojs.com. Extract the module to
  37    `sites/all/libraries/video-js` and make sure that
  38    `sites/all/libraries/video-js/video.js` exists.
  39    NOTE: you can skip this step and use the Video.js version from the
  40    Video.js Content Delivery Network (CDN).
  41 3. In your Drupal site, enable the module.
  42 4. If not yet created, create a File field for one of your content types at
  43    Structure -> Content types -> [type] -> Manage fields. Make sure
  44    the allowed extensions contain only HTML5 video extensions, such as mp4,
  45    webm, mov and ogv. Use the `Number of values` setting to allow users to
  46    upload alternative versions of the same video, for instance MP4 and Ogg.
  47    To allow users to upload a poster image, also allow png, gif or jpg.
  48 5. At the Manage display tab, select `Video.js` for your File field.
  49 6. Create a piece of content with the configured field.
  50 7. Create a poster image and upload the image in the file field field created in
  51    step #4.
  52
  53 Note: instead of a File field, you also use a Link field from the Link module.
  54 The module detects the type of the file from the extension. If the link
  55 contains no extension, write the mime type (like video/mp4) in the title
  56 field of the link.
  57
  58 ## Poster images from a separate field
  59
  60 It is possible to display images uploaded to an image field as the video
  61 poster image. After you added an image field to your content type, edit the
  62 display settings of the Video.js field and specify the image field in the
  63 "Poster image field" setting.
  64
  65 ## Installation with the Video module
  66
  67 If you are using the Video module, you can't configure the player at the
  68 `Manage display` tab. Instead, select Video.js at the Players tab of the
  69 Video settings page (admin/config/media/video/players).
  70
  71 ## Subtitle tracks
  72
  73 To add subtitles to your video, upload a VTT file to the file field, or
  74 link to a VTT file when using a Link field. Enter the language name or
  75 two-letter code in the description field. Use the English or local language
  76 name.
  77
  78 ## Loading Video.js from code
  79
  80 The Video.js module exposes the theme function 'videojs' to write a Video.js
  81 player in code. The theme function has the following variables:
  82
  83 - `items`: Array of playable items. Each item in the array must be an array with
  84   the following keys:
  85   - `uri` (required): URI of the file. It must be an audio file, video file,
  86     image file (for the poster image) or VTT file (for subtitles).
  87   - `filemime` (required): mime type of the file.
  88   - `langcode` (vtt only): language code.
  89   - `label` (vtt only): label of the track.
  90   - `default` (vtt only): whether the track is selected by default.
  91   - `charset` (vtt only): the character set of the track.
  92   - `kind` (vtt only): the kind of track: subtitles, captions, descriptions,
  93     chapters or metadata. Default: subtitles.
  94 - `player_id` (required): ID of the player. Must be unique on the page.
  95 - `attributes`: array with the following optional values:
  96   - `width`: width of the player.
  97   - `height`: height of the player.
  98   - `loop`: boolean to loop the video.
  99   - `hidecontrols`: boolean to hide the player controls.
 100   - `autoplay`: boolean to start playback on load.
 101   - `preload`: preload mode. either none, metadata or auto.
 102 - `posterimage_style` (optional): set to the machine name of an image style
 103   to transform the poster image using that style.
 104
 105 ### Example
 106
 107     echo theme('videojs', array(
 108       'items' => array(
 109         array(
 110           'uri' => 'public://test.mp4',
 111           'filemime' => 'video/mp4',
 112         ),
 113         array(
 114           'uri' => 'public://test.webm',
 115           'filemime' => 'video/webm',
 116         ),
 117         array(
 118           'uri' => 'public://test-poster.jpg',
 119           'filemime' => 'image/jpeg',
 120         ),
 121         array(
 122           'uri' => 'public://test-en.vtt',
 123           'filemime' => 'text/vtt',
 124           'langcode' => 'en',
 125           'description' => 'English',
 126           'default' => TRUE,
 127         ),
 128         array(
 129           'uri' => 'public://test-nl.vtt',
 130           'filemime' => 'text/vtt',
 131           'langcode' => 'nl',
 132           'description' => 'Nederlands',
 133         ),
 134         array(
 135           'uri' => 'public://test-fy.vtt',
 136           'filemime' => 'text/vtt',
 137           'langcode' => 'fy',
 138           'description' => 'Frysk',
 139         ),
 140       ),
 141       'player_id' => 'test-video',
 142       'posterimage_style' => 'thumbnail',
 143       'attributes' => array(
 144         'width' => 640,
 145         'height' => 360,
 146         'loop' => FALSE,
 147         'autoplay' => TRUE,
 148         'preload' => 'none',
 149         'hidecontrols' => FALSE,
 150       ),
 151     ));
 152
 153 ## Support
 154
 155 - Report bugs for this *Drupal module* at
 156   <http://drupal.org/project/issues/videojs>.
 157 - Report bugs for the *player* at <https://github.com/videojs/video.js/issues>.