web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-10-31 00:08:01 +02:00
Code Releases Activity

docs: add a Webpack usage guide (#4261)

Browse Source
This commit is contained in:
Aaron Chamberlain
2017-04-12 15:16:41 -07:00
committed by Gary Katsevman
parent 39fd73f781
commit 230743ecb1
2 changed files with 85 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
docs/guides/faq.md
View File

@@ -268,67 +268,68 @@ Yes! Please [submit an issue or open a pull request][pr-issue-question] if this
Yes! Please [submit an issue or open a pull request][pr-issue-question] if this does not work.
Be sure to use `require('!style-loader!css-loader!video.js/dist/video-js.css')` to inject video.js CSS.
We have a short guide that deals with small configurations that you will need to do. [Webpack and Videojs Configuration][webpack-guide].
## Q: Does video.js work with react?
Yes! See [ReactJS integration example][react-guide].
[reduced-test-case]: https://css-tricks.com/reduced-test-cases/
[react-guide]: /docs/guides/react.md
[plugin-guide]: /docs/guides/plugins.md
[install-guide]: http://videojs.com/getting-started/
[troubleshooting]: /docs/guides/troubleshooting.md
[video-tracks]: /docs/guides/video-tracks.md
[audio-tracks]: /docs/guides/audio-tracks.md
[text-tracks]: /docs/guides/text-tracks.md
[debug-guide]: /docs/guides/debugging.md
[pr-issue-question]: #q-i-think-i-found-a-bug-with-videojs-or-i-want-to-add-a-feature-what-should-i-do
[hls]: http://github.com/videojs/videojs-contrib-hls
[flash]: https://github.com/videojs/videojs-flash
[dash]: http://github.com/videojs/videojs-contrib-dash
[eme]: https://github.com/videojs/videojs-contrib-eme
[generator]: https://github.com/videojs/generator-videojs-plugin
[youtube]: https://github.com/videojs/videojs-youtube
[vimeo]: https://github.com/videojs/videojs-vimeo
[ads]: https://github.com/videojs/videojs-contrib-ads
[pr-template]: http://github.com/videojs/video.js/blob/master/.github/PULL_REQUEST_TEMPLATE.md
[issue-template]: http://github.com/videojs/video.js/blob/master/.github/ISSUE_TEMPLATE.md
[plugin-list]: http://videojs.com/plugins
[skins-list]: https://github.com/videojs/video.js/wiki/Skins
[audio-tracks]: /docs/guides/audio-tracks.md
[contributing-issues]: http://github.com/videojs/video.js/blob/master/CONTRIBUTING.md#filing-issues
[contributing-prs]: http://github.com/videojs/video.js/blob/master/CONTRIBUTING.md#contributing-code
[dash]: http://github.com/videojs/videojs-contrib-dash
[debug-guide]: /docs/guides/debugging.md
[eme]: https://github.com/videojs/videojs-contrib-eme
[flash]: https://github.com/videojs/videojs-flash
[generator]: https://github.com/videojs/generator-videojs-plugin
[hls]: http://github.com/videojs/videojs-contrib-hls
[install-guide]: http://videojs.com/getting-started/
[issue-template]: http://github.com/videojs/video.js/blob/master/.github/ISSUE_TEMPLATE.md
[npm-keywords]: https://docs.npmjs.com/files/package.json#keywords
[plugin-guide]: /docs/guides/plugins.md
[plugin-list]: http://videojs.com/plugins
[pr-issue-question]: #q-i-think-i-found-a-bug-with-videojs-or-i-want-to-add-a-feature-what-should-i-do
[pr-template]: http://github.com/videojs/video.js/blob/master/.github/PULL_REQUEST_TEMPLATE.md
[react-guide]: /docs/guides/react.md
[reduced-test-case]: https://css-tricks.com/reduced-test-cases/
[semver]: http://semver.org/
[skins-list]: https://github.com/videojs/video.js/wiki/Skins
[starter-example]: http://jsbin.com/axedog/edit?html,output
[text-tracks]: /docs/guides/text-tracks.md
[troubleshooting]: /docs/guides/troubleshooting.md
[video-tracks]: /docs/guides/video-tracks.md
[vimeo]: https://github.com/videojs/videojs-vimeo
[vjs-issues]: https://github.com/videojs/video.js/issues
[vjs-prs]: https://github.com/videojs/video.js/pulls
[npm-keywords]: https://docs.npmjs.com/files/package.json#keywords
[semver]: http://semver.org/
[starter-example]: http://jsbin.com/axedog/edit?html,output
[webpack-guide]: /docs/guides/webpack.md
[youtube]: https://github.com/videojs/videojs-youtube

37
docs/guides/webpack.md Normal file
View File

@@ -0,0 +1,37 @@
# Using Webpack with Video.js
video.js, and the playback technologies such as videojs-contrib-hls all work in a Webpack based build environment. Here are several configuration changes specific to Webpack that will get you up and running.
## Video.js CSS:
To add the CSS that the player requires, simply add
`require('!style-loader!css-loader!video.js/dist/video-js.css')` to the file where the player is also included or initialized.
## Handling .eot files in Webpack
In addition to this, you may run into a problem where Webpack does not know how to load .eot files required for IE8 support by default. This can be solved by installing the file-loader and url-loader packages. Install them by running:
`npm install --save-dev file-loader url-loader`
With both packages installed, simply add the following to you webpack.config file in the 'loaders' section:
```
{
loader: 'url-loader?limit=100000',
test: /\.(png|woff|woff2|eot|ttf|svg)$/
}
```
## Using Webpack with videojs-contrib-hls
Import the HLS library with a line such as:
`import * as HLS from 'videojs-contrib-hls';`
In order to use the tech, we must also introduce webworkers with the package 'webworkify-webpack-dropin', run:
`npm install --save-dev webworkify-webpack-dropin`
To utilize this in your page, simply create an alias in your webpack.config.js file with:
```
resolve: {
alias: {
webworkify: 'webworkify-webpack-dropin'
}
}
```
Source maps that use the 'eval' tag are not compatible with webworkify, so this may need to be changed also. Source maps such as 'cheap-eval-module-source-map' should be changed to 'cheap-source-map' or anything else that fits your build without using 'eval' source maps.