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

added an faq #3805

Merged
merged 8 commits into from
Dec 2, 2016
Merged

added an faq #3805

merged 8 commits into from
Dec 2, 2016

Conversation

brandonocasey
Copy link
Contributor

@brandonocasey brandonocasey commented Nov 28, 2016

Description

Added an FAQ under guides

Requirements Checklist

  • Feature implemented / Bug fixed
  • If necessary, more likely in a feature request than a bug fix
    • Docs/guides updated
  • Reviewed by Two Core Contributors

Copy link
Member

@misteroneill misteroneill left a comment

Choose a reason for hiding this comment

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

Looks like a great start. I hope others will contribute their FAQ ideas. 😄

> Currently video.js can be installed using bower, npm, or by serving a release file
> from a github tag. For information on doing any of those see the [install guide](http://videojs.com/getting-started/).

**Q: What is 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.

I think this ought to be first question.

> * Offers an extendable and themable UI
> * Takes care of accessibility for the user (in-progress)

**Q: How is video.js versioned?**
Copy link
Member

Choose a reason for hiding this comment

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

I think I would rephrase this question as "What do video.js version numbers mean?"


**Q: What media formats does video.js support?**
> This depends on the browsers support, video.js will work off of that. If flash is avialable flash videos
> can also be played but only if the flash tech is included with 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.

Flash should be capitalized, since it's a proper noun.

**Q: How can I troubleshoot playback issues?**
> See the [troubleshooting guide](/docs/guides/troubleshooting.md)

**Q: What is a [reduced test case](https://css-tricks.com/reduced-test-cases/)?**
Copy link
Member

Choose a reason for hiding this comment

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

I think this question ought to go below the "I think I found a bug..." question.

> See the [button guide](/docs/guides/button.md) for information on adding a button to video.js

**Q: Where can I find a list of video.js plugins?**
> See the video.js wiki for a running list [here](http://videojs.com/plugins).
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 probably "deprecate" the wiki page and point it to this page. Also, "See the video.js wiki" is inaccurate here.

Copy link
Member

Choose a reason for hiding this comment

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

Also, we should probably mention how a plugin gets added to that list (i.e. it's published to npm with the "videojs-plugin" keyword, IIRC).

**Q: I think I found a bug with video.js. What should I do?**
> If you know how to code and feel comfortable looking into the issue, we will
> gladly review a pull request if you open one on the [video.js repo](https://github.com/videojs/video.js/pulls).
> If you don’t have any idea what that means, please open an [issue here](https://github.com/videojs/video.js/issues)
Copy link
Member

Choose a reason for hiding this comment

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

I think it's generally considered bad form from a usability/accessibility perspective to use a bunch of "here" links. An alternative would be:

If you don't have any idea what that means, please [open an issue on GitHub](...)

Linking relevant text makes the link more semantically meaningful for uses browsing with a keyboard or other assistive technology.

capitalized Flash
moved some questions around
> video.js follows [semver](http://semver.org/)

**Q: How can I troubleshoot playback issues?**
> See the [troubleshooting guide](/docs/guides/troubleshooting.md)
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This guide does not currently exist, we should probably work on adding it though.

Copy link
Member

Choose a reason for hiding this comment

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

I think the byte range/php hosting question need to be in this FAQ, unless the troubleshooting guide is going to be an FAQ of more technical topics.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

sure just tell me how to word it and I will add it in here, I think that it can be in both places.

> See the [plugin guide](/docs/guides/plugins.md) for information on making a plugin for video.js

**Q: How do I add a button to video.js?**
> See the [button guide](/docs/guides/button.md) for information on adding a button to video.js
Copy link
Contributor Author

@brandonocasey brandonocasey Nov 29, 2016

Choose a reason for hiding this comment

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

This guide does not exist, is something like this going to be added by the manual documentation PR's?

Copy link
Member

Choose a reason for hiding this comment

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

Good point. I don't think that's in scope at the moment, but we can answer the question at a very basic level here and update it to point to a guide when we have one?

We could add a section to the component guide rather than a whole new guide. Just another option.

**Q: Does video.js support multiple video tracks?**
> Theoretically it does but the code has yet to be tested, if it works or you find an
> issues feel free to open a pull request or submit an issue. The guide for video tracks is
> [here](/docs/guides/video-track.md)
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think this is added by the manual documentation PR's

Copy link
Member

Choose a reason for hiding this comment

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

Yeah, but it's video-tracks.md instead.

> Yes! Please submit an issue if this does not work.

**Q: is video.js on bower?**
> Yes! See the [install guide](http://videojs.com/getting-started/) for more information.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

is there a better link for this that is not going to change when the website changes?

Copy link
Member

Choose a reason for hiding this comment

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

I think that will be fine.

**Q: What is video.js?**
> video.js is an extendable wrapper around the native video element. It does the following:
> * Offers a plugin API so that different types of video can be handed to the native video element. IE: HLS, Flash, or HTML5 video.
> * Polyfills and unifies the native video api across browsers
Copy link
Member

Choose a reason for hiding this comment

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

It doesn't usually polyfill anything unless completely broken. It generally sits on top to make a unified version.

@@ -0,0 +1,91 @@
## FAQ

**Q: What is 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.

I think each question should be a heading.
So, at the top, FAQ should be # and each question should be ##.

# FAQ

## What is video.js?
Video.js is a video player.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

should the > stay or should the text just be under the heading?

Copy link
Member

Choose a reason for hiding this comment

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

Just text under the heading.

> If you know how to code and feel comfortable looking into the issue, we will
> gladly review a pull request if you open one on the [video.js repo](https://github.com/videojs/video.js/pulls).
> If you don’t have any idea what that means, please open an [issue on the video.js repo](https://github.com/videojs/video.js/issues)
> and make sure that you follow the issue template so that we can better assist you.
Copy link
Member

Choose a reason for hiding this comment

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

link to the issue template here.

> This is outside of the scope of video.js and there are things that can be done to make it harder, but it will
> never be completely possible.

**Q: I think I found a bug with video.js. What should I do?**
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 link to the appropriate section of the CONTRIBUTING.md.

> See the [video.js github wiki](https://github.com/videojs/video.js/wiki/Skins).

**Q: Does video.js work as an audio only player?**
> Yes! Video.js can be used with an `<audio>` tag the same way that it is used with a `<video>` tag.
Copy link
Member

Choose a reason for hiding this comment

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

Not sure if we need to add it here but the spec (and videojs's different between the two going forward) is that the only difference between the two is that with video you have a display area and with audio, you do not.
You can play audio files in a video element and you can play a video file in an audio element.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

is there a guide planned on this? As it seems like it has come up a fair amount

Copy link
Member

Choose a reason for hiding this comment

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

Not right now. There's actually some work that needs to be done for that too, like actually disabling the display area for an audio element instead of having ~40px of display area.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ok I will open an issue to add a troubleshooting and an audio only guide

> Yes! See the guide for [audio tracks](/docs/guides/audio-track.md)

**Q: Does video.js support multiple video tracks?**
> Theoretically it does but the code has yet to be tested, if it works or you find an
Copy link
Member

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 better to say something like:

The code for supporting video tracks exists but it has not been tested.

**Q: Does video.js work as an audio only player?**
> Yes! Video.js can be used with an `<audio>` tag the same way that it is used with a `<video>` tag.

**Q: Does video.js support multiple audio tracks?**
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 call it just audio tracks and video tracks below.

> issues feel free to open a pull request or submit an issue. The guide for video tracks is
> [here](/docs/guides/video-track.md)

**Q: Does video.js support multiple text tracks?**
Copy link
Member

Choose a reason for hiding this comment

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

just text tracks. Also, potentially add captions as well.


**Q: Does video.js support HLS (HTTP Live streaming) video?**
> video.js supports HLS video if the native HTML5 element supports HLS
> (e.g. Safari, Edge, Android Chrome and iOS). For browsers without native
Copy link
Member

Choose a reason for hiding this comment

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

Chrome on Android is called Chrome for Android.

> video.js follows [semver](http://semver.org/)

**Q: How can I troubleshoot playback issues?**
> See the [troubleshooting guide](/docs/guides/troubleshooting.md)
Copy link
Member

Choose a reason for hiding this comment

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

I think the byte range/php hosting question need to be in this FAQ, unless the troubleshooting guide is going to be an FAQ of more technical topics.

@brandonocasey
Copy link
Contributor Author

Added issues to make guides for troubleshooting and audio only

@@ -0,0 +1,103 @@
# FAQ

## **Q: What is 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.

I don't think we need the bolding or Q: anymore.

@gkatsev
Copy link
Member

gkatsev commented Nov 29, 2016

A couple more questions:

The video does not play in my browser of choice

Make sure that however you are serving your video files supports byte-range requests. Chrome and Safari both rely on byte range requests for playing back video, so, the video will not be able to play.
This is likely the case if you are serving the file using PHP as it does not support byte-range requests by default

The browser loads the entire video before playing or takes a long time to load

This could mean that your video is not encoded with the metadata -- things like duration, video dimensions, etc -- at the beginning of the video. The browser then needs to load the entire video before it know how long the video is and what to do with the video.

I see an error thrown like vdata12345

This probably means that a component used was not being disposed properly. The element associated with the component was removed from the DOM but event handlers associated with the component are still live.

@mister-ben you replied to a lot of questions like the first two, can you proof read them? Also, can you take a look at this PR?

@mister-ben
Copy link
Contributor

The video does not play in my browser of choice

Make sure that however you are serving your video files supports byte-range requests. Chrome and Safari both rely on byte range requests for playing back video, so, the video will not be able to play. On other browsers you may experience different behaviour, for example the video may play but return to the beginning whenever you try to seek.

This is commonly a problem if your source URL is pointing to a PHP or other script that is fetching and returning the file. Your script must respond correctly to range headers.

The browser loads the entire video before playing or takes a long time to load

This could mean that your video is not encoded with the metadata -- things like duration, video dimensions, etc -- at the beginning of the video. This metadata is known as the "moov atom" in MP4. Depending on the browser the whole video may need to be downloaded before it's playable, or playback may be able to start but seeking beyond the downloaded range won't work.

Many encoders put the metadata in the correct place by default, others may require you to choose a "fast start" or "optimise for streaming" option.

# FAQ

## Q: What is video.js?
video.js is an extendable wrapper around the native video element. It does the following:
Copy link
Contributor

Choose a reason for hiding this comment

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

framework rather than wrapper?

Copy link
Member

Choose a reason for hiding this comment

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

Hmm, I don't really feel like either is quite appropriate. Library is probably the most accurate term. I think I've used "decorates a native video element" as a description before.

Copy link
Member

Choose a reason for hiding this comment

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

videojs.com calls it "The Player Framework"

* Offers a plugin API so that different types of video can be handed to the native
video element. IE: HLS, Flash, or HTML5 video.
* Unifies the native video api across browsers (polyfilling support for features
* if necessary)
Copy link
Contributor

Choose a reason for hiding this comment

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

no bullet on this line


## Q: How do I install video.js?
Currently video.js can be installed using bower, npm, or by serving a release file from
a github tag. For information on doing any of those see the [install guide](http://videojs.com/getting-started/).
Copy link
Contributor

Choose a reason for hiding this comment

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

Alternatively, you can use the CDN hosted version.


## Q: What do video.js version numbers mean?
video.js follows [semver](http://semver.org/) which means that the API should not change
out from under a userunless there is a major version increase.
Copy link
Contributor

Choose a reason for hiding this comment

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

user unless

This error is thrown when an element that is associated with a component is removed
from the DOM but the event handlers associated with the element are not removed. This
is almost always due to event listeners not being disposed when dispose is called on
a component.
Copy link
Contributor

Choose a reason for hiding this comment

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

If troubleshooting is going to be a separate doc, this would be better there

Copy link
Contributor Author

Choose a reason for hiding this comment

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

this is still up in the air, but I think we may make a troubleshooting guide and link this question there when we have it.

which is maintained by the video.js organization.

## Q: Does video.js support live video?
Yes! Video.js adds support for live videos.
Copy link
Contributor

Choose a reason for hiding this comment

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

The Flash tech supports simple RTMP streams, and videojs-contrib-hls add support for live HLS.


## Q: Can video.js be required in node.js?
Yes! Please submit an issue if this does not work. See the question on submiting issues
to find out how.
Copy link
Contributor

Choose a reason for hiding this comment

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

Duplicates the "how do I install" question earlier.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think this question was to address the fact that video.js can be used server side in node.js. Some packages on npm can only be used in the browser, as weird as that sounds.

* Unifies the native video api across browsers (polyfilling support for features
* if necessary)
* Offers an extendable and themable UI
* Takes care of accessibility for the user (in-progress)
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's worth introducing core plugins like videojs-contrib-* as part of the ecosystem early as they make a big difference to the feature set.

This could mean that your video is not encoded with the metadata -- things like duration,
video dimensions, etc -- at the beginning of the video. This means that the browser will
need to load the entire video before it know how long the video is and what to do with
the video.
Copy link
Contributor

Choose a reason for hiding this comment

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

I drafted some expanded answers for these at #3805 (comment)


## Q: How can I hide the links to my video/subtitles/audio/tracks?
This is outside of the scope of video.js and there are things that can be done to make
it harder, but it will never be completely possible.
Copy link
Contributor

Choose a reason for hiding this comment

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

It's impossible to hide the network requests a browser makes and difficult to sufficiently obfuscate URLs in the source. Techniques such as token authentication may help but are outside of the scope of video.js.

For content that must be highly secure videojs-contrib-eme adds DRM support.

@mister-ben
Copy link
Contributor

mister-ben commented Nov 30, 2016

These are some drafts I'd made but they're not in a Q&A format. Some duplicate and some belong in troubleshooting:

Formats

  • Make sure you are using formats that video.js can play. Which formats can be played depends on your browser, OS and which tech plugins you are using.

  • Most browsers now play MP4 with h264 video. If you want to have a single source, and neither live streaming nor adaptive streaming is a consideration, MP4 is a good choice.

  • For adaptive streaming or live streaming, use HLS or DASH. You'll need to use (videojs-contrib-hls) or (videojs-contrib-dash). HLS is convenient as mobile browsers have native support.

  • It's not only the file container format (e.g. MP4) that is important but also the codecs used. MP4 support in HTML5 browsers is specifically for MP4 with h264 video and MP3 or AAC audio.

  • Some low-end phones save video in the 3GP format but give the file an MP4 extension. These files will not play.

  • The Flash tech supports FLV video and partially RTMP. These will not play without Flash. If you are still using Flash videos, you do need to migrate away as browsers are ending Flash support. SWF is not a video format and will not play even in the Flash tech.

Embedding

  • Always specify the correct mime type for your videos, whether using <source> elements or the src() API. This is used to determine what video.js will attempt to play.

Hosting video

  • Your server must support byte range requests. Most servers support this by default. If you are proxying the media files via a server side script, this script must implement ranges. The impact of not doing this ranges from seeking being broken to no playback at all (on iOS).

  • Your server must return the correct mime type for the format.

  • If you are using HLS or DASH your server must implement CORS headers if the video is served from a different domain than your page. This is also true for text tracks such as captions.

Fullscreen

  • If your player is in an iframe, make sure it and any parent iframes have the fullscreen attributes allowfullscreen webkitallowfullscreen mozallowfullscreen. Without these, the browser will not allow fullscreen mode.

@misteroneill misteroneill dismissed their stale review November 30, 2016 15:36

Starting a new one.

@misteroneill
Copy link
Member

As discussed, we'll try to stick to content and organization in this PR and I can do my grammar nitpicking in a separate venue. :)

@brandonocasey
Copy link
Contributor Author

brandonocasey commented Nov 30, 2016

@mister-ben Thanks for all the troubleshooting info. I added opened PR for troubleshooting

Copy link
Member

@misteroneill misteroneill left a comment

Choose a reason for hiding this comment

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

Nothing major, looks good overall.

See the [troubleshooting guide](/docs/guides/troubleshooting.md) for information on
why this might be happening. Open an [issue on the video.js repo](https://github.com/videojs/video.js/issues).
Make sure that you follow the [issue template](/.github/ISSUE_TEMPLATE.md) and the
[contributing guide](/CONTRIBUTING.md#filing-issues) so that we can better assist you
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 also going to be covered in docs/guides/player-workflow.md

Copy link
Contributor Author

Choose a reason for hiding this comment

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

do we want to have two places discussing the same thing in detail? or should player-workflow link to contributing as well?

## Q: What is video.js?
video.js is an extendable framework/library around the native video element. It does the following:
* Offers a plugin API so that different types of video can be handed to the native
video element. IE: HLS, Flash, or HTML5 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 probably be:

video element (e.g. HLS, Flash, etc).

See the [plugin guide](/docs/guides/plugins.md) for information on making a plugin for video.js.

## Q: How do I add a button to video.js?
See the [button guide](/docs/guides/button.md) for information on adding a button to 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.

Can we comment this out until we get a button guide?

## Q: Where can I find a list of video.js plugins?
A list of plugins is avialable on [videojs.com](http://videojs.com/plugins).

## Q: How can I get my plugin listend on the website?
Copy link
Member

Choose a reason for hiding this comment

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

"listend" -> "listed"


## Q: How can I get my plugin listend on the website?
Add the 'videojs-plugin' [keyword to your array in package.json](https://docs.npmjs.com/files/package.json#keywords)
and publish your package to npm.
Copy link
Member

Choose a reason for hiding this comment

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

Maybe mention that the generator provides this by default? 😄


## Q: Does video.js support video tracks?
The code for video tracks exists but it has not been tested. See the [video tracks guide](/docs/guides/video-tracks.md)
for more information on using video tracks.
Copy link
Member

Choose a reason for hiding this comment

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

The guide will mention that it's an experimental technology at the top.

project which adds support.

## Q: Does video.js support MPEG Dash video?
video.js itself does not support MPEG DASH, but a project called [videojs-contrib-dash](https://github.com/videojs/videojs-contrib-dash)
Copy link
Member

Choose a reason for hiding this comment

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

"but a project" -> "but there is a project"

if you add it to your page with video.js.

## Q: Can video.js be required in node.js?
Yes! Please submit an issue if this does not work. See the question on submiting issues
Copy link
Member

Choose a reason for hiding this comment

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

"submiting" -> "submitting"

to find out how.

## Q: Does video.js work with webpack?
Yes! Please submit an issue if this does not work. See the question on submiting issues
Copy link
Member

Choose a reason for hiding this comment

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

"submiting" -> "submitting"

switched links to reference style for re-use
code review comments addressed
Yes! See the [install guide][install-guide] for more information.

<!-- guides -->
[plugin-guide]: /docs/guides/plugins
Copy link
Member

Choose a reason for hiding this comment

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

all these links need the .md extension on them.

@gkatsev gkatsev merged commit 1d5562d into videojs:master Dec 2, 2016
@brandonocasey brandonocasey deleted the chore/faq branch December 6, 2016 16:22
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