www.aleph1.co.uk Git - yaffs-website/blob - node_modules/video.js/README.md

   1 ![Video.js logo][logo]
   2
   3 # [Video.js - HTML5 Video Player][vjs]
   4
   5 [![Build Status][travis-icon]][travis-link]
   6 [![Coverage Status][coveralls-icon]][coveralls-link]
   7 [![Slack Status][slack-icon]][slack-link]
   8
   9 [![NPM][npm-icon]][npm-link]
  10
  11 > Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through [plugins][plugins]). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over ~~50,000~~ ~~100,000~~ ~~200,000~~ [400,000 websites][builtwith].
  12
  13 ## Quick Start
  14
  15 Thanks to the awesome folks over at [Fastly][fastly], there's a free, CDN hosted version of Video.js that anyone can use. Add these tags to your document's `<head>`:
  16
  17 ```html
  18 <link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
  19 <script src="//vjs.zencdn.net/5.11/video.min.js"></script>
  20 ```
  21
  22 > For the latest URLs, check out the [Getting Started][getting-started] page on our website.
  23
  24 Next, using Video.js is as simple as creating a `<video>` element, but with an additional `data-setup` attribute. At a minimum, this attribute must have a value of `'{}'`, but it can include any Video.js [options][options] - just make sure it contains valid JSON!
  25
  26 ```html
  27 <video
  28     id="my-player"
  29     class="video-js"
  30     controls
  31     preload="auto"
  32     poster="//vjs.zencdn.net/v/oceans.png"
  33     data-setup='{}'>
  34   <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  35   <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  36   <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  37   <p class="vjs-no-js">
  38     To view this video please enable JavaScript, and consider upgrading to a
  39     web browser that
  40     <a href="http://videojs.com/html5-video-support/" target="_blank">
  41       supports HTML5 video
  42     </a>
  43   </p>
  44 </video>
  45 ```
  46
  47 When the page loads, Video.js will find this element and automatically setup a player in its place.
  48
  49 If you don't want to use automatic setup, you can leave off the `data-setup` attribute and initialize a `<video>` element manually using the `videojs` function:
  50
  51 ```js
  52 var player = videojs('my-player');
  53 ```
  54
  55 The `videojs` function also accepts an `options` object and a callback to be invoked
  56  when the player is ready:
  57
  58 ```js
  59 var options = {};
  60
  61 var player = videojs('my-player', options, function onPlayerReady() {
  62   videojs.log('Your player is ready!');
  63
  64   // In this context, `this` is the player that was created by Video.js.
  65   this.play();
  66
  67   // How about an event listener?
  68   this.on('ended', function() {
  69     videojs.log('Awww...over so soon?!');
  70   });
  71 });
  72 ```
  73
  74 If you're ready to dive in, the [Getting Started][getting-started] page and [documentation][docs] are the best places to go for more information. If you get stuck, head over to our [Slack channel][slack-link]!
  75
  76 ## Contributing
  77
  78 Video.js is a free and open source library, and we appreciate any help you're willing to give - whether it's fixing bugs, improving documentation, or suggesting new features. Check out the [contributing guide][contributing] for more!
  79
  80 _Video.js uses [BrowserStack][browserstack] for compatibility testing._
  81
  82 ## [License][license]
  83
  84 Video.js is [licensed][license] under the Apache License, Version 2.0.
  85
  86 [browserstack]: https://browserstack.com
  87
  88 [builtwith]: https://trends.builtwith.com/media/VideoJS
  89
  90 [contributing]: CONTRIBUTING.md
  91
  92 [coveralls-icon]: https://coveralls.io/repos/github/videojs/video.js/badge.svg?branch=master
  93
  94 [coveralls-link]: https://coveralls.io/github/videojs/video.js?branch=master
  95
  96 [docs]: http://docs.videojs.com
  97
  98 [fastly]: http://www.fastly.com/
  99
 100 [getting-started]: http://videojs.com/getting-started/
 101
 102 [license]: LICENSE
 103
 104 [logo]: http://videojs.com/img/logo.png
 105
 106 [npm-icon]: https://nodei.co/npm/video.js.png?downloads=true&downloadRank=true
 107
 108 [npm-link]: https://nodei.co/npm/video.js/
 109
 110 [options]: docs/guides/options.md
 111
 112 [plugins]: http://videojs.com/plugins/
 113
 114 [slack-icon]: http://slack.videojs.com/badge.svg
 115
 116 [slack-link]: http://slack.videojs.com
 117
 118 [travis-icon]: https://travis-ci.org/videojs/video.js.svg?branch=master
 119
 120 [travis-link]: https://travis-ci.org/videojs/video.js
 121
 122 [vjs]: http://videojs.com