Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Manual Documentation Improvements #3703

Merged
merged 20 commits into from
Dec 2, 2016
Merged

Conversation

misteroneill
Copy link
Member

@misteroneill misteroneill commented Oct 23, 2016

The first step in sweeping the docs/ folder for completeness and accuracy.

This PR focuses on the entry-level guides and the README. It also features a few removals that have come from various conversations. And it removes the API guide because it was duplicating the setup guide.

Requirements Checklist

  • Feature implemented / Bug fixed
  • Reviewed by Two Core Contributors

Copy link
Member

@gkatsev gkatsev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed README.md

preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd be inclined to leave the old fake urls.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is that? I feel like this gives people something they could copy/paste and see it working.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think using real urls is good, we just need to make sure we think about the docs if any of these urls change in the future.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They shouldn't, they're on the CDN.

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!

_Video.js uses [BrowserStack][browserstack] for compatibility testing._

## License
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we link the heading too? Makes it much more visible as well.

Copy link
Member

@gkatsev gkatsev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

options.md

```html
<video controls ...>
<video ...>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we also show <video loop="loop">? As that's a common thing to do as well.

```

> The biggest issue people run into is trying to set these values to false using false as the value (e.g. controls="false") which actually does the opposite and sets the value to true because the attribute is still included. If you need the attribute to include an equals sign for XHTML validation, you can set the attribute's value to the same as its name (e.g. controls="controls").
### Precedence
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While there sort of is a precedence here, I'm not sure we actually officially support it.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems relevant, though. The sort of thing I'd want to know without having to experiment for myself. I feel like it's the implicit reality.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not comfortable with documenting a behavior we haven't been testing with, whether it's there implicitly or not.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair enough.


### Standard `<video>` Element Options
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we link to MDN or something here as well, for more info?

or
{ "preload": "auto" }
```
> **Note:** As of iOS 10, Apple offers `autoplay` support in Safari. However, in order for it to work, the `<video>` element must have `muted` and `playsinline` attributes!
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it doesn't have audio tracks it also works.
We should also double-check whether playsinline is required.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call. Rather than outlining how it works here, I'm going to link to the WebKit blog post.


> Type: `Boolean`

When `true`, the Video.js player will have a fluid size. In other words, it will scale to fit its container.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add something like:

If a class of vjs-fluid is added to the player before initialization, this option is automatically set.


When `true`, the Video.js player will have a fluid size. In other words, it will scale to fit its container.

#### `inactivityTimeout`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

0 means that the user will never become inactive.


> Type: `Boolean`

Tells Video.js to prefer the order of [`sources`](#sources) over [`techOrder`](#techOrder) in selecting a source and playback tech.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we add an example?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 This can be confusing

Copy link
Member

@gkatsev gkatsev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setup.md

```

\* If you have trouble playing back content you know is in the [correct format](http://blog.zencoder.com/2013/09/13/what-formats-do-i-need-for-html5-video/), your HTTP server might not be delivering the content with the correct [MIME type](http://en.wikipedia.org/wiki/Internet_media_type#Type_video). Please double check your content's headers before opening an [issue](/CONTRIBUTING.md).
Regardless, in either case, the `data-setup` attribute is still supported for providing [options][options] to Video.js. Additionally, the `videojs` function can take options as its second argument. [Learn more about Video.js options][options].
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure this is strictly true.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on the getTagSettings function and the Player constructor it is...


We include a stripped down Google Analytics pixel that tracks a random percentage (currently 1%) of players loaded from the CDN. This allows us to see (roughly) what browsers are in use in the wild, along with other useful metrics such as OS and device. If you'd like to disable analytics, you can simply include the following global **before** including Video.js:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this section should be kept.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, yes, I thought the GA thing was in the "Getting Started" document, but it seems not.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, I think we should move this to the "Getting Started" guide. It's silly to have two documents covering the same thing.


### Self Hosted. ###
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should keep this section as well.

Copy link
Member

@gkatsev gkatsev Oct 26, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a "build-your own" section in the CONTRIBUTING.md, we could potentially just link to that.
Ignore this one. It's not relevant.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another thing I thought was covered by "Getting Started"... will bring it back with accurate information!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, I think we should move this to the "Getting Started" guide. It's silly to have two documents covering the same thing.

Copy link
Member

@gkatsev gkatsev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

index.md


<h1>Video.js Documentation</h1>
There are two categories of docs: [Guides][guides] and [API docs][api].
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what about having API Docs link to the second below instead?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that's fine for now, but I wonder if we need the API guide at all.


> Type: `String`

A [two-letter code][lang-codes] matching one of the available languages in the player. This sets the initial language for a player, but it can always be changed.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not necessarily two-letter. And while it's true the player's language can be changed later on, that can lead to confusion as localisable text does not get updated.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point 👍

@misteroneill misteroneill changed the title Manual Documentation Improvements (WIP) Manual Documentation Improvements - Part 1 Oct 31, 2016
@misteroneill misteroneill added the needs: LGTM Needs one or more additional approvals label Nov 11, 2016
@brandonocasey
Copy link
Contributor

brandonocasey commented Nov 14, 2016

General comments for this file.

  • We should use casing as defined in eslint to be consistent with jsdoc comments and JavaScript itself
  • Options should probably have a Type: and an Example
  • We may want to specify at the bottom of each guide:
    "See a typo? Does something not make sense or seem incorrect? video.js is an Open Source project on GitHub. Feel free to open a PR or issue on video.js to fix this documentation!"

```javascript
var player = videojs('really-cool-video', { /* Options */ }, function() {
console.log('Good to go!');
If you don't want to use automatic setup, you can leave off the `data-setup` attribute and initialize a `<video>` element manually:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe it would be good to specify "using the main videojs function like this:"


this.play(); // if you don't trust autoplay for some reason
```js
var player = videojs('my-player', { /* options */ }, function() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few things here:

  • it might be nice to link to the API docs for videojs and Player here. We may want to think about it when we know where the API docs will end up? Or maybe we add the old link now and update it later?
  • it might be nice for new users to specify what that last function is somehow, maybe through a function name or a comment? ie function playerReadyFunction()
  • It would seem more clear to me if we defined options object above the videojs call so that we don't need to have a weird { /* options */ } comment-object thing.
  • It would also be a good idea to specify that this in the ready function is a reference to the Player that was created and is now ready for playback.
  • It would probably be a good idea to have a second example without options/readyFunction as they are optional.

- [`notSupportedMessage`](#notsupportedmessage)
- [`plugins`](#plugins)
- [`sourceOrder`](#sourceorder)
- [`sources`](#sources)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some options I found in the code, idk if we want to add them, but here they are:

Player

Tech

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to specify anything from the default options? (Seems like some of these may not even exist anymore...)

Copy link
Member Author

@misteroneill misteroneill Nov 14, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, with regards to the default options, like I said above, I left out things that don't appear to be used.

  • vtt.js - Adding.
  • starttime - I think starttime was assuming it was coming from an attribute like starttime="1". Probably old code and probably not worth documenting.
  • createEl, initChildren, reportTouchActivity - Wouldn't make sense to document since it's always set to false explicitly. And I think its existence is a bit of a hack to begin with.
  • nativeControlsForTouch - Adding here and also under tech options.
  • starttime - Addressed above.
  • nativeCaptions and nativeTextTracks - Adding under tech options.
  • *Tracks - These aren't available as options are they?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Thinking back on it now*Tracks can be a passed in *TrackList, but we may not want to document it since the way we are using it (as a way to share tracks between techs and player) is not very standard.
  • The weird thing with start time is that it has two separate names in the code. starttime and startTime maybe we need another investigation to remove or fix it

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's leave the tracks options off if we don't want to publicize it. Also, we should figure out the starttime thing. It's not a standard attribute, so I suspect it's legacy and could probably be removed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- [Component Options](#component-options)
- [`children`](#children-1)
- [`${componentName}`](#componentname)
- [Tech Options](#tech-options)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be good to have a section for source handler options under tech options.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You mean that the source handlers get the tech options as an argument?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is what I mean:

var sourceHandleOptions = {something:true};
videojs({
  html5: {hls: sourceHandlerOptions},
  flash: {hls: sourceHandlerOptions},
});

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, well, that's what I'm saying, right? {hls: sourceHandlerOptions} gets passed through to source handlers. Or does HLS do some magic that's not in Video.js proper?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmmm seems like your right sourceHandlers do get all of techs options and not just specific source handler options. I guess maybe just specify that in the Tech options section?

- [Standard `<video>` Element Options](#standard-video-element-options)
- [`autoplay`](#autoplay)
- [`controls`](#controls)
- [`height`](#height)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at the spec here we may be missing (or maybe we have not implemented them):

  • playbackRate
  • defaultPlaybackRate
  • volume
  • defaultMuted

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't list things that don't appear to be supported in the code as options.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will add an issue to see if we want to support them

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that'd probably be a 6.0 thing and should probably not block this PR.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


```html
<video controls ...>
<video loop="loop" ...>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this correct? I think the way advised above says not to use boolean attributes like this (even though it will work in this case)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, those are the two valid ways to create a boolean attribute. I'll clarify the text above to mention this.

});
```

In each case, the callback is called asynchronously - _even if the player is already ready!_
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a general question here, not really about the docs, should we support all three use cases?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question, but one that I think is outside the scope of this PR. :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also isn't there an option to make this synchronous somehow?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't have any way to make it synchronous. It was removed in 5.0, since previously, it depended on what the tech did, so, html5 was sync but flash was async. Now it's always async. However, #3782 makes sense. I think we may not want all 3, but maybe two of them.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't forget, the Component#ready function can take the second sync argument, which I recall was a point of contention early in the 5.x process.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah thats the one that I am talking about, since player.ready can be synchronous should we mention that here?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did forget. And everyone should also forget :P

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it should remain undocumented at best.


* [API](./guides/api.md) - The Video.js API allows you to control the video through javascript or trigger event listeners, whether the video is playing through HTML5, flash, or another playback technology.
Tracks are used for displaying text information over a video, selecting different audio tracks for a video, or selecting different video tracks.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if we have a video track guide, we may want to specify that video tracks are untested and may not work.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I may or may not have changed that in the tracks work. I'll have to check.


* [Skins](./guides/skins.md) - You can change the look of the player across playback technologies just by editing a CSS file. The skins documentation gives you a intro to how the HTML and CSS of the default skin is put together.
### Customizing
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we add a guide to Components?


### Resources
You can package up interesting Video.js customizations and reuse them elsewhere. Find out how to build your own plugin or use one created by someone else.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that it would be good to add a link to the wiki were all the plugins are listed.

@misteroneill
Copy link
Member Author

The concern I have with adding an example for each option is that it becomes extremely redundant and verbose. The documentation for how to set options is in setup.md and there is a blurb at the top of each section explaining commonalities of options in that section (for example, the ability for autoplay to be set via attribute or option).

@brandonocasey
Copy link
Contributor

My thinking was not an example for each option, but more like an example value for anything that is not a boolean. Such as aspectRatio or width.

@misteroneill
Copy link
Member Author

Gotcha. I'll see if there's anything that warrants example(s).


> 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](https://github.com/videojs/video.js/wiki/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 websites.
> 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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this comment was lost before, I am adding it back in here:

I think we should link to https://trends.builtwith.com/media/VideoJS here so that it i apparent that we are not just making a number up.

@gkatsev gkatsev modified the milestone: 5.14 Nov 15, 2016
@brandonocasey brandonocasey added confirmed and removed needs: LGTM Needs one or more additional approvals labels Nov 15, 2016
@misteroneill misteroneill changed the title Manual Documentation Improvements - Part 1 Manual Documentation Improvements Nov 21, 2016
> ### Note on Video Tag Attributes ###
> With HTML5 video tag attributes that can only be true or false (boolean), you simply include the attribute (no equals sign) to turn it on, or exclude it to turn it off. For example, to turn controls on:
### `sourceOrder`
> Type: `Array`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sourceOrder is a boolean.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, should we mention now that in 6.0 it will "default" to true, whatever that means in the world of middleware.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and it defaults to false right now.


'metadata': Load only the meta data of the video, which includes information like the duration and dimensions of the video.
Allows overriding the default URL to vtt.js, which may be loaded asynchronously to polyfill support for `WebVTT`.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should add a note that it'll be used in the novtt build of videojs.

```

The [components guide](./components.md) has an excellent breakdown of the structure of a player, you
just need to remember to nest child components in a `children` array for each level.
#### `nativeCaptions`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an alias to nativeTextTracks. I think it should be mentioned below instead of having its own section.

@misteroneill
Copy link
Member Author

Since all my sub-PRs (in my fork) were approved, I have merged all 5 branches into one and rebased on master. This should be good to go. 👍

@gkatsev gkatsev merged commit d24fe40 into videojs:master Dec 2, 2016
@misteroneill misteroneill deleted the manual-docs branch December 2, 2016 19:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants