This involves updating to latest version of uglify and setting
"screwIE8" to false since that is a default in 2.7. However, this makes
"preserveComments" "some" work as it is supposed to work.
Fixes#3707
There was a potential breakage that was caused by #3349. This restores the timeupdate and loadedmetadata listeners in the duration display that were removed. As part of 6.0, they could be removed as durationchange should be the correct and only listener we need.
* Guard against exceptions in an event handler to stop them from breaking further processing of event handlers
* Added a test for try/catch behavior for exceptions originating in event handlers
- Get rid of our custom XHR shim. Export it as videojs.xhr.
- Updated XHR to be stubbed everywhere in tests to prevent errors.
- Added npm install to the review process
closes#2318closes#2594
This is important for enforcing the model that techs should
work the same for everything.
closes#2590fixes#2060
- Made techGet and techCall private functions
- Made loadTech, techName, and unloadTech private
- Cleaned up all other private method naming in the player
- Removed some unneeded comments
fixes#2414
Our fixEvent script makes a copy of the original event,
but it was failing to also set cancelBubble = true and
returnValue = false on the original event,
which is needed to make IE8 work like modern browsers.
- Fixed a console error in dom tests from loading a track source
- Switched to non-fetching poster urls in tests to prevent errors
- Stubbed XHR for TextTrack tests to prevent log errors
- Fixed text track console errors that stubbing async didn't catch
because there's some async happening in tracks that makes it so
- XHR isn't even used until the test is complete
- Removed extra code
- Added player.dispose more places and fixed attributes test
I want to set the YouTube player (or any other iframe tech)
in the same language than video.js. To do so,
it needs to know the language option.
closes#2342
- Temporarily killed API tests. Combining them with other tests.
- Using browserify:watch for build/temp/video.js (sandbox testing)
- Using karma:watch for automated tests
Using individual watch tasks allows watchify to use smart caching in both
instances.
- Switched to grunt-concurrent for watch tasks
- Switched to travis containers, sudo: false
- Added caching of npm modules in Travis
- Consolidated travis testing
- Cleaned up grunt file
- Fixed travis.yml spacing
- Added the watchAll task for trying it out
- Moved travis test script logic to package.json
- Moved coverage reporting to Travis only
closes#2254
Delay manual progress checks until the tech is ready to avoid errors.
The Flash tech errors if buffered() is called before the SWF has loaded,
for instance.
closes#2316fixes#2288
rel #2289
- Broke out RTMP tests into their own file.
- Cleaned up the currentTime test to not create the swf
- Cleaned up the flash dispose test
- Cleaned up formatting for additional flash tests
--skip-ci
See videojs/cdn#3
- Added a guide note about skipping analytics tracking on the CDN
- Updated videojs-font
- Added videojs-ie8 as a dependency
- Updated the examples directory URLs and added to dist
- Updated CSS to override font path
IE8 compatiblity fixes - Babel loose mode and ES5-shim
Reverted to old isPlainObject to fix IE8
Lodash.isplainobject was throwing a "Member not found error" on elements,
specifically the 'custom' track element being passed in options.
(turned out to be that we were using lodash modern, not compat)
Fixed full-window mode in IE8 by fixing fullscreen API check
Fixed the swf events by creating the object in component.createEl
fixes#2184
Added es5 shim and sham to the sandbox example
related to #1687
Use primary code ('en') if specific code ('en-us') doesn not match
Always re-merge languages
closes#2177
Updated language function to lowercase internally
Updated component.localize to not require stubbing
Preparing to export utility functions on the videojs object
closes#2182
Change el() to getEl() for consistency
Cleaned up DOM functions library
Clean up and document videojs object API
Fixed mergeOptions to modify the first object instead of a copy
More cleanup of the main video.js file and documentation
Fixed issues with mergeOptions
Cleaned up the addLanguage function
Removed unnecessary underscores in private module vars
closes#2166closes#2126
this.tech.emitTapEvents(); should be handled by the tech
De-dupe the bufferedPercent code in both Tech and Player
Have the player generate the tech ID
Added autoplay/preload/loop/muted to tech option
Remove the watch for native timeupdates
Fixed the JSDoc for bufferedPercent
Removed the unit test for native timeupdate
Added cute whitespaces
buffer should always return a TimeRange
Broke out bind, guid, and element data functions from Lib
Separated out more dom functions in to dom.js
Broke out URL functions into url.js
Removed setLocalStorage since it wasn't being used
Moved browser tests out of lib
Moved log functions into their own file
Removed trim() since it wasn't being used
Moved formatTime into its own file
Moved round into its own file and renamed roundFloat()
Moved capitalize into its own file and renamed as toTitleCase()
Moved createTimeRange into its own file
Removed Lib.arr.forEach infavor of the native forEach
Removed Lib.obj.create in favor of native Object.create (ES6-sham)
Removed obj.each in favor of native Object.getOwnPropertyNames().forEach()
Removed obj.merge and copy. Using lodash.assign instead.
Replaced Lib.obj.isPlain with lodash.isPlainObject
Removed Lib.obj.isArray in favor of the native Array.isArray
Also removed the lib.js tests file as all tests have been moved
or removed.
Removed Lib.isEmpty in favor of !Object.getOwnPropertyNames().length
Switched Util.mergeOptions and deepMerge to use new mergeOptions()
Moved Lib.TEST_VID to Html5.TEST_VID
Removed Lib references everywhere. Woo!
Attempting to fix sourcemap test errors by setting grunt-browserify version
Switched to object.assign from lodash.assign
Removed unused 'inherits' dependency
Reorganzied test files and added '.test' to file names
Combined js/core.js and js/video.js
Moved events.js into the utils directory
When we changed to concise methods, we ended up creating a new function
that shadowed the global setInterval, setTimeout, clearInterval, and
clearTimeout methods. A recent change in babel exposed this bug.
This doesn't immediately break anything (I know of) because the controls
were originally designed to work in both border-box and content-box
environments. Extra elements were added to create internally padding.
This does open the door for some simplification of the HTML, though the extra
elements could still be useful for extra skin design options.
closes#2082closes#1444
- removed old less style. no going back now.
- switched back to video-js.scss naming and added a base-style injection class
- cleaned up and simplified big play btn
- Flexbox straight flexin.
- move to using variables for text and icon font families
- use table layout for IE 8 and 9
- moved to using extend for icons
- Switched to SASS, added a new default theme, updated the html
- added horizontal classes
- added connect-watch grunt task
- show all the things in the control bar so everything is available
by default (and hidden via css
- reignore dist for now
- removing trailing comma to get the tests passing
- Switched to using libsass and removed incompatible "black magic"
- updating to es6 syntax
- removed old separator, added grunt task for dev, and updated example
- singular time-control and live-control. remove playing class on pause
- updated separator control styles
- Show full control bar when a player goes to fullscreen.
Also added a grunt task specifically for skin development (only watches sass file changes and runs sass)
- allow poster image to toggle playback
- This allows the poster image to toggle play / pause on audio-only sources
- fixed issue with scrollbars in Chrome on Linux
- make the control bar not-quite-black
- added back some focus highlights until we decide on another path
Firefox recently added selectedOptions support, however, unlike chrome
and other browsers, they made it read-only and have it throw an error.
In my testing (via http://jsfiddle.net/vwvdywf9/), on various browsers and platforms, just using selectedIndex was sufficient to change the selected option.
closes#1877
Fix for #1561. If the HTML tech is being constructed without a video element to work off of, make sure that the controls attribute is only added under the same circumstances it would be at player init. Before this fix, if you loaded the Flash tech and then switched to the HTML tech, you would see the native controls underneath the video.js controls.
Fix controls attribute test on iOS
iOS uses native controls by default and so was failing the assertions that native controls weren't used. Force custom controls for this test case to make it work like everywhere else.
Update nativeControlsForTouch default
The default value changed so fix the predicate that tested for whether it was in use.
closes#1811, closes#1564, closes#1561
This is to make the new source handlers backwards compatible and so it
wont break techs that extend existing techs that were converted to use
source handlers. closes#1746
Added fonts to bower.json in order to work with bower-main-files plugin, you can tell the plugin if you don't want stuff, but you can't say include XYZ, besides fonts are being used in the css.
Squashed commit of the following:
commit 02fe7a40d0958e2ed84a6a0cf2be43bec259c72c
Author: Gary Katsevman <git@gkatsev.com>
Date: Tue Sep 23 14:15:08 2014 -0400
Feature detect old fullscreen instead of UA switch
commit f3eccbbe678c163021d790c69c3ab365e0a1fe1a
Author: Gary Katsevman <git@gkatsev.com>
Date: Mon Sep 22 21:31:34 2014 -0400
No need for if since assume we're in fs
commit 0498b100843e0aa858b166d02a467e4471c126ab
Author: Gary Katsevman <git@gkatsev.com>
Date: Mon Sep 22 21:28:10 2014 -0400
Revert "Don't trigget vjs's fullscreenchange event"
This reverts commit cc45177ee5fa950e665e066d170b137aaeb6e398.
Conflicts:
src/js/media/html5.js
commit 1ed30853efb2ea043da4f18b4fdf75da15f55e88
Author: Gary Katsevman <git@gkatsev.com>
Date: Wed Sep 17 12:00:29 2014 -0400
Listen via 'this.one'.
Don't bother checking whether the video element is fullscreen but just
assume we are fullscreen.
commit 27e27075083d2ad408b5d47055881b2554f59154
Author: Gary Katsevman <git@gkatsev.com>
Date: Tue Sep 16 18:12:36 2014 -0400
Use one for event binding.
commit cc45177ee5fa950e665e066d170b137aaeb6e398
Author: Gary Katsevman <git@gkatsev.com>
Date: Mon Sep 15 17:28:46 2014 -0400
Don't trigget vjs's fullscreenchange event
This event isn't really being used for this usecase right now, so, no
need to trigger it.
commit ad505a680785d638289657aec4edad60879e945a
Author: Gary Katsevman <git@gkatsev.com>
Date: Mon Sep 15 16:45:48 2014 -0400
Update exports for request & cancel fullscreen
commit e423635b6c8ad58a1ba04e1534a51c075e08b73a
Author: Gary Katsevman <git@gkatsev.com>
Date: Mon Sep 15 16:15:10 2014 -0400
On iOS, use ios specific enterFullscreen methods.
commit fe4a8fbf6ad73b6bc8f57d16c44f0ca4d3bf9450
Author: Gary Katsevman <git@gkatsev.com>
Date: Mon Sep 15 14:53:20 2014 -0400
Export isFullScreen correctly. Export isFullscreen as well.
Previously, they could not be navigated to via the keyboard.
Fixs #1517.
Tested via manaul cross-browser tests using keyboard navigation (chrome, firefox, safari, and IE 11 ).
On ended, pause player if not paused or looping
IE11 (and maybe other browsers as well) only fire 'ended' event when the
video ends and doesn't fire pause. This makes IE11 not reset it's state
into a paused state that allows a user to replay immediately. However, a
two clicks on the play/pause button will allow you to replay.
In Chrome, we get first a pause event and then an ended event. When
'loop' is set, neither the last pause nor ended fire.
In the flash tech, the pause and ended events fire like in chrome in all
browsers.
Add tests for onEnded change
Appease jshint.
Trying to create a player-like subclass of component requires overriding languages() but that method was being minified. Add it to externs so that it can be overridden after minification. Fixes#1420.
Clear out pending errors on player disposal.
Source selection errors are dispatched asynchronously so that there is an opportunity to override the error message. If the player is disposed during that period, the error timeout wasn't being cleared properly. Fix for #1480.
Fix whitespace
When defining variables inline with declarations, stick to one variable per line.
Use vjs.obj.create to inherit 'features' from
'MediaTechController.prototype.features'. Because we are inheriting, if
the defaults change (prototype.features), we can receive these updates
in our tech if we had not changed properties of features manually.
updates to change build/lang to build/files/lang
update grunt languages references and version
remove build/lang reference
update languages plugin reference for array support
Binding during keydown will be more effective at preventing certain default behavior like moving the page down as these events may happen prior to keyup. Addresses #1452
Add vjs.isNaN to have a better cross browser isNaN checker.
Previously, only undefined was ignored, so, it tried setting the
dimension using null and NaN as values. In most browsers this isn't a
problem, but in particular on IE8, things break.
With this PR, all three of those values will be ignored.
add base documentation for language support
typo fix
added utility function for adding languages per conversation with @heff. Includes test.
move addLanguage to core. update both core and util tests. added export property
added language sandbox for demo
fix comment
doc udpate
remove build instructions
add addLanguage API to doc
fix deep merge in test
test update
update local reference to string for compiled tests
Migrate the timers that manage creating timeupdate and progress events when the tech doesn't support them natively. Now, techs that extend MediaTechController will continue to automatically pick up synthetic playback and buffering events but they're scoped much more closely to the entity that needs them. In addition, time and progress tracking have been moved much earlier into the component initialization which fixes#1414.
set attributes of video tag and not only values
add unsupported attribute to the video tag - test failing
helper to set attributes on an element from a map of values
dummy compare of html content with a sort of the attributes
ignore html attributes order for comparition
save original tag attributes
restore original tag attributes n creation and overwrite if required by settings
replace object.keys with vjs.obj.each for ie<9
fix spacing
API consistency, getAttributeValues renamed to getElementAttributes
clear variable naming
move setElementAttributes close to getElementAttributes
closes#1334
Update html5.js
If the HTML tag is not removed, the video will still download in the background in Firefox after the player is disposed.
Update component.js
Moved my fix to src/js/media/html5.js
Changed order of html5 element dispose and using this.el_ instead of player.tag
closes#1253
Display a true load progress (with accounting all buffered regions)
Add played property for player
Correctly display played regions in progress-bar
Support #played in MediaFaker so tests would pass
Remove play-progress regions but add some opacity to play-progress
Remove opacity
Revert "Add played property for player"
This reverts commit 6d8bf982c23c85b0e17edf93d7b2d02ded8ff611.
Fixed an issue where a load progress of NaN was throwing an error
Reverted some remaining `played` changes
Updated the progress bar to encapsulate time ranges
In the previous commit the progress bar was broken up into timeranges.
This had the effect of looking broken, so now the progress bar covers
all time ranges, and the time ranges a subtley different in color
from the progress bar.
Previously this was only done in the HTML5 tech, but Flash needs it as well. This relies on videojs/video-js-swf#106.
Also removed the 'not implemented' warnings from the media tech functions. I think there's a better way we can help tech authors here, and it was blocking the ability to check if a function was implemented for real.
Fixes#1300, fixes#1341
The flash tech doesn't need to hold onto a reference to the placeholder element after the embed code has been generated. Set this.el_ to the embed code immediately instead of using another property to track it during init. Tested in IE8.
If dispose() was called before the SWF triggered onReady(), the placeholder div would be cleaned up but the actual object element would be left behind to mess things up in the future. Keep track of the object element during initialization and make sure it is removed if flash is unloaded early.
Corrected API method name and added helpful message on using events.
I was confused for a while regarding how to use the events, so it might help someone else.
Squashed commit of the following:
commit 81d785980d3f3e4c1025f7b421f0ecb7320469f1
Author: Steve Heffernan <steve@zencoder.com>
Date: Mon May 12 12:53:59 2014 -0700
Removed unneeded comments
commit c7ad7322e49df9cb22665692dbfe615dfa44758f
Author: Steve Heffernan <steve@zencoder.com>
Date: Fri May 9 14:29:31 2014 -0700
Addressed comments in #1191
Now clearing errors on loadstart events.
Added some default error messages.
commit a742239d0e799fa6a5fee056cc37b3c2e3ab4510
Author: Steve Heffernan <steve@zencoder.com>
Date: Wed May 7 15:38:31 2014 -0700
Fixed the error display to hide by default
commit 561c3f844956db6f532cae8ed81a86cc39b10db1
Author: Steve Heffernan <steve@zencoder.com>
Date: Mon May 5 10:44:47 2014 -0700
Added support for displaying a message for the error.
commit 22142078427ead85548c4755bf1943a0a07b22b4
Author: Steve Heffernan <steve@zencoder.com>
Date: Fri May 2 17:18:22 2014 -0700
Updated spinner to hide on all errors
commit 95d7e7027467cf96b14db6692d93c7c7f41c5810
Author: Steve Heffernan <steve@zencoder.com>
Date: Fri May 2 15:37:44 2014 -0700
Exported ErrorDisplay
commit 11ca9cdd8db4d1559f5d1908c4e67be32ca7a25e
Author: Steve Heffernan <steve@zencoder.com>
Date: Fri May 2 15:35:46 2014 -0700
Updated flash tech to support new errors
commit 56cbe66f4233e54f13550367590864102f5de0fe
Author: Steve Heffernan <steve@zencoder.com>
Date: Fri May 2 13:06:49 2014 -0700
Started on better error handling and displaying in the UI when an error has occurred.
commit 740014c57b264079cf4084965a9384b49a7c0f64
Author: Steve Heffernan <steve@zencoder.com>
Date: Wed Apr 30 16:11:33 2014 -0700
Added better global log/error/warn functions.
Added sinon.js for stubs in tests.
Updated grunt version to satisfy peer dependency warning.
Squashed commit of the following:
commit d5957da3b282166c882c5d81e64936dec118ecf6
Author: David LaPalomento <dlapalomento@gmail.com>
Date: Mon Mar 31 16:22:43 2014 -0400
Peg the volume control to 1.0 on init
Setup styles so that the volume control initially renders at full volume. This matches browser behavior where volume is available and saves Javascript from having to manually update the volume control on init. After the initial draw, the volume control is updated dynamically the same way it was before.
commit 8bc861fb861d4126f80fd11ed17d1f550498c559
Author: David LaPalomento <dlapalomento@gmail.com>
Date: Wed Mar 12 17:16:30 2014 -0400
Don't force sliders to get evaluated on load
Since the load and play progress sliders are guaranteed to start from zero, set that through CSS. Calling Slider.prototype.update forces a re-flow because element dimensions are queried and style rules changed. That reflow consistently took around 60ms on my laptop which would mean dropped frames and "jerkiness" on initialization.
Included are two sanity check tests for the two areas being checked
to make sure that the menu title items are being correctly placed
in the actual UL element of the menu.
Fixes#1107
Squashed commit of the following:
commit 2c5d4d523e2e1f3a1bcdafda292d6a0ebea7a200
Author: Tom Johnson <seniorflexdeveloper@gmail.com>
Date: Tue Apr 1 15:02:37 2014 -0700
update control text for liveDisplay component
commit 10f21cc2a09b6823a73fae4cf1881490f9038d30
Author: Tom Johnson <seniorflexdeveloper@gmail.com>
Date: Tue Apr 1 12:23:20 2014 -0700
whitespace fix
commit 6a093d67989479f63ed4ac6bdddd5d1a3d0b08bb
Author: Tom Johnson <seniorflexdeveloper@gmail.com>
Date: Tue Apr 1 12:21:42 2014 -0700
remove window scope of infinity
commit 2dd8284bd3c7b2c7692a78563c3cfe9558f25ab4
Author: Tom Johnson <seniorflexdeveloper@gmail.com>
Date: Tue Apr 1 12:12:13 2014 -0700
update to fix infinity capitalization. only do css logic on valid duration. set any duration of less than zero to window.Infinity
commit f940bef8b50156c5b8fcd969c9b5d39be9fe5589
Author: Tom Johnson <seniorflexdeveloper@gmail.com>
Date: Tue Apr 1 10:01:27 2014 -0700
update to less than zero on player durationChange
commit 554c003dac640b7a658355cd46b6ab146cf50b24
Author: Tom Johnson <seniorflexdeveloper@gmail.com>
Date: Mon Mar 31 17:26:13 2014 -0700
update exports, fix tests
commit 2fb10cb06a65c3f91342563bfa925d9a472ede33
Author: Tom Johnson <seniorflexdeveloper@gmail.com>
Date: Mon Mar 31 13:39:00 2014 -0700
fix tests, remove update display list in LiveDisplay
commit bc47c5ed67e036c79067ebc6666b310fd0b68d04
Author: Tom Johnson <seniorflexdeveloper@gmail.com>
Date: Mon Mar 31 13:13:43 2014 -0700
Basic UI for Live
It looks like GCC was mangling `rtmpConnection` and `rtmpStream` before invoking them. Unfortunately, we define those methods as string literals so they do not have mangled equivalents. Invoke them using string literals so GCC never mangles the method names.
patchCanPlayType is called on load.
It patched video#canPlayType if needed.
unpatchCanPlayType will revert the patch and return the patch function.
There are also corresponding tests that test patchCanPlayType,
unpatchCanPlayType and also whether the patch functions themselves work
correctly.
Android devices starting with 4.0 can play HLS natively to some extent.
However, they do not say so in the canPlayType method. This commit
monkey patches canPlayType to respond with "maybe" for
"application/x-mpegURL" and "application/vnd.apple.mpegURL". Otherwise,
it'll fallback to the original canPlayType method.
Some platforms produce frequent mousemove events whether or not the mouse has moved. This causes the UI to always be displayed since userActive_ is always `true`. By keeping track of the last mouse position and only firing if the new position is different, we can eleminate the event spam.
This uses browserify-shim to get browserify to recognize videojs.
It uses dist/video-js/video.js for the main file of the module.
To build using browserify, you just run browserify on the module and
use --standalone (or -s) to make it produce a UMD file.
This seems to work just fine in the browser (and requirejs looks like
it'll work, though, I haven't tested it) but it won't work in node right
now because videojs is doing a lot of stuff with 'document' directly and
its causing problems in node.
Make components listen to touch events themselves.
Components can have a "listenToTouchMove" property that would report
user activity on touch moves.
Currently, the only problem left is that the MediaTechController emits
tap events to show/hide the controlbar but that causes the control bar
to not be hidden via a tap.
It can be handy that src() returns the player object when it is invoked but it does not match the behavior of the corresponding property on the video element. Ignoring the spec however, while the video element is running the resource selection algorithm, currentSrc may be undefined. If the video source has been specified through an attribute on the video element, src() is the natural way to expose that URL programmatically. Without this change, it's necessary to bypass the player and interact with the tech directly to determine the value of the src attribute.
TOUCH_ENABLED is false on non-touch devices which causes our minified API test to fail when opened in a browser on a traditional destktop machine. It worked fine through the command line because apparanetly phantomjs supports touch events (ha!). Check to make sure the property is not undefined instead.
Instead of caching the last seek time at the player level, cache it in the Flash tech. The only place this value was used was in the progress controls when Flash was loaded, so this simplifies the logic in that component and pushes the hack down into a single location at least.
I wanted to use the SeekHandle to show the current time but as far as I could tell it only contained static content, I made this change to allow the content to be updated.
Is this its intended purpose or am I playing with something that has another a different job?
We were checking if `backgroundSize` was present on the video element, not the style property of the video element. That meant the IE fallback was being used on all platforms and breaks aspect-ratio preserving poster scaling for those browsers that support it.
TextTracks are queried during player initialization whether they're present or not so the method must be present on Player objects. Make sure the method name isn't minified so it's possible to create a Player object without having to extend videojs.Player directly.
Use string literals to lookup fullscreen-related methods on the player object in the fullscreenToggle component. Otherwise, closure compiler replaces them with minified method names and makes it impossible to supply a simpler "player" object with customized fullscreen logic for the fullscreenToggle to interact with.
When poster() is called with a URL, fire a `posterchange` event to update the PosterImage source and update the video element attribute.
Trigger posterchange after updating the tech
Wait until the tech has updated its poster image before alerting components so they don't see the intermediate state in event handlers. Remove unused variable from PosterImage.createEl.
Don't create new img elements each time the poster is set on ie8
Create the img fallback for the poster during PosterImage initialization on ie8 so we can avoid having to check and possibly create it each time the src is set. Add a test to ensure that new elements are not appended to the poster component when the img fallback is in use and the src attribute is modified.
fixing a broken IE8 test, and adding a negative test, for poster switching.
modified the poster-switching test to accomodate IE8
added a negative test for an undefined poster
fixed the assertion message in the 'undefined' image case
fixed test breakage in Firefox and IE10 (quotes were not being handled properly in the test data)
testing:
ran the tests at the command line, and in Chrome, Firefox, IE8, IE10, Firefox and Safari
all passed
Chrome 29 on OS X (at least) seems to report fractional dimensions occasionally when integer values are assigned. For example, '123px' might be translated to '123.999998458px'. Parse the value and round it to ignore this slight discrepancy.
Actually, tracks.js contains several pieces of code which could
be re-written more effectively. The problem is that in some places
there are conditional checks like this:
if (condition) {
call_setter( true);
} else {
call_setter( false);
}
which could be re-written to:
call_setter( condition);
This improvement saves some bytes of code length, traffic and should
also work more effectively by utilizing less machine resources
This can be configured by giving the volumeMenuButton, an option like
`{volumeBar: {vertical: false}}`. This can also be used to pass other
options to the volumeBar.
This allows you to define a different element to append children to as opposed to the main component element. Because sometimes components require more than one element to create their structure. e.g. a menu button.
It looks like the newer version of grunt-cli has changed how options objects are forwarded to tasks. The minify (Google closure compiler) task was looking for configuration in the wrong location and the new location no longer automatically expanded path wildcard patterns.
Prime the video element for programmatic access by quickly playing and pausing when entering fullscreen. Only attempt this if the video is paused and no content has been loaded yet. Do so in a setTimeout of 0 because iOS 6.1 devices go into a loop of continuously pausing and playing if you play and pause synchronously while attempting to enter fullscreen. Don't fire `fullscreenchange` if we're forced to use the video elements fullscreen mode because we don't properly detect when exiting fullscreen and it leaves the player stretched out to fill the entire browser window when the user returns from watching.
The MediaTechController calls createEl during its initialization to construct the actual video element used for playback. On iOS, the video element must be recreated during this process so that it doesn't become unresponsive. Make sure that we determine whether recreating the video elemen is necessary before calling the superclass constructor.
I've got a way to run tests across every browser and device out there except for IE8, and IE8 should work except I'm running into a Browserstack bug that I've let them know about.
It uses a project called bunyip, which internallt uses Yeti (YUI), Pagekite, and Browserstack.
Next steps include:
- Making it all automatic. Right now you have to wait for browsers to connect and then manually hit enter when they have.
- Make it a grunt task
- Document it all so others can use it
I think this is close enough for me to close the milestone 4.0 issue.
When transferring the poster attribute from the container to the tech in mediafaker, use the accessor methods instead of directly referencing the private properties.
We use a div with a background image to simulate the poster image so that we can use a single poster implementation for flash and html. It may be desirable on some platforms to use the native poster image, however. On iPhones for instance, the simulated poster image covers up the native play button and can make it difficult to figure out where to touch to initiate playback. By keeping the poster attribute on the underlying video element, you can hide the simulated poster to get a native look-and-feel on that platform.
Disabled is a bit overloaded with visible but unusable controls, so use hidden instead. Re-arrange default styles a bit and use dom helper methods instead of the vjs-objection functions.
Use a new CSS class 'vjs-disabled' to disable display of the volume controls. This allows custom styles the flexibility to use methods other than `display:block` to layout the controls.
If you are quick, you could get videojs to wrap the HTML video element twice on iOS. The video element has to be recreated after moving on iOS but we weren't re-associating it with the player object. When autoSetup swung through, it would re-initialize the video element and create a player within a player.
The volume controls and mute toggle are guarding against not having a tech present, so it's no longer necessary to mock the tech for all command-line tests. Individual tests continue to do so using PlayerTest.makePlayer.
Hide volume slider and mute toggle when the current tech doesn't support adjusting video volume. Added controls specific test cases. Volume-related controls retest whether to display themselves whenever `loadstart` fires.
The existing poster implementation uses an <img> tag
stretched horizontally with capped max-height. This
works in some cases like pillar-boxing when the poster
is not as wide as the player. However it fails to
letter box when the player is taller than the poster.
This change uses a stretched div with background-image
and backround-size to create a vertically aligned
poster image which stretches in both directions to fit
while maintaining aspect ratio.
For browsers which do not support backgroundSize (IE8)
the original <img> based strategy is used as a fallback.
Get rid of the extra switching logic to force Flash tech. Worth noting: it has to exist as a separate script tag because we're using document.write to insert video.js scripts.
Get rid of the extra switching logic to force Flash tech. Worth noting: it has to exist as a separate script tag because we're using document.write to insert video.js scripts.
Implementation has been modified to utilize the firstplay event to set
the custom start time offset of the video.
If in the data-setup array an attribute of "starttime" is specified,
then the video will start playback from the passed index in seconds.
Note: Video will only start from this index on first play only.
The flag is used to determine if loop video is set to true,
once the video starts, options_['loop'] will always be set to false.
This allows the onEnded event to always be fired and allows us to set
custom start-time for when the video loops.
(When loop is normally set the onEnd end onPlay events are never called
their for this flag is necessary)
1) The Start Time can be set via the data-setup array
2) If 'start-time' is not present defaut time of 0 seconds is used
3) To set a custom start time for a video simply set start-time to be
equal to the number of seconds from the start of the video you would
like to begin at.
For Example: "start-time":80 means that the video will start at
timecode 00:01:20 -> HH:MM:SS
- Correct the example where the value of techOrder is a hash when it should be an array.
- Make examples clearer that the elements of this array should be strings, not another array.
*@tbasse fixed techCall null check against tech ([view](https://github.com/videojs/video.js/pull/2676))
*@rbran100 checked src and currentSrc in handleTechReady to work around mixed content issues in chrome ([view](https://github.com/videojs/video.js/pull/3287))
*@OwenEdwards fixed caption settings dialog labels for accessibility ([view](https://github.com/videojs/video.js/pull/3281))
*@OwenEdwards removed spurious head tags in the simple-embed example ([view](https://github.com/videojs/video.js/pull/3438))
*@ntadej added a null check to errorDisplay usage ([view](https://github.com/videojs/video.js/pull/3440))
*@misteroneill fixed logging issues on IE by separating fn.apply and stringify checks ([view](https://github.com/videojs/video.js/pull/3444))
*@misteroneill fixed npm test from running coveralls locally ([view](https://github.com/videojs/video.js/pull/3449))
*@gkatsev added es6-shim to tests. Fixes Flash duration test ([view](https://github.com/videojs/video.js/pull/3453))
*@misteroneill corrects test assertions for older IEs in the log module ([view](https://github.com/videojs/video.js/pull/3454))
*@gkatsev fixed setting lang by looping through loop element variable and not constant tag ([view](https://github.com/videojs/video.js/pull/3455))
## 5.10.8 (2016-08-08)
*@gkatsev re-published to make sure that the audio button has css
## 5.10.7 (2016-06-27)
*@gkatsev pinned node-sass to 3.4 ([view](https://github.com/videojs/video.js/pull/3401))
*@mister-ben added try catch to volume and playbackrate checks. Fixes #3315 ([view](https://github.com/videojs/video.js/pull/3320))
*@m14t removed unused loadEvent property in ControlBar options ([view](https://github.com/videojs/video.js/pull/3363))
*@bklava updated pt-BR language file ([view](https://github.com/videojs/video.js/pull/3373))
*@mister-ben updated menus to use default videojs font-family ([view](https://github.com/videojs/video.js/pull/3384))
*@vdeshpande fixed chapters getting duplicated each time a track is loaded ([view](https://github.com/videojs/video.js/pull/3354))
## 5.10.6 (2016-06-20)
*@gkatsev fix not fully minified video.min.js file.
## 5.10.5 (2016-06-07)
*@gkatsev pinned dependencies to direct versions ([view](https://github.com/videojs/video.js/pull/3338))
*@gkatsev fixed minified vjs in ie8 when initialized with id string ([view](https://github.com/videojs/video.js/pull/3357))
*@IJsLauw fixed unhandled exception in deleting poster on ios7 ([view](https://github.com/videojs/video.js/pull/3337))
## 5.10.4 (2016-05-31)
* Patch release to fix dist on npm
## 5.10.3 (2016-05-27)
*@BrandonOCasey fixed source handlers being disposed multiple times when a video is put into the video element directly ([view](https://github.com/videojs/video.js/pull/3343))
## 5.10.2 (2016-05-12)
*@gkatsev nulled out currentSource_ in setSource ([view](https://github.com/videojs/video.js/pull/3314))
## 5.10.1 (2016-05-03)
*@nickygerritsen Pass tech options to source handlers ([view](https://github.com/videojs/video.js/pull/3245))
*@gkatsev Use fonts 2.0 that do not require wrapping codepoints ([view](https://github.com/videojs/video.js/pull/3252))
*@chrisauclair Make controls visible for accessibility reasons ([view](https://github.com/videojs/video.js/pull/3237))
*@gkatsev updated text track documentation and crossorigin warning. Fixes #1888, #1958, #2628, #3202 ([view](https://github.com/videojs/video.js/pull/3256))
*@BrandonOCasey added audio and video track support ([view](https://github.com/videojs/video.js/pull/3173))
*@OwenEdwards added language attribute in HTML files for accessibility ([view](https://github.com/videojs/video.js/pull/3257))
*@incompl clear currentSource_ after subsequent loadstarts ([view](https://github.com/videojs/video.js/pull/3285))
*@forbesjo add an audio track selector menu button ([view](https://github.com/videojs/video.js/pull/3223))
## 5.9.2 (2016-04-19)
*@gkatsev grouped text track errors in the console, if we can ([view](https://github.com/videojs/video.js/pull/3259))
## 5.9.1 (2016-04-19)
*@benjipott updated IS_CHROME to not be true on MS Edge ([view](https://github.com/videojs/video.js/pull/3232))
*@mister-ben blacklisted Chrome for Android for playback rate support ([view](https://github.com/videojs/video.js/pull/3246))
*@gkatsev made the first emulated text track enabled by default ([view](https://github.com/videojs/video.js/pull/3248))
*@gkatsev fixed removeRemoteTextTracks not working with return value from addRemoteTextTracks ([view](https://github.com/videojs/video.js/pull/3253))
*@forbesjo added back the background color to the poster ([view](https://github.com/videojs/video.js/pull/3267))
*@gkatsev fixed text track tests for older IEs ([view](https://github.com/videojs/video.js/pull/3269))
## 5.9.0 (2016-04-05)
*@gkatsev updated vjs to not add dynamic styles when VIDEOJS_NO_DYNAMIC_STYLE is set ([view](https://github.com/videojs/video.js/pull/3093))
*@OwenEdwards added basic descriptions track support ([view](https://github.com/videojs/video.js/pull/3098))
*@ricardosiri68 changed the relative sass paths ([view](https://github.com/videojs/video.js/pull/3147))
*@gkatsev added an option to keep the tooltips inside the player bounds ([view](https://github.com/videojs/video.js/pull/3149))
*@defli added currentWidth and currentHeight methods to the player ([view](https://github.com/videojs/video.js/pull/3144))
* fix IE8 tests for VIDEOJS_NO_DYNAMIC_STYLE ([view](https://github.com/videojs/video.js/pull/3215))
*@OwenEdwards fixed links adding extra tab stop with IE by removing anchor tags on videojs init ([view](https://github.com/videojs/video.js/pull/3194))
*@scaryguy updated videojs cdn urls in the README ([view](https://github.com/videojs/video.js/pull/3195))
*@mister-ben updated the time tooltips to use the chosen font family ([view](https://github.com/videojs/video.js/pull/3213))
*@OwenEdwards improved handling of deprecated use of Button component ([view](https://github.com/videojs/video.js/pull/3236))
*@forbesjo added chrome for PR tests ([view](https://github.com/videojs/video.js/pull/3235))
*@MCGallaspy added vttjs to the self-hosting guide ([view](https://github.com/videojs/video.js/pull/3229))
*@chrisauclair added ARIA region and label to player element ([view](https://github.com/videojs/video.js/pull/3227))
*@andyearnshaw updated document event handlers to use el.ownerDocument ([view](https://github.com/videojs/video.js/pull/3230))
## 5.8.8 (2016-04-04)
*@vtytar fixed auto-setup failing if taking too long to load ([view](http://github.com/videojs/video.js/pull/3233))
*@seescode fixed css failing on IE8 due to incorrect ie8 hack ([view](http://github.com/videojs/video.js/pull/3226))
*@seescode fixed dragging on mute toggle changing the volume ([view](http://github.com/videojs/video.js/pull/3228))
## 5.8.7 (2016-03-29)
*@llun fixed menus from throwing when focused when empty ([view](https://github.com/videojs/video.js/pull/3218))
*@mister-ben added dir=ltr to control bar and loading spinner ([view](https://github.com/videojs/video.js/pull/3221))
*@avreg fixed notSupportedMessage saying video when meaning media ([view](https://github.com/videojs/video.js/pull/3222))
*@mister-ben updated Arabic language files ([view](https://github.com/videojs/video.js/pull/3225))
## 5.8.6 (2016-03-25)
*@misteroneill fixed typo and indenting in language files ([view](https://github.com/videojs/video.js/pull/3207))
## 5.8.5 (2016-03-17)
*@gkatsev cleared vttjs script handlers on dispose. Fixed tests ([view](https://github.com/videojs/video.js/pull/3189))
## 5.8.4 (2016-03-17)
*@gkatsev changed emulated tracks to in novtt to wait for vttjs to load or error before parsing ([view](https://github.com/videojs/video.js/pull/3181))
## 5.8.3 (2016-03-10)
*@gkatsev fixed keyboard control of menus with titles. Fixes #3164 ([view](https://github.com/videojs/video.js/pull/3165))
*@gkatsev updated videojs badges in the README ([view](https://github.com/videojs/video.js/pull/3134))
*@BrandonOCasey converted remaining text-track modules to ES6 ([view](https://github.com/videojs/video.js/pull/3130))
*@gkatsev cleared waiting/spinner on timeupdate. Fixes #3124 ([view](https://github.com/videojs/video.js/pull/3138))
*@BrandonOCasey updated text track unit tests to use full es6 syntax ([view](https://github.com/videojs/video.js/pull/3148))
*@defli added missing var to sandbox index.html example ([view](https://github.com/videojs/video.js/pull/3155))
*@defli fixed typo and updated Turkish translations ([view](https://github.com/videojs/video.js/pull/3156))
*@OwenEdwards fixed menu closing on ios, specifically ipad ([view](https://github.com/videojs/video.js/pull/3158))
## 5.8.0 (2016-02-19)
*@gkatsev added issue and PR templates for github ([view](https://github.com/videojs/video.js/pull/3117))
*@Nipoto added fa.json (farsi/persian lang file) ([view](https://github.com/videojs/video.js/pull/3116))
*@forbesjo updated travis to use latest firefox ([view](https://github.com/videojs/video.js/pull/3112))
*@Naouak updated time display to not change if values do not change ([view](https://github.com/videojs/video.js/pull/3101))
*@forbesjo updated track settings to not fail restoring settings when localStorage is not available ([view](https://github.com/videojs/video.js/pull/3120))
*@mister-ben Added en.json as localization template ([view](https://github.com/videojs/video.js/pull/3096))
*@misteroneill added alt css as video-js-cdn.css ([view](https://github.com/videojs/video.js/pull/3118))
## 5.7.1 (2016-02-11)
*@alex-phillips fixed reference to videojs-vtt.js dependency ([view](https://github.com/videojs/video.js/pull/3080))
*@gkatsev fixed minified videojs in IE8. Fixes #3064 and #3070 ([view](https://github.com/videojs/video.js/pull/3104))
## 5.7.0 (2016-02-04)
*@forbesjo updated emulated tracks to have listeners removed when they are removed ([view](https://github.com/videojs/video.js/pull/3046))
*@incompl improved the UX of time tooltips ([view](https://github.com/videojs/video.js/pull/3060))
*@gkatsev updated README to include links to plugins page and getting started and cleaner link to LICENSE ([view](https://github.com/videojs/video.js/pull/3066))
*@hartman Corrected adaptive layout selectors to match their intent ([view](https://github.com/videojs/video.js/pull/2923))
*@mister-ben updated Umuted to Unmute in lang files ([view](https://github.com/videojs/video.js/pull/3053))
*@hartman updated fullscreen and time controls for more consistent widths ([view](https://github.com/videojs/video.js/pull/2893))
*@hartman Set a min-width for the progress slider of 4em ([view](https://github.com/videojs/video.js/pull/2902))
*@brkattk updated emulateTextTrack to exit early if no textTracks ([view](https://github.com/videojs/video.js/pull/2426))
*@chemoish Fix captions sticking to bottom for webkit browsers. Fixes #2193 ([view](https://github.com/videojs/video.js/pull/2702))
*@imbcmdth Deferred the implementation of select functions in the tech to source handlers if they provide them ([view](https://github.com/videojs/video.js/pull/2760))
## 5.0.2 (2015-10-23)
*@imbcmdth fixed an issue with emulateTextTracks being called before the tech dom was ready ([view](https://github.com/videojs/video.js/pull/2692))
*@gkatsev bumped obj.assign to fix uncaught SecurityError in iframes. Fixes #2703 ([view](https://github.com/videojs/video.js/pull/2721))
*@gkatsev updated contrib update and have contrib release only update local branches ([view](https://github.com/videojs/video.js/pull/2723))
*@gkatsev bumped chg to fix stalling issues ([view](https://github.com/videojs/video.js/pull/2732))
## 5.0.0 (2015-09-29)
*@carpasse infer MIME types from file extensions in the HTML5 and Flash techs ([view](https://github.com/videojs/video.js/pull/1974))
*@mmcc updated the slider to allow for vertical orientation ([view](https://github.com/videojs/video.js/pull/1816))
*@dmlap removed an ie6 hack for flash object embedding ([view](https://github.com/videojs/video.js/pull/1946))
*@heff replaced Closure Compiler with Uglify for minification ([view](https://github.com/videojs/video.js/pull/1940))
*@OleLaursen added a Danish translation ([view](https://github.com/videojs/video.js/pull/1899))
*@dn5 Added new translations (Bosnian, Serbian, Croatian) ([view](https://github.com/videojs/video.js/pull/1897))
*@mmcc (and others) converted the whole project to use ES6, Babel and Browserify ([view](https://github.com/videojs/video.js/pull/1976))
*@heff converted all classes to use ES6 classes ([view](https://github.com/videojs/video.js/pull/1993))
*@mmcc added ES6 default args and template strings ([view](https://github.com/videojs/video.js/pull/2015))
*@dconnolly replaced JSON.parse with a safe non-eval JSON parse ([view](https://github.com/videojs/video.js/pull/2077))
*@mmcc added a new default skin, switched to SASS, modified the html ([view](https://github.com/videojs/video.js/pull/1999))
*@gkatsev removed event.isDefaultPrevented in favor of event.defaultPrevented ([view](https://github.com/videojs/video.js/pull/2081))
*@heff added and `extends` function for external subclassing ([view](https://github.com/videojs/video.js/pull/2078))
*@forbesjo added the `scrubbing` property ([view](https://github.com/videojs/video.js/pull/2080))
*@heff switched to border-box sizing for all player elements ([view](https://github.com/videojs/video.js/pull/2082))
*@forbesjo added a vjs-button class to button controls ([view](https://github.com/videojs/video.js/pull/2084))
*@bc-bbay Load plugins before controls ([view](https://github.com/videojs/video.js/pull/2094))
*@bc-bbay rename onEvent methods to handleEvent ([view](https://github.com/videojs/video.js/pull/2093))
*@dmlap added an error message if techOrder is not in options ([view](https://github.com/videojs/video.js/pull/2097))
*@dconnolly exported the missing videojs.plugin function ([view](https://github.com/videojs/video.js/pull/2103))
*@mmcc added back the captions settings styles ([view](https://github.com/videojs/video.js/pull/2112))
*@gkatsev updated the component.js styles to match the new style guide ([view](https://github.com/videojs/video.js/pull/2105))
*@gkatsev added error logging for bad JSON formatting ([view](https://github.com/videojs/video.js/pull/2113))
*@gkatsev added a sensible toJSON function ([view](https://github.com/videojs/video.js/pull/2114))
*@bc-bbay fixed instance where progress bars would go passed 100% ([view](https://github.com/videojs/video.js/pull/2040))
*@eXon began Tech 2.0 work, improved how tech events are handled by the player ([view](https://github.com/videojs/video.js/pull/2057))
*@gkatsev added get and set global options methods ([view](https://github.com/videojs/video.js/pull/2115))
*@heff added support for fluid widths, aspect ratios, and metadata defaults ([view](https://github.com/videojs/video.js/pull/1952))
*@heff reorganized all utility functions in the codebase ([view](https://github.com/videojs/video.js/pull/2139))
*@eXon made additional tech 2.0 improvements listed in #2126 ([view](https://github.com/videojs/video.js/pull/2166))
*@heff Cleaned up and documented src/js/video.js and DOM functions ([view](https://github.com/videojs/video.js/pull/2182))
*@mmcc Changed to pure CSS slider handles ([view](https://github.com/videojs/video.js/pull/2132))
*@mister-ben updated language support to handle language codes with regions ([view](https://github.com/videojs/video.js/pull/2177))
*@heff changed the 'ready' event to always be asynchronous ([view](https://github.com/videojs/video.js/pull/2188))
*@heff fixed instances of tabIndex that did not have a capital I ([view](https://github.com/videojs/video.js/pull/2204))
*@heff fixed a number of IE8 and Flash related issues ([view](https://github.com/videojs/video.js/pull/2206))
*@heff Reverted .video-js inline-block style to fix Flash fullscreen ([view](https://github.com/videojs/video.js/pull/2217))
*@mmcc switched to using button elements for button components ([view](https://github.com/videojs/video.js/pull/2209))
*@mmcc increased the size of the progress bar and handle on hover ([view](https://github.com/videojs/video.js/pull/2216))
*@mmcc moved the fonts into their own repo ([view](https://github.com/videojs/video.js/pull/2223))
*@mmcc deprecated the options() function and removed internal uses ([view](https://github.com/videojs/video.js/pull/2229))
*@carpasse enhanced events to allow passing a second data argument ([view](https://github.com/videojs/video.js/pull/2163))
*@bc-bbay made the duration display update itself on loadedmetadata ([view](https://github.com/videojs/video.js/pull/2169))
*@arwidt added Swedish and Finnish translations ([view](https://github.com/videojs/video.js/pull/2189))
*@heff moved all the CDN logic into videojs/cdn ([view](https://github.com/videojs/video.js/pull/2230))
*@mmcc fixed the progress handle transition jerkiness ([view](https://github.com/videojs/video.js/pull/2219))
*@dmlap added support for the seekable property ([view](https://github.com/videojs/video.js/pull/2208))
*@mmcc un-hid the current and remaining times by default ([view](https://github.com/videojs/video.js/pull/2241))
*@pavelhoral fixed a bug with user activity that caused the control bar to flicker ([view](https://github.com/videojs/video.js/pull/2299))
*@dmlap updated to videojs-swf@4.7.1 to fix a video dimensions issue on subsequent loads ([view](https://github.com/videojs/video.js/pull/2281))
*@mmcc added the vjs-big-play-centered class ([view](https://github.com/videojs/video.js/pull/2293))
*@thijstriemstra added a logged error when a plugin is missing ([view](https://github.com/videojs/video.js/pull/1931))
*@gkatsev fixed the texttrackchange event and text track display for non-native tracks ([view](https://github.com/videojs/video.js/pull/2215))
*@mischizzle fixed event.relatedTarget in Firefox ([view](https://github.com/videojs/video.js/pull/2025))
*@mboles updated JSDoc comments everywhere to prepare for new docs ([view](https://github.com/videojs/video.js/pull/2270))
*@mmcc added a currentTime tooltip to the progress handle ([view](https://github.com/videojs/video.js/pull/2255))
*@pavelhoral fixed subclassing without a constructor ([view](https://github.com/videojs/video.js/pull/2308))
*@dmlap fixed a vjs_getProperty error caused by a progress check before the swf was ready ([view](https://github.com/videojs/video.js/pull/2316))
*@dmlap exported the videojs.log function ([view](https://github.com/videojs/video.js/pull/2317))
*@gkatsev updated vttjs to fix a trailing comma JSON error ([view](https://github.com/videojs/video.js/pull/2331))
*@gkatsev exported the videojs.bind() function ([view](https://github.com/videojs/video.js/pull/2332))
* Insert cloned el back into DOM. Fixes #2214 ([view](https://github.com/videojs/video.js/pull/2334))
*@heff sped up testing ([view](https://github.com/videojs/video.js/pull/2254))
* pass fs state to player from enterFullscreen, split full-window styles into their own selector ([view](https://github.com/videojs/video.js/pull/2357))
* Fixed vertical option for volumeMenuButton ([view](https://github.com/videojs/video.js/pull/2352))
*@dmlap switched events to not bubble by default ([view](https://github.com/videojs/video.js/pull/2351))
*@dmlap export a basic played() on techs ([view](https://github.com/videojs/video.js/pull/2384))
*@dmlap use seekable on source handlers when defined ([view](https://github.com/videojs/video.js/pull/2376))
*@dmlap fire seeking in the flash tech, not the SWF ([view](https://github.com/videojs/video.js/pull/2372))
*@dmlap expose the xhr helper utility ([view](https://github.com/videojs/video.js/pull/2321))
*@misteroneill fixed internal extends usage and added a deprecation warning ([view](https://github.com/videojs/video.js/pull/2390))
*@eXon added the poster to the options the tech receives ([view](https://github.com/videojs/video.js/pull/2338))
*@eXon made sure the volume persists between tech changes ([view](https://github.com/videojs/video.js/pull/2340))
*@eXon added the language to the options the tech receives ([view](https://github.com/videojs/video.js/pull/2338))
*@mmcc Added "inline" option to MenuButton and updated VolumeMenuButton to be able to utilize it ([view](https://github.com/videojs/video.js/pull/2378))
*@misteroneill restore some properties on window.videojs. ([view](https://github.com/videojs/video.js/pull/2395))
*@misteroneill restore some 4.x utilities and remove deprecated functionality ([view](https://github.com/videojs/video.js/pull/2406))
*@heff use a synchronous ready() internally ([view](https://github.com/videojs/video.js/pull/2392))
*@nickygerritsen scrubbing() is a method, not a property ([view](https://github.com/videojs/video.js/pull/2411))
*@sirlancelot change "video" to "media" in error messages ([view](https://github.com/videojs/video.js/pull/2409))
*@nickygerritsen use the default seekable when a source handler is unset ([view](https://github.com/videojs/video.js/pull/2401))
*@gkatsev always use emulated TextTrackLists so tracks survive tech switches ([view](https://github.com/videojs/video.js/pull/2425))
*@gkatsev exported event helpers on videojs object ([view](https://github.com/videojs/video.js/pull/2491))
*@nickygerritsen fixed texttrack handling in IE10 ([view](https://github.com/videojs/video.js/pull/2481))
*@gkatsev deep clone el for iOS to preserve tracks ([view](https://github.com/videojs/video.js/pull/2494))
*@forbesjo switched automated testing to BrowserStack ([view](https://github.com/videojs/video.js/pull/2492))
*@gkatsev fixed nativeControlsForTouch handling. Defaults to native controls on iphone and native android browsers. ([view](https://github.com/videojs/video.js/pull/2499))
*@heff fixed cross-platform track tests by switching to a fake tech ([view](https://github.com/videojs/video.js/pull/2496))
*@gkatsev improved tech controls listener handling. ([view](https://github.com/videojs/video.js/pull/2511))
*@dmlap move seek on replay into the flash tech ([view](https://github.com/videojs/video.js/pull/2527))
*@dmlap@gkatsev improve Flash tech error property and add an error setter to the base tech ([view](https://github.com/videojs/video.js/pull/2517))
*@dmlap update to videojs-swf 5.0.0-rc1 ([view](https://github.com/videojs/video.js/pull/2528))
*@dmlap expose start and end buffered times ([view](https://github.com/videojs/video.js/pull/2501))
*@heff fixed a number of console errors after testing ([view](https://github.com/videojs/video.js/pull/2513))
*@gkatsev made the sass files available via npm in src/css ([view](https://github.com/videojs/video.js/pull/2546))
*@heff removed playerOptions from plugin options because it created an inconsistency in plugin inits ([view](https://github.com/videojs/video.js/pull/2532))
*@heff added a default data attribute to fix the progress handle display in IE8 ([view](https://github.com/videojs/video.js/pull/2547))
*@heff added back the default cdn url for the swf ([view](https://github.com/videojs/video.js/pull/2533))
*@gkatsev fixed the default state of userActive ([view](https://github.com/videojs/video.js/pull/2557))
*@heff fixed event bubbling in IE8 ([view](https://github.com/videojs/video.js/pull/2563))
*@heff cleaned up internal duration handling ([view](https://github.com/videojs/video.js/pull/2552))
*@heff fixed the UI for live streams ([view](https://github.com/videojs/video.js/pull/2557))
*@gkatsev updated opacity of caption settings background color ([view](https://github.com/videojs/video.js/pull/2573))
*@gkatsev made all sass variables !default ([view](https://github.com/videojs/video.js/pull/2574))
*@heff fixed the inline volume control and made it the default ([view](https://github.com/videojs/video.js/pull/2553))
*@dmlap update to videojs-swf v4.7.3 ([view](https://github.com/videojs/video.js/pull/2457))
## 4.12.12 (2015-07-23)
*@imbcmdth updated source handlers to use bracket notation so they wont break when using minified videojs ([view](https://github.com/videojs/video.js/pull/2348))
*@tjenkinson Added background-color to vjs-poster to remove transparent borders around scaled poster image ([view](https://github.com/videojs/video.js/pull/2138))
*@bc-bbay fixed a bug where the player would try to autoplay when there was no source ([view](https://github.com/videojs/video.js/pull/2127))
*@bc-bbay update time display on loadedmetadata ([view](https://github.com/videojs/video.js/pull/2151))
*@dmlap update swf to 4.7 to pick up preload fix ([view](https://github.com/videojs/video.js/pull/2170))
## 4.12.6 (2015-05-07)
*@saxena-gaurav fixed a bug from disposing after changing techs ([view](https://github.com/videojs/video.js/pull/2125))
## 4.12.5 (2015-03-17)
* Updated to videojs-swf v4.5.4 to fix a potential security issue ([view](https://github.com/videojs/video.js/pull/1955))
## 4.12.4 (2015-03-05)
* Randomized the Google Analytics calls to stay under the limit ([view](https://github.com/videojs/video.js/pull/1916))
## 4.12.3 (2015-02-28)
*@heff fixed setting the source to an empty string ([view](https://github.com/videojs/video.js/pull/1905))
## 4.12.2 (2015-02-27)
*@gkatsev fixed disabling of default text tracks ([view](https://github.com/videojs/video.js/pull/1892))
## 4.12.1 (2015-02-19)
*@gkatsev fixed the track list reference while switching techs that use emulated tracks ([view](https://github.com/videojs/video.js/pull/1874))
*@gkatsev fixed a Firefox error with the captions settings select menu options ([view](https://github.com/videojs/video.js/pull/1877))
## 4.12.0 (2015-02-17)
*@PeterDaveHello added a Traditional Chinese translation ([view](https://github.com/videojs/video.js/pull/1729))
*@mmcc updated the hide/show functions to use a class instead of inline styles ([view](https://github.com/videojs/video.js/pull/1681))
*@mister-ben added better handling of the additional videojs() arguments when the player is already initialized ([view](https://github.com/videojs/video.js/pull/1730))
*@anhskohbo added a Vietnamese translation ([view](https://github.com/videojs/video.js/pull/1734))
*@Sxmanek added a Czech translation ([view](https://github.com/videojs/video.js/pull/1739))
*@jcaron23 added the vjs-scrubbing CSS class and prevented menus from showing while scrubbing ([view](https://github.com/videojs/video.js/pull/1741))
*@dmlap fixed URL parsing in IE9 ([view](https://github.com/videojs/video.js/pull/1765))
*@gkatsev Fixed issue where ManualTimeUpdatesOff was not de-registering events ([view](https://github.com/videojs/video.js/pull/1793))
*@brycefisher Added a guide on player disposal ([view](https://github.com/videojs/video.js/pull/1803))
*@toniher added a Catalan translation ([view](https://github.com/videojs/video.js/pull/1794))
*@mmcc added a VERSION key to the videojs object ([view](https://github.com/videojs/video.js/pull/1798))
*@mmcc fixed an issue with text track hiding introduced in #1681 ([view](https://github.com/videojs/video.js/pull/1804))
*@dmlap exported video.js as a named AMD module ([view](https://github.com/videojs/video.js/pull/1844))
*@dmlap fixed poster hiding when the loadstart event does not fire ([view](https://github.com/videojs/video.js/pull/1834))
*@chikathreesix fixed an object delete error in Chrome ([view](https://github.com/videojs/video.js/pull/1858))
*@steverandy fixed an issue with scrolling over the player on touch devices ([view](https://github.com/videojs/video.js/pull/1809))
*@mmcc improved tap sensitivity ([view](https://github.com/videojs/video.js/pull/1830))
*@mister-ben added a vjs-ended class when playback reaches the end of the timeline ([view](https://github.com/videojs/video.js/pull/1857))
*@dmlap Add network and ready state properties ([view](https://github.com/videojs/video.js/pull/1854))
*@woollybogger exported the hasClass function ([view](https://github.com/videojs/video.js/pull/1839))
*@DevGavin fixed the Chinese translation ([view](https://github.com/videojs/video.js/pull/1841))
*@heff fixed type support checking for an empty src string ([view](https://github.com/videojs/video.js/pull/1797))
*@carpasse fixed a bug in updating child indexes after removing components ([view](https://github.com/videojs/video.js/pull/1814))
*@dmlap fixed a bug where native controls would show after switching techs ([view](https://github.com/videojs/video.js/pull/1811))
*@H1D fixed an issue with file extension type detection ([view](https://github.com/videojs/video.js/pull/1818))
*@bclwhitaker updated to v4.5.3 of video-js-swf ([view](https://github.com/videojs/video.js/pull/1823))
## 4.11.3 (2014-12-19)
*@gdkraus fixed a bug where you could no longer tab-navigate passed a menu button ([view](https://github.com/videojs/video.js/pull/1760))
*@matteos exported the setSource functions so source handlers will work in the minified version ([view](https://github.com/videojs/video.js/pull/1753))
*@mmcc fixed a bug where the playback rate menu would not open ([view](https://github.com/videojs/video.js/pull/1716))
*@gkatsev fixed an issue with source handlers that caused subclasses of source handler classes to break ([view](https://github.com/videojs/video.js/pull/1746))
## 4.11.1 (2014-12-04)
*@heff fixed a code bug in track XHR requests ([view](https://github.com/videojs/video.js/pull/1715))
## 4.11.0 (2014-12-04)
*@rutkat updated sliders to use keydown instead of keyup for more responsive key control ([view](https://github.com/videojs/video.js/pull/1616))
*@toloudis fixed an issue with checking for an existing source on the video element ([view](https://github.com/videojs/video.js/pull/1651))
*@rafalwrzeszcz fixed the Flash object tag markup for strict XML ([view](https://github.com/videojs/video.js/pull/1702))
*@thijstriemstra fixed a number of typos in the docs ([view](https://github.com/videojs/video.js/pull/1704))
*@heff added the Source Handler interface for handling advanced formats including adaptive streaming ([view](https://github.com/videojs/video.js/pull/1560))
*@azawawi added an Arabic translation ([view](https://github.com/videojs/video.js/pull/1692))
*@mmcc added functions for better timeout and interval handling ([view](https://github.com/videojs/video.js/pull/1642))
*@mmcc fixed the vdata exception when you dispose a player with tracks ([view](https://github.com/videojs/video.js/pull/1710))
*@nemesreviz added a Hungarian translation ([view](https://github.com/videojs/video.js/pull/1711))
*@heff updated the SWF to the latest version ([view](https://github.com/videojs/video.js/pull/1714))
## 4.10.2 (2014-10-30)
*@heff fixed checking for child options in the parent options to allow for 'false' ([view](https://github.com/videojs/video.js/pull/1630))
*@heff fixed the VolumeMenuButton options to allow passing 'vertical' to the VolumeBar ([view](https://github.com/videojs/video.js/pull/1631))
*@mmcc fixed localization of captions/subtitles menu off buttons ([view](https://github.com/videojs/video.js/pull/1632))
## 4.10.1 (2014-10-29)
@heff removed his own stupid error [view](https://github.com/videojs/video.js/commit/a12dd770572a7f16e436e2332eba7ffbb1f1b9b9)
## 4.10.0 (2014-10-28)
*@aptx4869 fixed an issue where the native JSON parser wasn't used ([view](https://github.com/videojs/video.js/pull/1565))
*@andekande improved the German translation ([view](https://github.com/videojs/video.js/pull/1555))
*@OlehTsvirko added a Ukrainian translation ([view](https://github.com/videojs/video.js/pull/1562))
*@OlehTsvirko added a Russian translation ([view](https://github.com/videojs/video.js/pull/1563))
*@thijstriemstra added a Dutch translation ([view](https://github.com/videojs/video.js/pull/1566))
*@heff updated the poster to use CSS styles to display; fixed the poster not showing if not originally set ([view](https://github.com/videojs/video.js/pull/1568))
*@mmcc fixed an issue where errors on source tags could get missed ([view](https://github.com/videojs/video.js/pull/1575))
*@heff enhanced the event listener API to allow for auto-cleanup of listeners on other componenets and elements ([view](https://github.com/videojs/video.js/pull/1588))
*@mmcc fixed an issue with the VolumeButton assuming it was vertical by default ([view](https://github.com/videojs/video.js/pull/1592))
*@DevGavin added a Simplified Chinese translation ([view](https://github.com/videojs/video.js/pull/1593))
*@heff Added the ability to set options for child components directly in the parent options ([view](https://github.com/videojs/video.js/pull/1599))
*@heff turned on the custom html controls for touch devices ([view](https://github.com/videojs/video.js/pull/1617))
## 4.9.1 (2014-10-15)
* Bumped to videojs-swf v4.5.1 to fix a data sanitization issue ([view](https://github.com/videojs/video.js/pull/1587))
## 4.9.0 (2014-09-30)
*@deedos added a Brazilian Portuguese translation ([view](https://github.com/videojs/video.js/pull/1520))
*@baloneysandwiches added a hasClass method ([view](https://github.com/videojs/video.js/pull/1464))
*@mynameisstephen fixed an issue where slider event listeners were not being cleaned up ([view](https://github.com/videojs/video.js/pull/1475))
*@alexrqs cleaned up the Spanish translation ([view](https://github.com/videojs/video.js/pull/1494))
*@t2y added a Japanese translation ([view](https://github.com/videojs/video.js/pull/1497))
*@chikathreesix fixed an issue where data-setup options could be missed ([view](https://github.com/videojs/video.js/pull/1514))
*@seniorflexdeveloper added new translations and translation updates ([view](https://github.com/videojs/video.js/pull/1530))
*@chikathreesix exported the videojs.Flash.embed method ([view](https://github.com/videojs/video.js/pull/1533))
*@doublex fixed an issue with IE7 backwards compatibility ([view](https://github.com/videojs/video.js/pull/1542))
*@mmcc made it possible to override the font-size of captions and subtitles ([view](https://github.com/videojs/video.js/pull/1547))
*@philipgiuliani added an Italian translation ([view](https://github.com/videojs/video.js/pull/1550))
*@twentyrogersc fixed the return value when setting the poster source ([view](https://github.com/videojs/video.js/pull/1552))
*@heff updated to swf v4.5.0 to fix event issues ([view](https://github.com/videojs/video.js/pull/1554))
*@rpless made the VolumeMenuButton volume more accesible via tab navigation ([view](https://github.com/videojs/video.js/pull/1519))
*@mmcc added support for audio tags (html5 audio only) ([view](https://github.com/videojs/video.js/pull/1540))
## 4.8.5 (2014-09-25)
* Updated to the latest version of the swf to fix HLS playback ([view](https://github.com/videojs/video.js/pull/1538))
## 4.8.4 (2014-09-23)
*@gkatsev fixed isFullscreen reporting on iOS devices ([view](https://github.com/videojs/video.js/pull/1511))
## 4.8.3 (2014-09-22)
*@heff updated to the latest version of the SWF to 4.4.4 ([view](https://github.com/videojs/video.js/pull/1526))
## 4.8.2 (2014-09-16)
*@gkatsev fixed an IE11 bug where pause was not fired when the video ends ([view](https://github.com/videojs/video.js/pull/1512))
## 4.8.1 (2014-09-05)
*@dmlap fixed an issue where an error could be fired after player disposal ([view](https://github.com/videojs/video.js/pull/1481))
*@dmlap fixed an issue with languages and subclassing the player ([view](https://github.com/videojs/video.js/pull/1483))
*@mmcc fixed a few CSS issues with the poster and the error 'X' ([view](https://github.com/videojs/video.js/pull/1487))
*@MrVaykadji and @Calinou added a french translation ([view](https://github.com/videojs/video.js/pull/1467))
*@heff fixed an internal deprecation warning and missing deprecated functions ([view](https://github.com/videojs/video.js/pull/1488))
## 4.8.0 (2014-09-03)
*@andekande added a German translation ([view](https://github.com/videojs/video.js/pull/1426))
*@mattosborn fixed a bug where getting the video element src would overwrite it ([view](https://github.com/videojs/video.js/pull/1430))
*@songpete fixed a bug where keyboard events were bubbling and causing additional actions ([view](https://github.com/videojs/video.js/pull/1455))
*@knabar made the inactivity timeout configurable ([view](https://github.com/videojs/video.js/pull/1409))
*@seniorflexdeveloper added language files to the distribution for including specific languages ([view](https://github.com/videojs/video.js/pull/1453))
*@gkatsev improved handling of null and NaN dimension values ([view](https://github.com/videojs/video.js/pull/1449))
*@gkatsev fixed an issue where the controls would break if Flash was initialized too quickly ([view](https://github.com/videojs/video.js/pull/1470))
*@mmcc fixed an issue where if no playback tech was supported the error could not be caught ([view](https://github.com/videojs/video.js/pull/1473))
## 4.7.3 (2014-08-20)
* Added function for adding new language translations, updated docs, and fixed the notSupportedMessage translation ([view](https://github.com/videojs/video.js/pull/1427))
* Exposed the player.selectSource method to allow overriding the source selection order ([view](https://github.com/videojs/video.js/pull/1424))
## 4.7.2 (2014-08-14)
* Fixed a case where timeupdate events were not firing, and fixed and issue with the Flash player version ([view](https://github.com/videojs/video.js/pull/1417))
## 4.7.1 (2014-08-06)
* Fixed the broken bower.json config ([view](https://github.com/videojs/video.js/pull/1401))
## 4.7.0 (2014-08-05)
* Added cross-browser isArray for cross-frame support. fixes #1195 ([view](https://github.com/videojs/video.js/pull/1218))
* Fixed support for webvtt chapters. Fixes #676. ([view](https://github.com/videojs/video.js/pull/1221))
* Fixed issues around webvtt cue time parsing. Fixed #877, fixed #183. ([view](https://github.com/videojs/video.js/pull/1236))
* Fixed an IE11 issue where clicking on the video wouldn't show the controls ([view](https://github.com/videojs/video.js/pull/1291))
* Added a composer.json for PHP packages ([view](https://github.com/videojs/video.js/pull/1241))
* Exposed the vertical option for slider controls ([view](https://github.com/videojs/video.js/pull/1303))
* Fixed an error when disposing a tech using manual timeupdates ([view](https://github.com/videojs/video.js/pull/1312))
* Exported missing Player API methods (remainingTime, supportsFullScreen, enterFullWindow, exitFullWindow, preload) ([view](https://github.com/videojs/video.js/pull/1328))
* Added a base for running saucelabs tests from grunt ([view](https://github.com/videojs/video.js/pull/1215))
* Added additional browsers for saucelabs testing ([view](https://github.com/videojs/video.js/pull/1216))
* Added support for listening to multiple events through a types array ([view](https://github.com/videojs/video.js/pull/1231))
* Exported the vertical option for the volume slider ([view](https://github.com/videojs/video.js/pull/1378))
* Fixed Component trigger function arguments and docs ([view](https://github.com/videojs/video.js/pull/1310))
* Now copying all attributes from the original video tag to the generated video element ([view](https://github.com/videojs/video.js/pull/1321))
* Added files to be ignored in the bower.json ([view](https://github.com/videojs/video.js/pull/1337))
* Fixed an error that could happen if Flash was diposed before the ready callback was fired ([view](https://github.com/videojs/video.js/pull/1340))
* The up and down arrows can now be used to control sliders in addition to left and right ([view](https://github.com/videojs/video.js/pull/1345))
* Added a player.currentType() function to get the MIME type of the current source ([view](https://github.com/videojs/video.js/pull/1320))
* Fixed a potential conflict with other event listener shims ([view](https://github.com/videojs/video.js/pull/1363))
* Added support for multiple time ranges in the load progress bar ([view](https://github.com/videojs/video.js/pull/1253))
* Added vjs-waiting and vjs-seeking css classnames and updated the spinner to use them ([view](https://github.com/videojs/video.js/pull/1351))
* Now restoring the original video tag attributes on a tech change to support webkit-playsinline ([view](https://github.com/videojs/video.js/pull/1369))
* Fixed an issue where the user was unable to scroll/zoom page if touching the video ([view](https://github.com/videojs/video.js/pull/1373))
* Added "sliding" class for when slider is sliding to help with handle styling ([view](https://github.com/videojs/video.js/pull/1385))
## 4.6.4 (2014-07-11)
* Fixed an issue where Flash autoplay would not show the controls ([view](https://github.com/videojs/video.js/pull/1343))
## 4.6.3 (2014-06-12)
* Updated to version 4.4.1 of the SWF ([view](https://github.com/videojs/video.js/pull/1285))
* Fixed a minification issue with the fullscreen event. fixes #1282 ([view](https://github.com/videojs/video.js/pull/1286))
## 4.6.2 (2014-06-10)
* Fixed an issue with the firstplay event not firing when autoplaying ([view](https://github.com/videojs/video.js/pull/1271))
## 4.6.1 (2014-05-20)
* Udpated playbackRate menu to work in minified version ([view](https://github.com/videojs/video.js/pull/1223))
## 4.6.0 (2014-05-20)
* Updated the UI to support live video ([view](https://github.com/videojs/video.js/pull/1121))
* The UI now resets after a source change ([view](https://github.com/videojs/video.js/pull/1124))
* Now assuming smart CSS defaults for sliders to prevent reflow on player init ([view](https://github.com/videojs/video.js/pull/1122))
* Fixed the title element placement in menus [[view](https://github.com/videojs/video.js/pull/1114)]
* Fixed title support for menu buttons ([view](https://github.com/videojs/video.js/pull/1128))
* Fixed extra mousemove events on Windows caused by certain apps, not users [[view](https://github.com/videojs/video.js/pull/1068)]
* Fixed error due to undefined tech when no source is supported [[view](https://github.com/videojs/video.js/pull/1172)]
* Fixed the progress bar not finishing when manual timeupdate events are used [[view](https://github.com/videojs/video.js/pull/1173)]
* Added a more informative and styled fallback message for non-html5 browsers [[view](https://github.com/videojs/video.js/pull/1181)]
* Added the option to provide an array of child components instead of an object [[view](https://github.com/videojs/video.js/pull/1093)]
* Fixed casing on webkitRequestFullscreen [[view](https://github.com/videojs/video.js/pull/1101)]
* Made tap events on mobile less sensitive to touch moves [[view](https://github.com/videojs/video.js/pull/1111)]
* Fixed the default flag for captions/subtitles tracks [[view](https://github.com/videojs/video.js/pull/1153)]
* Fixed compilation failures with LESS v1.7.0 and GRUNT v0.4.4 [[view](https://github.com/videojs/video.js/pull/1180)]
* Added better error handling across the library [[view](https://github.com/videojs/video.js/pull/1197)]
* Updated captions/subtiles file fetching to support cross-origin requests in older IE browsers [[view](https://github.com/videojs/video.js/pull/1095)]
* Added support for playback rate switching [[view](https://github.com/videojs/video.js/pull/1132)]
* Fixed an issue with the loadstart event order that caused the big play button to not hide [[view](https://github.com/videojs/video.js/pull/1209)]
* Modernized the fullscreen API and added support for IE11 [[view](https://github.com/videojs/video.js/pull/1205)]
* Added cross-browser testing with SauceLabs, and added Karma as the default test runner ([view](https://github.com/videojs/video.js/pull/1187))
* Fixed saucelabs integration to run on commits in TravisCI ([view](https://github.com/videojs/video.js/pull/1214))
* Added a clearer error message when a tech is undefined ([view](https://github.com/videojs/video.js/pull/1210))
* Added a cog icon to the font icons ([view](https://github.com/videojs/video.js/pull/1211))
* Added a player option to offset the subtitles/captions timing ([view](https://github.com/videojs/video.js/pull/1212))
## 4.5.2 (2014-04-12)
* Updated release versioning to include bower.json and component.json
## 4.5.1 (2014-03-27)
* Fixed a bug from the last release where canPlaySource was no longer exported
## 4.5.0 (2014-03-27)
* Added component(1) support ([view](https://github.com/videojs/video.js/pull/1032))
* Captions now move down when controls are hidden ([view](https://github.com/videojs/video.js/pull/1053))
* Added the .less source file to the distribution files ([view](https://github.com/videojs/video.js/pull/1056))
* Changed src() to return the current selected source ([view](https://github.com/videojs/video.js/pull/968))
* Added a grunt task for opening the next issue that needs addressing ([view](https://github.com/videojs/video.js/pull/1059))
* Fixed Android 4.0+ devices' check for HLS support ([view](https://github.com/videojs/video.js/pull/1084))
## 4.4.3 (2014-03-06)
* Fixed bugs in IE9 Windows 7N with no Media Player ([view](https://github.com/videojs/video.js/pull/1060))
* Fixed a bug with setPoster() in the minified version ([view](https://github.com/videojs/video.js/pull/1062))
## 4.4.2 (2014-02-24)
* Fixed module.exports in minified version ([view](https://github.com/videojs/video.js/pull/1038))
## 4.4.1 (2014-02-18)
* Added .npmignore so dist files wouldn't be ignored in packages
## 4.4.0 (2014-02-18)
* Made the poster updateable after initialization ([view](https://github.com/videojs/video.js/pull/838))
* Exported more textTrack functions ([view](https://github.com/videojs/video.js/pull/815))
* Moved player ID generation to support video tags with no IDs ([view](https://github.com/videojs/video.js/pull/845))
* Moved to using QUnit as a dependency ([view](https://github.com/videojs/video.js/pull/850))
* Added the util namespace for public utility functions ([view](https://github.com/videojs/video.js/pull/862))
* Fixed an issue with calling duration before Flash is loaded ([view](https://github.com/videojs/video.js/pull/861))
* Added player methods to externs so they can be overridden ([view](https://github.com/videojs/video.js/pull/878))
* Fixed html5 playback when switching between media techs ([view](https://github.com/videojs/video.js/pull/887))
[GitHub Issues](https://github.com/videojs/video.js/issues) are used for all discussions around the codebase, including **bugs**, **features**, and other **enhancements**.
### Reporting a Bug
**A bug is a demonstrable problem** that is caused by the code in the repository. Good bug reports are extremely helpful. Thank You!
Guidelines for bug reports:
1. Use the [GitHub issue search](https://github.com/videojs/video.js/issues) — check if the issue has already been reported.
2. Check if the issue has already been fixed — try to reproduce it using the latest `master` branch in the repository.
3. Isolate the problem — **create a [reduced test case](https://css-tricks.com/reduced-test-cases/)** with a live example. You can possibly use [this JSBin example](http://jsbin.com/axedog/7/edit) as a starting point.
A good bug report should be as detailed as possible, so that others won't have to follow up for the essential details.
Here's an example:
> Short yet concise Bug Summary
>
> Description:
> Happens on Windows 7 and OSX. Seen with IE9, Firefox 19 OSX, Chrome 21, Flash 11.6 and 11.2
>
> 1. This is the first step
> 2. This is the second step
> 3. Further steps, etc.
>
> Expected:
> (describe the expected outcome of the steps above)
>
> Actual:
> (describe what actually happens)
>
> `<url>` (a link to the reduced test case, if it exists)
>
> Any other information you want to share that is relevant to the issue being
> reported. This might include the lines of code that you have identified as
> causing the bug, and potential solutions (and your opinions on their
> merits).
**[File a bug report](https://github.com/videojs/video.js/issues/new)**
### Requesting a Feature
1. [Check the plugin list](https://github.com/videojs/video.js/wiki/Plugins) for any plugins that may already support the feature.
2. [Search the issues](https://github.com/videojs/video.js/issues) for any previous requests for the same feature, and give a thumbs up or +1 on existing requests.
2. If no previous requests exist, create a new issue. Please be as clear as possible about why the feautre is needed and the intended use case.
**[Request a feature](https://github.com/videojs/video.js/issues/new)**
Contributing code
-----------------
To contibute code you'll need to be able to build a copy of Video.js and run tests locally. There are a few requirements before getting started.
- Node.js -- Video.js uses Node for build and test automation. Node is available for Windows, Mac OS X, Linux, and SunOS, as well as source code if that doesn't scare you. [Download and install Node.js](http://nodejs.org/download/)
- grunt-cli -- Install grunt-cli globally so that you will have the correct version of grunt available for any project that needs it.
On Unix-based systems, you'll have to do this as a superuser:
```bash
sudo npm install -g grunt-cli
```
On Windows, you can just run:
```bash
npm install -g grunt-cli
```
- Contribflow -- A homegrown git workflow tool for managing feature/hotfix branches and submitting pull requests. If you have your own preferred git workflow, contribflow isn't required, but the following instructions will assume you're using it.
On Unix-based systems, you'll have to do this as a superuser:
```bash
sudo npm install -g contribflow
```
On Windows, you can just run:
```bash
npm install -g contribflow
```
### Building your own copy of Video.js
First, [fork](http://help.github.com/fork-a-repo/) the video.js git repository. At the top of every github page, there is a Fork button. Click it, and the forking process will copy Video.js into your own GitHub account.
Clone your fork of the repo into your code directory
>In the future, if you want to pull in updates to video.js that happened after you cloned the main repo, you can run:
>
> ```bash
> git checkout master
> git pull upstream master
> ```
Install the required node.js modules using node package manager
```bash
npm install
```
> A note to Windows developers: If you run npm commands, and you find that your command prompt colors have suddenly reversed, you can configure npm to set color to false to prevent this from happening.
> `npm config set color false`
> Note that this change takes effect when a new command prompt window is opened; the current window will not be affected.
Build a local copy of video.js and run tests
```bash
grunt dist
grunt test
```
Video.js is also configured to run tests with Karma. Karma is installed as a grunt plugin to run QUnit tests in real browsers, as opposed to simply running the tests in phantomjs, a headless browser. To run the tests with Karma:
```bash
grunt karma:dev
```
At this point you should have a built copy of video.js in a directory named `dist`, and all tests should be passing.
### Making Changes
Whether you're adding something new, making something better, or fixing a bug, you'll first want to search the [GitHub issues](https://github.com/videojs/video.js/issues) and [plugins list](https://github.com/videojs/video.js/wiki/Plugins) to make sure you're aware of any previous discussion or work. If an unclaimed issue exists, claim it via a comment. If no issue exists for your change, submit one, follwing the [issue filing guidelines](#filing-issues).
There are two categories of changes in video.js land, features and hotfixes (Video.js follows a branching model similar to [gitflow](http://nvie.com/posts/a-successful-git-branching-model/)). Hotfixes are for urgent fixes that need to be released immediately as a patch. Features are for everything else (including non-urgent fixes). If you think you have a hotfix scenario, verify that (via comment) before starting the work. We'll focus on features here, but you can swap `hotfix` for `feature` in any command.
Start a new development branch
```bash
contrib feature start
```
You'll be prompted to name the branch. After that, contrib will create the branch locally, and use git to push it up to your origin, and track it. You're now ready to start building your feature or fixing that bug! Be sure to read the [Code Style Guide](#code-style-guide).
While you're developing, you can ensure your changes are working by writing tests (in the `test` directory) and running `grunt test`.
There's also a sandbox directory where you can add any file and it won't get tracked as a change. To start you can copy the example index file and see a working version of a player (using the local source code) by loading it in a browser.
```bash
cp sandbox/index.html.example sandbox/index.html
open sandbox/index.html
```
### Testing Locally
A simple Connect server is available via the Grunt plugin. The commands below will allow you to setup a test sandbox and begin development.
```bash
cp sandbox/index.html.example sandbox/index.html
grunt connect
open http://localhost:9999/sandbox/index.html
```
> NOTES regarding local testing in Chrome 21+ (as of 2013/01/01)
> Flash files that are local and loaded into a locally accessed page (file:///) will NOT run.
> To get around this you can do either of the following:
>
> 1. Do your development and testing using a local HTTP server. See Grunt commands above.
>
> 2. [Disable the version of Flash included with Chrome](http://helpx.adobe.com/flash-player/kb/flash-player-google-chrome.html#How_can_I_run_debugger_or_alternate_versions_of_Flash_Player_in_Google_Chrome) and enable a system-wide version of Flash instead.
Commit and push changes as you go (using git directly). Write thorough descriptions of your changes in your commit messages.
```bash
git add .
git commit -av
git push
```
> GitHub allows you to close an issue through your commit message using the [fixes](https://github.com/blog/831-issues-2-0-the-next-generation) keyword.
>
> ```bash
> My commit message. fixes #123
> Testing: (briefly describe any testing here, for example, 'unit tests and cross-browser manual tests around playback and network interruption')
> ```
### Submitting your changes
First, thoroughly test your feature or fix, including writing tests to make sure your change doesn't get regressed in a future update. If you're fixing a bug, we recommend in addition to testing the fix itself, to do some testing around the areas that your fix has touched. For example, a brief smoketest of the player never hurts.
Make sure your changes are pushed to origin
```bash
git push
```
Use contrib to submit a pull request (make sure you're in your feature branch)
```bash
contrib feature submit
```
You'll be prompted for title and description for the Pull Request. After that, contrib will use Git to submit your pull request to video.js.
You're Done! (except for cleanup.) To clean up your feature or hotfix branch:
First, checkout your feature or issue branch:
```bash
git checkout (branchname)
```
Run this command to clean up your feature:
```bash
contrib feature delete
```
Run this command to clean up your bug fix:
```bash
contrib hotfix delete
```
> PLEASE NOTE: THIS WILL DELETE YOUR LOCAL AND REMOTE COPIES OF THE FEATURE.
> This is meant to clean up your local and remote branches, so make sure any changes you don't want to lose have been pulled into the parent project or another branch first.
Code Style Guide
----------------
Please follow [Google's JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml) to the letter. If your editor supports [.editorconfig](http://editorconfig.org/#download) it will make it easier to manage differences from your own coding style.
### Style examples include:
* Two space indents.
* Delimit strings with single-quotes `'`, not double-quotes `"`.
* No trailing whitespace, except in markdown files where a linebreak must be forced.
* No more than [one assignment](http://benalman.com/news/2012/05/multiple-var-statements-javascript/) per `var` statement.
* Prefer `if` and `else` to ["clever"](http://programmers.stackexchange.com/a/25281) uses of `? :` conditional or `||`, `&&` logical operators.
* **When in doubt, follow the conventions you see used in the source already.**
If you happen to find something in the codebase that does not follow the style guide, that's a good opportunity to make your first contribution!
---
### Doc Credit
This doc was inspired by some great contribution guide examples including [contribute.md template](https://github.com/contribute-md/contribute-md-template),
Include a [reduced test case](https://css-tricks.com/reduced-test-cases/), we have a [starter template](http://jsbin.com/axedog/edit?html,output) on JSBin you can use.
## Steps to reproduce
Explain in detail the exact steps necessary to reproduce the issue.
1.
2.
3.
## Results
### Expected
Please describe what you expected to see.
### Actual
Please describe what actually happened.
### Error output
If there are any errors at all, please include them here.
## Additional Information
Please include any additional information necessary here. Including the following:
### versions
#### videojs
what version of videojs does this occur with?
#### browsers
what browser are affected?
#### OSes
what platforms (operating systems and devices) are affected?
### plugins
are any videojs plugins being used on the page? If so, please list them below.
If you'd like to help out on VideoJS, you are awesome. Updates should be made to the source files and then make a pull request.
> 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.
When working on VideoJS code, you can use dev.html as your test page. It doesn't exist in the repo and changes to it won't be tracked. To get your own copy simply clone the repo and copy dev.html.example.
cp dev.html.example dev.html
## Quick start
Thanks to the awesome folks over at [Fastly](http://www.fastly.com/), there's a free, CDN hosted version of Video.js that anyone can use.
Also, check out the [Getting Started](http://videojs.com/getting-started/) page on our website which has the latest urls as well.
Simply add these includes to your document's
`<head>`:
You can use dev.html to test new code. It's simple HTML doc that includes all the source files. Send a pull request for any updates.
Version 3 is almost a complete rewrite of the previous versions of VideoJS. New features includes:
Then, whenever you want to use Video.js you can simply use the `<video>` element as your normally would, but with an additional `data-setup` attribute containing any Video.js options. These options
can include any Video.js option plus potential [plugin](http://videojs.com/plugins/) options, just make sure they're valid JSON!
- HTML/CSS Controls and API now work for both the HTML5 and Flash versions.
- Custom Super-lightweight Flash Fallback
- Embed Code is much simpler.
- No more "vjs-box" div required, just use the video tag.
- No more embedding of Flash fallback within the video tag HTML.
this.play();// if you don't trust autoplay for some reason
// How about an event listener?
this.on('ended',function(){
console.log('awww...over so soon?');
});
});
```
If you're ready to dive in, the [documentation](http://docs.videojs.com) is the first place to go for more information.
## Contributing
Video.js is a free and open source library, and we appreciate any help you're willing to give. Check out the [contributing guide](CONTRIBUTING.md).
_Video.js uses [BrowserStack](https://browserstack.com) for compatibility testing_
## Building your own Video.js from source
To build your own custom version read the section on [contributing code](CONTRIBUTING.md#contributing-code) and ["Building your own copy"](CONTRIBUTING.md#building-your-own-copy-of-videojs) in the contributing guide.
## License
Video.js is licensed under the Apache License, Version 2.0. [View the license file](LICENSE)
- Any features where we expect it could break plugins, skins, or any major API integration.
### Minor Version (3.1)
- Additional non-breaking features
### Revision Versions
- Beta (3.1b1)
- Release Candidate (3.1rc1)
- Release with revisions (3.1r1)
Notes:
The last level of one revision type (beta/release candidate) should match the first level of the next revision type. 4.0-b10 should match 4.0-rc1, assuming b10 is the last beta version.
Release revisions means bug fixes. The CDN url should not reflect the revision number. 4.0-r2 would still be /4.0/.
Version 3 is almost a complete rewrite of the previous versions of Video.js. New features includes:
- HTML/CSS Controls and API now work for both the HTML5 and Flash versions.
- Custom Super-lightweight Flash Fallback
- Embed Code is much simpler.
- No more "vjs-box" div required, just use the video tag.
- No more embedding of Flash fallback within the video tag HTML.
---
View [videojs.com](http://videojs.com) for a demo and overview.
Video.js is an HTML5 video player that uses the HTML5 video tag built into modern browsers, and uses javascript to add custom controls, new functionality, and to fix cross browser bugs. For browsers that don't support HTML5, it will fallback to a Flash player.
View demo.html for an example of how to use it.
Originally based on [this tutorial](http://blog.steveheffernan.com/2010/04/how-to-build-an-html5-video-player/).
### Step 1: Include the Video.js Javascript and CSS files in the head of your page.
Change the file urls to point to the files on your server.
<script src="video.js"></script>
<link href="video-js.css" rel="stylesheet">
### Step 2: Add an HTML5 video tag to your page.
Use the video tag as normal, with a few extra pieces for Video.js:
1. The 'data-setup' attribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute.
2. The 'id' Attribute: Should be used and unique for every video on the same page.
3. The 'class' attribute contains two classes:
- 'video-js' applies styles that are required for Video.js functionality, like fullscreen and subtitles.
- 'vjs-default-skin' applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.
Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.
{"prompt":"confirm","desc":"You will now be taken to Github where you will choose an account to fork the project under. Remember which account you choose."},
{"prompt":"text","desc":"What version of video.js are you using?","id":"version"},
{"prompt":"text","desc":"Are you using any video.js plugins?","id":"plugins"},
{"prompt":"text","desc":"What browsers/platforms did you experience this in (e.g. Win 7, IE10; Android 4, Chrome;)?","id":"browsers"},
{"prompt":"text","desc":"Is there a URL to a live example, or a jsbin (e.g. http://jsbin.com/axedog/9999/edit)?","id":"example"},
{"prompt":"text","desc":"Are there any other details you'd like to provide?","id":"details"},
{"open":"{{meta.urls.repo_ui}}/issues/new?title={{title}}&body=**Steps to reproduce:**\n> {{reproduce}}\n\n**What was expected:**\n> {{expected}}\n\n**What Happened:**\n> {{actual}}\n\n**Video.js Version:**\n> {{version}}\n\n**Plugins:**\n> {{plugins}}\n\n**Browsers experienced on:**\n> {{browsers}}\n\n**Example:**\n> {{example}}\n\n**Other details:**\n> {{details}}"}
],
"finished":"Thanks for submitting a bug report! One of our contributors will address it as soon as possible."
},
"request":{
"desc":"Submit a feature/enhancement request",
"steps":[
{"prompt":"text","desc":"Create a title that is descriptive of the enhancement","id":"title"},
{"prompt":"text","desc":"Describe the feature/enhancement (be as detailed as possible so it's clear who, why, and how it would be used)","id":"describe"},
{"prompt":"text","desc":"Is there any existing documentation or related specifications?","id":"docs"},
{"prompt":"text","desc":"Are there any existing examples?","id":"examples"},
{"prompt":"confirm","desc":"You will be redirected to Github where you can submit this issue, OK?"},
{"open":"{{meta.urls.repo_ui}}/issues/new?title={{ title }}&body=**Describe the feature/enhancement:**\n> {{ describe }}\n\n**Existing docs/specs:**\n> {{ docs }}\n\n**Existing examples:**\n> {{ examples }}"}
],
"finished":"Thanks for submitting a feature request! One of our contributors will address it as soon as possible."
},
"release":{
"desc":"Create and publish releases",
"patch":{
"release_type":"patch",
"description":"Create a patch release from the release branch (stable)",
"steps":[{"include":"release run"}]
},
"minor":{
"description":"Create a minor release from the development branch (master)",
"release_type":"minor",
"steps":[
{"include":"update local master"},
{"include":"update local stable"},
["git merge master","Copy the latest development changes to the release branch"],
{"include":"release run"},
["git checkout master","Checkout the developmet branch"],
["git merge stable","Merge package changes into the dev brach"],
["git push upstream master","Push the dev branch changes to the repo"]
]
},
"next":{
"patch":{
"description":"Create a patch release and tag it @next on npm",
"release_type":"patch",
"steps":[{"include":"release run_next"}]
},
"minor":{
"description":"Create a minor release and tag it @next on npm",
"release_type":"minor",
"steps":[{"include":"release run_next"}]
},
"major":{
"description":"Create a major release and tag it @next on npm",
"release_type":"major",
"steps":[{"include":"release run_next"}]
}
},
"prerelease":{
"release_type":"prerelease",
"steps":[{"include":"release run_next"}]
},
"run_next":{
"steps":[
{"include":"branch check"},
{"include":"update local master"},
["git checkout -b temp-release-branch master","Create a temporary branch for the dist"],
["./build/bin/version","Return the current VJS Version from the package.json file","version"],
["grunt chg-release:{{version}}","Update the changelog with the new release"],
["git commit -am 'v{{version}}'","Add and commit the package changes"],
["git push upstream stable","Push the release branch changes to the repo"],
["git checkout -b temp-release-branch stable","Create a temporary branch for the dist"],
["grunt dist","Build the dist"],
["git add dist --force","Add the (otherwise ignored) release files"],
["git commit -m 'v{{version}} dist'","Commit the dist changes"],
["git tag -a v{{version}} -m 'v{{version}}'","Tag the release"],
["git push upstream --tags","Push the new tag to the repo"],
["npm publish","Publish to npm"],
["grunt github-release:release","Create a new release on Github"],
["git checkout stable","Checkout the developmet branch"],
["git branch -D temp-release-branch","Delete the temp release branch"]
]
}
},
"branch":{
"private":true,
"start":{
"steps":[
{"prompt":"text","id":"name","desc":"Name the branch"},
{"exec":"git checkout -b {{name}} {{baseBranch}}","desc":"Create the branch"},
{"exec":"git push -u origin {{name}}","desc":"Push the branch to your remote copy of the project"}
]
},
"save":{
"desc":"Commit and push changes made to files in the project",
"steps":[
{"include":"branch confirm"},
{"prompt":"text","id":"message","desc":"Briefly describe the changes made"},
{"exec":"git add .","desc":"Add the changes"},
{"exec":"git commit -m '{{message}}'","desc":"Commit the changes"},
{"exec":"git push origin {{branch_name}}","desc":"Push the changes to your remote copy of the project"}
]
},
"check":{
"private":true,
"desc":"Check for unsaved changes",
"steps":[
{"exec":"git diff --exit-code","desc":"Ensure there's no unadded changes","fail":"Make sure all changes have been saved (added and committed) or stashed"},
{"exec":"git diff --cached --exit-code","desc":"Ensure there's no uncommitted changes","fail":"Make sure all changes have been saved (added and committed) or stashed"}
]
},
"name":{
"private":true,
"steps":[
{"exec":"git rev-parse --abbrev-ref HEAD","desc":"Get the current branch","id":"branch_name"}
]
},
"confirm":{
"private":true,
"steps":[
{"include":"branch name"},
{"prompt":"confirm","desc":"Are you sure *{{branch_name}}* is the correct branch?"}
]
},
"delete":{
"desc":"Delete the current branch",
"steps":[
{"include":"branch confirm"},
{"exec":"git checkout master","desc":"Exit the branch being deleted"},
{"exec":"git branch -D {{branch_name}}","desc":"Delete the local copy of the branch"},
{"exec":"git push origin :{{branch_name}}","desc":"Delete the remote copy of the branch"}
]
}
},
"pull_request":{
"private":true,
"desc":"Pull request related commands",
"prepare":{
"private":true,
"steps":[
{"include":"branch check"},
{"include":"branch confirm"},
{"include":"test"},
{"prompt":"text","desc":"Which github user or org are you submitting from?","id":"user"}
]
},
"submit":{
"desc":"Submit a pull request for when the change is finished",
"steps":[
{"include":"pull_request prepare"},
{"open":"{{meta.urls.repo_ui}}/compare/videojs:{{baseBranch}}...{{user}}:{{branch_name}}","desc":"Open the github pull request page"}
]
},
"review":{
"steps":[
{"prompt":"text","desc":"What is the the pull request number?","id":"prNum"},
{"get":"{{meta.urls.repo_api}}/pulls/{{prNum}}","desc":"Get the PR information","id":"pr"},
["git fetch {{pr.head.repo.ssh_url}} {{pr.head.ref}}","Get the pull request changes but don't merge them"],
["git merge-base master FETCH_HEAD","Get the common ancestor commit","base"],
["git checkout -b review-{{pr.user.login}}-{{pr.head.ref}} {{base}}","Create a new local branch for the pull request that has a base of the common commit"],
["git merge FETCH_HEAD","Merge in the pull request changes"],
["npm install","Install any new dependencies"],
["grunt test","Build and run tests"]
]
},
"modify":{
"desc":"Submit a modification to a pull request that you are currently reviewing",
"steps":[
{"include":"pull_request prepare"},
{"prompt":"text","desc":"What is the the pull request number?","id":"prNum"},
{"get":"{{meta.urls.repo_api}}/pulls/{{prNum}}","desc":"Get the PR information","id":"pr"},
{"exec":"git push -u origin {{branch_name}}","desc":"Push the changes to the remote repo"},
{"open":"https://github.com/{{user}}/video.js/compare/{{pr.head.label}}...{{user}}:{{branch_name}}","desc":"Open the github pull request page"}
]
},
"accept":{
"steps":[
{"prompt":"text","id":"prNum","desc":"What is the the pull request number?"},
{"get":"{{meta.urls.repo_api}}/pulls/{{prNum}}","desc":"Get the PR information","id":"pr"},
{"get":"{{meta.urls.repo_api}}/pulls/{{prNum}}/commits","desc":"Get the PR commits to access author info","id":"prCommits"},
["git checkout -b {{pr.user.login}}/{{pr.head.ref}} {{pr.base.ref}}","Create a new branch for merging the changes"],
["git fetch {{pr.head.repo.ssh_url}} {{pr.head.ref}}","Fetch the changes"],
["git merge --no-commit --squash FETCH_HEAD","Merge the changes in without committing so they can be squashed"],
["grunt test","Run tests to make sure they still pass"],
{"prompt":"text","id":"line","desc":"Describe this change in one line"},
["grunt chg-add:'{{{line}}} ([view](https\\://github.com/videojs/video.js/pull/{{prNum}}))'","Add a line to the changelog"],
["git add CHANGELOG.md","Add the changlelog change to be committed"],
["git commit -a --author='{{prCommits.[0].commit.author.name}} <{{prCommits.[0].commit.author.email}}>' -m '{{line}}. closes #{{prNum}}'","Commit the changes"],
// Attempting to create a portable script that loads source files in order. So we can change which files are included and have it change multiple places.
varvjsSourceList=["require",
'order!../../src/core.js',
'order!../../src/lib.js',
'order!../../src/component.js',
'order!../../src/controls.js',
'order!../../src/ecma.js',
'order!../../src/events.js',
'order!../../src/json.js',
'order!../../src/player.js',
'order!../../src/tech.js',
'order!../../src/tracks.js',
'order!../../flash/swfobject.js',
'order!../../src/setup.js'
];
// Not going to be used in production, so eval ok.
description: Video.JS API Docs - API settings based on the HTML5 video API
body_id: api
body_class: docs subpage
---
API
===
The Video.js API allows you to interact with the video through Javascript, whether the browser is playing the video through HTML5 video, Flash, or any other supported playback technologies.
Referencing the Player
----------------------
To use the API functions, you need access to the player object. Luckily this is easy to get. You just need to make sure your video tag has an ID. The example embed code has an ID of "example\_video_1". If you have multiple videos on one page, make sure every video tag has a unique ID.
<code type="javascript">
var myPlayer = _V_("example_video_1");
</code>
(If the player hasn't been initialized yet via the data-setup attribute or another method, this will also initialize the player.)
Wait Until the Player is Ready
------------------------------
The time it takes Video.js to set up the video and API will vary depending on the playback technology being used (HTML5 will often be much faster to load than Flash). For that reason we want to use the player's 'ready' function to trigger any code that requires the player's API.
<code type="javascript">
_V_("example_video_1").ready(function(){
var myPlayer = this;
// EXAMPLE: Start playing the video.
myPlayer.play();
});
</code>
API Methods
-----------
Now that you have access to a ready player, you can control the video, get values, or respond to video events using the following functions. The Video.js API function names follow the [HTML5 media API](http://www.w3.org/TR/html5/video.html). The main difference is that attributes which you would get or set on a video element using the equals sign ( `myVideoElement.currentTime = "120";` ), you would use a function argument syntax for Video.js ( `myPlayer.currentTime(120);` )
### play() ###
Start video playback. Returns the player object.
<code type="javascript">
myPlayer.play();
</code>
### pause() ###
Pause the video playback. Returns the player object
<code type="javascript">
myPlayer.pause();
</code>
### src(newSource) ###
The source function updates the video source. There are three types of variables you can pass as the argument.
**URL String**: A URL to the the video file. Use this method if you're sure the current playback technology (HTML5/Flash) can support the source you provide. Currently only MP4 files can be used in both HTML5 and Flash.
**Source Object (or element):** A javascript object containing information about the source file. Use this method if you want the player to determine if it can support the file using the type information.
**Array of Source Objects:** To provide multiple versions of the source so that it can be played using HTML5 across browsers you can use an array of source objects. Video.js will detect which version is supported and load that file.
### currentTime(seconds) // Type: Integer or Float ###
Seek to the supplied time (seconds). Returns the player object.
<code type="javascript">
myPlayer.currentTime(120); // 2 minutes into the video
</code>
### duration() ###
Returns the length in time of the video in seconds. NOTE: The video must have started loading before the duration can be known, and in the case of Flash, may not be known until the video starts playing.
<code type="javascript">
var howLongIsThis = myPlayer.duration();
</code>
### buffered() ###
Returns a [TimeRange](http://videojs.com/docs/glossary.html#timerange) object with sections of the video that have been downloaded. If you just want the percent of the video that's been downloaded, use bufferedPercent.
<code type="javascript">
var bufferedTimeRange = myPlayer.buffered(),
// Number of different ranges of time have been buffered. Usually 1.
numberOfRanges = bufferedTimeRange.length,
// Time in seconds when the first range starts. Usually 0.
Returns the percent (as a decimal) of the video that's been downloaded. 0 means none, 1 means all.
<code type="javascript">
var howMuchIsDownloaded = myPlayer.bufferedPercent();
</code>
### volume() ###
Returns the current volume of the video as a percent in decimal form. 0 is off (muted), 1.0 is all the way up, 0.5 is half way.
<code type="javascript">
var howLoudIsIt = myPlayer.volume();
</code>
### volume(percentAsDecimal) ###
Set the volume to the supplied percent (as a decimal between 0 and 1).
<code type="javascript">
myPlayer.volume(0.5); // Set volume to half
</code>
### width() ###
Returns the current width of the video in pixels.
<code type="javascript">
var howWideIsIt = myPlayer.width();
</code>
### width(pixels) ###
Change the width of the video to the supplied width in pixels. Returns the player object
<code type="javascript">
myPlayer.width(640);
</code>
### height() ###
Returns the current height of the video in pixels.
<code type="javascript">
var howTallIsIt = myPlayer.height();
</code>
### height(pixels) ###
Change the height of the video to the supplied height in pixels. Returns the player object
<code type="javascript">
myPlayer.height(480);
</code>
### size(width, height) ###
Changes the width and height of the video to the supplied width and height. This is more efficient if you're changing both width and height (only triggers the player's resize event once). Returns the player object.
<code type="javascript">
myPlayer.size(640,480);
</code>
### requestFullScreen() ###
Increase the size of the video to full screen. In some browsers, full screen is not supported natively, so it enters full window mode, where the video fills the browser window. In browsers and devices that support native full screen, sometimes the browser's default controls will be shown, and not the Video.js custom skin. This includes most mobile devices (iOS, Android) and older versions of Safari. Returns the player object.
<code type="javascript">
myPlayer.requestFullScreen();
</code>
### cancelFullScreen() ###
Return the video to its normal size after having been in full screen mode. Returns the player object.
<code type="javascript">
myPlayer.cancelFullScreen();
</code>
Events
------
You can attach event listeners to the player similarly to how you would for a video element.
<tr><td>loadstart</td><td>Fired when the user agent begins looking for media data.</td></tr>
<tr><td>loadedmetadata</td><td>Fired when the player has initial duration and dimension information.</td></tr>
<tr><td>loadeddata</td><td>Fired when the player has downloaded data at the current playback position.</td></tr>
<tr><td>loadedalldata</td><td>Fired when the player has finished downloading the source data.</td></tr>
<tr><td>play</td><td>Fired whenever the media begins or resumes playback.</td></tr>
<tr><td>pause</td><td>Fired whenever the media has been paused.</td></tr>
<tr><td>timeupdate</td><td>Fired when the current playback position has changed. During playback this is fired every 15-250 milliseconds, depnding on the playback technology in use.</td></tr>
<tr><td>ended</td><td>Fired when the end of the media resource is reached. currentTime == duration</td></tr>
<tr><td>durationchange</td><td>Fired when the duration of the media resource is changed, or known for the first time.</td></tr>
<tr><td>progress</td><td>Fired while the user agent is downloading media data.</td></tr>
<tr><td>resize</td><td>Fired when the width and/or height of the video window changes.</td></tr>
<tr><td>volumechange</td><td>Fired when the volume changes.</td></tr>
<tr><td>error</td><td>Fired when there is an error in playback.</td></tr>
<tr><td>fullscreenchange</td><td>Fired when the player switches in or out of fullscreen mode.</td></tr>
Introductory titles are showing on the background of a water pool with fishes swimming and mechanical objects lying on a stone floor.
3
00:00:12.010-->00:00:14.800
elephants dream
4
00:00:26.100-->00:00:28.206
Two people stand on a small bridge.
5
00:00:30.010-->00:00:40.000
The old man, Proog, shoves the younger and less experienced Emo on the ground to save him from being mowed down by a barrage of jack plugs that whir back and forth between the two massive switch-board-like walls.
6
00:00:40.000-->00:00:47.000
The plugs are oblivious of the two, endlessly channeling streams of bizarre sounds and data.
7
00:00:48.494-->00:00:51.994
Emo sits on the bridge and checks his limbs.
8
00:01:09.150-->00:01:16.030
After the squealing plugs move on, Proog makes sure that Emo is unharmed and urges him onwards through a crack in one of the plug-walls.
9
00:01:18.050-->00:01:24.000
They walk through the narrow hall into a massive room that fades away into blackness on all sides.
10
00:01:24.050-->00:01:34.200
Only one path is visible, suspended in mid-air that runs between thousands of dangling electric cables on which sit crowds of robin-like robotic birds.
11
00:01:36.000-->00:01:40.000
As Proog and Emo enter the room, the birds begin to wake up and notice them.
12
00:01:42.000-->00:01:50.000
Realizing the danger, Proog grabs Emo by the arm.
13
00:01:50.050-->00:02:00.000
They run along the increasingly bizarre path as the birds begin to swarm.
14
00:02:00.050-->00:02:11.000
All sound is blocked out by the birds which are making the same noises as the jack-plugs, garbled screaming and obscure sentences and static.
15
00:02:12.600-->00:02:17.000
The path dead-ends, stopping in the middle of no-where above the infinite drop.
16
00:02:17.600-->00:02:22.000
Proog turns around as the birds reach them and begin to dive-bomb at them.
17
00:02:22.600-->00:02:28.000
At the last moment, Proog takes out an old candlestick phone and the birds dive into the speaker piece.
18
00:02:28.600-->00:02:31.000
The screen cuts to black.
19
00:02:31.600-->00:02:38.000
In the next scene, Proog stands at one end of a room, suspiciously watching what is probably the same candlestick phone, which is ringing.
20
00:02:38.500-->00:02:41.000
Emo watches from the other side of the room.
21
00:02:41.500-->00:02:43.000
The phone continues to ring.
22
00:02:43.500-->00:02:48.000
After a while Emo approaches it to answer it, but Proog slaps his hand away.
23
00:02:57.972-->00:02:59.100
Proog takes the ear-piece off the hook.
24
00:03:13.500-->00:03:18.054
The phone speaker revealed a mass of clawed, fleshy polyps which scream and gibber obscenely.
25
00:03:25.000-->00:03:33.000
There is a solemn silence as Emo looks around the room and the technical objects therein.
26
00:03:38.000-->00:03:44.000
Emo laughs disbelievingly and Proog walks away.
27
00:03:46.000-->00:03:54.000
In the next scene, the two enter another massive black room.
28
00:03:54.500-->00:04:04.000
There is no path, the entry platform is the only structure that seems to be there except for another exit, lit distantly at the far side.
29
00:04:04.500-->00:04:14.000
Proog takes a step forward into the void, and his feet are suddenly caught by giant typewriter arms that rocket up out of the blackness to catch his feet as he dances across mid-air.
30
00:04:14.500-->00:04:22.000
Emo follows Proog with somewhat less enthusiasm as the older man leads the way.
31
00:04:52.000-->00:04:58.000
They reach the end of the room and go through a hall into a small compartment.
32
00:05:02.000-->00:05:06.000
Proog presses a button, and the door shuts.
33
00:05:06.500-->00:05:09.000
It is an elevator.
34
00:05:09.500-->00:05:24.000
The elevator lurches suddenly as it is grabbed by a giant mechanical arm and thrown upwards, rushing up through an ever-widening tunnel.
35
00:05:26.500-->00:05:32.000
When it begins to slow down, another arm grabs the capsule and throws it even further up.
36
00:05:32.500-->00:05:40.000
As it moves up, the walls unlock and fall away, leaving only the floor with the two on it, rushing higher and higher.
37
00:05:54.500-->00:05:59.000
They exit the tunnel into a black sky and the platform reaches the peak of its arc.
38
00:06:19.500-->00:06:26.000
The elevator begins to drop down another shaft, coming to rest as it slams into the floor of another room and bringing the two to a level stop.
39
00:06:26.500-->00:06:28.000
A camera flashes.
40
00:06:28.010-->00:06:34.000
They are in a large, dingy room filled with strange, generator-like devices and dotted with boxy holographic projectors.
41
00:06:34.500-->00:06:38.000
One of them is projecting a portion of wall with a door in it right beside them.
42
00:06:38.500-->00:06:40.000
The door seems harmless enough.
43
00:06:42.800-->00:06:45.100
From behind the door comes light music.
44
00:06:56.000-->00:07:00.100
Proog presses a button on his cane, which changes the holograph to another wall.
45
00:07:05.100-->00:07:11.000
Proog finishes the wall, and boxes them into a Safe Room, out of the view of anything outside.
46
00:07:39.000-->00:07:42.500
Proog slaps him, trying to bring him to his senses.
47
00:07:45.000-->00:07:52.000
Emo storms away down the length of the room towards a wall he apparently cannot see and the wall begins to move, extending the length of the room.
48
00:08:00.000-->00:08:07.000
The walls begin to discolour and mechanical roots start tearing through the walls to his left.
49
00:08:07.010-->00:08:09.000
The roots move forwards toward Proog.
50
00:08:22.000-->00:08:31.000
The rest of the safety wall crumples away as a pair of massive hands heave out of the ground and begin to attack.
51
00:08:31.010-->00:08:37.000
Proog is knocked down by the shockwave, while Emo turns and begins to walk away, waving his finger around his temple in the 'crazy' sign.
52
00:08:37.010-->00:08:44.000
In a last effort, Proog extricates himself from the tentacle roots, and cracks Emo over the back of the head with his cane.
53
00:08:44.500-->00:08:51.000
As Emo collapses, everything falls away, and Proog and Emo are left in one tiny patch of light in the middle of blackness.
54
00:09:00.000-->00:09:20.000
The scene fades to black while panning over a pile of tentacle roots lying on the ground.
55
00:09:26.000-->00:09:28.000
Credits begin:
56
00:09:28.500-->00:09:35.000
Orange Open Movie Team
Director: Bassum Kurdali
Art Director: Andreas Goralczyk
57
00:09:35.500-->00:09:39.000
Music and Sound Design: Jan Morgenstern
58
00:09:39.500-->00:09:44.000
Emo: Cas Jansen
Proog: Tygo Gernandt
59
00:09:44.500-->00:09:50.000
Screenplay: Pepijn Zwanenberg
Original Concept & Scenario: Andreas Goralczyk, Bassam Kurdali, Ton Roosendaal
60
00:09:50.500-->00:10:24.000
More people for
Additional Artwork and Animation
Texture Photography
Software Development
3D Modelling, Animation, Rendering, Compiling Software
Special Thanks to Open Source Projects
Rendering Services Provided
Hardware Sponsored
Casting
Sound FX, Foley, Dialogue Editing, Audio Mix and Post
Voice Recording
HDCam conversion
Netherlands Media Art Institute Staff
Blender Foundation Staff
61
00:10:24.500-->00:10:30.000
Many Thanks to our Donation and DVD sponsors
62
00:10:30.500-->00:10:47.000
Elephants Dream has been realised with financial support from
<pclass="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <ahref="http://videojs.com/html5-video-support/"target="_blank">supports HTML5 video</a></p>
<pclass="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <ahref="http://videojs.com/html5-video-support/"target="_blank">supports HTML5 video</a></p>
The Video.js API allows you to interact with the video through JavaScript, whether the browser is playing the video through HTML5 video, Flash, or any other supported playback technologies.
Referencing the Player
----------------------
To use the API functions, you need access to the player object. Luckily this is easy to get. You just need to make sure your video tag has an ID. The example embed code has an ID of "example\_video_1". If you have multiple videos on one page, make sure every video tag has a unique ID.
```js
varmyPlayer=videojs('example_video_1');
```
(If the player hasn't been initialized yet via the data-setup attribute or another method, this will also initialize the player.)
Wait Until the Player is Ready
------------------------------
The time it takes Video.js to set up the video and API will vary depending on the playback technology being used (HTML5 will often be much faster to load than Flash). For that reason we want to use the player's 'ready' function to trigger any code that requires the player's API.
```js
videojs("example_video_1").ready(function(){
varmyPlayer=this;
// EXAMPLE: Start playing the video.
myPlayer.play();
});
```
API Methods
-----------
Now that you have access to a ready player, you can control the video, get values, or respond to video events. The Video.js API function names follow the [HTML5 media API](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html). The main difference is that getter/setter functions are used for video properties.
```js
// setting a property on a bare HTML5 video element
myVideoElement.currentTime="120";
// setting a property on a Video.js player
myPlayer.currentTime(120);
```
The full list of player API methods and events can be found in the [player API docs](http://docs.videojs.com/docs/api/index.html).
Audio Tracks are a function of HTML5 video for providing alternative audio track selections to the user, so that a track other than the main track can be played. Video.js makes audio tracks work across all browsers. There are currently five types of tracks:
- **Alternative**: alternative audio for the main video track
- **Descriptions**: descriptions of what is happening in the video track
- **Main**: the main audio track for this video
- **Translation**: a translation of the main audio track
- **Commentary**: commentary on the video, usually the director of the content talking about design choices
## Missing Funtionality
- It is currently impossible to add AudioTracks in a non-programtic way
- Literal switching of AudioTracks for playback is not handled by video.js and must be handled by something else. video.js only stores the track representation
## Adding to Video.js
> Right now adding audio tracks in the HTML is unsupported. Audio Tracks must be added programatically.
You must add audio tracks [programatically](#api) for the time being.
## Attributes
Audio Track propertites and settings
### kind
One of the five track types listed above. Kind defaults to empty string if no kind is included, or an invalid kind is used.
### label
The label for the track that will be show to the user, for example in a menu that list the different languages available for audio tracks.
### language
The two-letter code (valid BCP 47 language tag) for the language of the audio track, for example "en" for English. A list of language codes is [available here](languages.md#language-codes).
### enabled
If this track should be playing or not. In video.js we only allow one track to be enabled at a time. so if you enable more than one the last one to be enabled will end up being the only one.
## Interacting with Audio Tracks
### Doing something when a track becomes enabled
When a new track is enabled (other than the main track) an event is fired on the `AudioTrackList` called `change` you can listen to that event and do something with it.
Here's an example:
```js
// get the current players AudioTrackList object
lettracks=player.audioTracks();
// listen to the change event
tracks.addEventListener('change',function(){
// print the currently enabled AudioTrack label
for(leti=0;i<tracks.length;i++){
lettrack=tracks[i];
if(track.enabled){
console.log(track.label);
return;
}
}
});
```
## API
### `player.audioTracks() -> AudioTrackList`
This is the main interface into the audio tracks of the player.
It returns an AudioTrackList which is an array like object that contains all the `AudioTrack` on the player.
### `player.audioTracks().addTrack(AudioTrack)`
Add an existing AudioTrack to the players internal list of AudioTracks.
The Video.js player is built on top of a simple, custom UI components architecture. The player class and all control classes inherit from the `Component` class, or a subclass of `Component`.
The UI component architecture makes it easier to add child components to a parent component and build up an entire user interface, like the controls for the Video.js player.
```js
// Adding a new control to the player
myPlayer.addChild('BigPlayButton');
```
Every component has an associated DOM element, and when you add a child component, it inserts the element of that child into the element of the parent.
```js
myPlayer.addChild('BigPlayButton');
```
Results in:
```html
<!-- Player Element -->
<divclass="video-js">
<!-- BigPlayButton Element -->
<divclass="vjs-big-play-button"></div>
</div>
```
The actual default component structure of the Video.js player looks something like this:
```
Player
PosterImage
TextTrackDisplay
LoadingSpinner
BigPlayButton
ControlBar
PlayToggle
VolumeMenuButton
CurrentTimeDisplay (Hidden by default)
TimeDivider (Hidden by default)
DurationDisplay (Hidden by default)
ProgressControl
SeekBar
LoadProgressBar
MouseTimeDisplay
PlayProgressBar
LiveDisplay (Hidden by default)
RemainingTimeDisplay
CustomControlsSpacer (No UI)
ChaptersButton (Hidden by default)
SubtitlesButton (Hidden by default)
CaptionsButton (Hidden by default)
FullscreenToggle
ErrorDisplay
TextTrackSettings
```
## Progress Control
The progress control is made up of the SeekBar. The seekbar contains the load progress bar
and the play progress bar. In addition, it contains the Mouse Time Display which
is used to display the time tooltip that follows the mouse cursor.
The play progress bar also has a time tooltip that show the current time.
By default, the progress control is sandwiched between the volume menu button and
the remaining time display inside the control bar, but in some cases, a skin would
want to move the progress control above the control bar and have it span the full
width of the player, in those cases, it is less than ideal to have the tooltips
get cut off or leave the bounds of the player. This can be prevented by setting the
`keepTooltipsInside` option on the progress control. This also makes the tooltips use
a real element instead of pseudo elements so targetting them with css will be different.
The Flash video player (SWF) used to play a video when HTML5 isn't supported.
<a name="timerange"></a>
### TimeRange
<a name="html5-video"></a>
### HTML5 Video
HTML is the markup language that makes up every page on the web. The newest version, HTML5, includes specifications for a video tag, that is meant to allow website developers to add a video to a page the same way they would add an image. In order for this to work, web browser developers (Mozilla, Apple, Microsoft, Google, Opera, etc.) have to build the video playback functionality into their browsers. The W3C has created directions on how video should work in browsers, and it’s up to browser developers to follow those directions, so that video works the same across all browsers. This doesn’t always happen thanks to technology, legal, and financial choices made by browser developers, but so far no one’s varying too far from the specifications. However the specifications are still being changed and refined, so browsers developers have to keep up with that as well.
@@ -28,7 +21,7 @@ Playing video in a web page may not seem so special since you can already view v
A prime example of this is the iPhone and iPad. Apple has decided not to support Flash on their mobile devices, but they do support HTML5 video. Since Flash is currently the most common way video is added to web pages, most web video (aside from YouTube who has a special relationship with Apple) can’t be viewed on the iPhone or iPad. These devices are very popular, so many web sites are switching to hybrid HTML5/Flash player setups (like VideoJS).
<a name="video-tag"></a>
### Video Tag
There are a number of great resources that will give you an introduction to the video tag an how it is used including:
@@ -38,10 +31,9 @@ There are a number of great resources that will give you an introduction to the
An if you really want to dig in, you can read the (W3C Spec)[http://www.w3.org/TR/html5/video.html]. (Warning - not for the faint of heart)
<a name="skin"></a>
### Skin
"Skin" refers to the design of the player's controls, also sometimes called the chrome. With VideoJS, new skins can be built simply by creating a new stylesheet.
<a name="cdn"></a>
### Content Delivery Network (CDN)
A network of servers around the world that host copies of a file. When your browser requests one of these files, the CDN automatically determines which server is closest to your location and delivers the file from there. This drastically increases delivery time, especially internationally.
Multiple language support allows for users of non-English locales to natively interact with the displayed player. Video.js will compile multiple language files (see below) and instantiate with a global dictionary of language key/value support. Video.js player instances can be created with per-player language support that amends/overrides these default values. Player instances can also hard-set default languages to values other than English as of version 4.7.
Creating the Language File
--------------------------
Video.js uses key/value object dictionaries in JSON form.
An English lang file is at [/lang/en.json](https://github.com/videojs/video.js/tree/master/lang/en.json) which should be used as a template for new files. This will be kept up to date with strings in the core player that need localizations.
A sample dictionary for Spanish `['es']` would look as follows:
"You aborted the video playback":"Ha interrumpido la reproducción del vídeo.",
"A network error caused the video download to fail part-way.":"Un error de red ha interrumpido la descarga del vídeo.",
"The video could not be loaded, either because the server or network failed or because the format is not supported.":"No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible.",
"The video playback was aborted due to a corruption problem or because the video used features your browser did not support.":"La reproducción de vídeo se ha interrumpido por un problema de corrupción de datos o porque el vídeo precisa funciones que su navegador no ofrece.",
"No compatible source was found for this video.":"No se ha encontrado ninguna fuente compatible con este vídeo."
}
```
Notes:
- The file name should always be in the format `XX.json`, where `XX` is the language code. This should be a two letter code (for options see the bottom of this document) except for cases where a more specific code with sub-code is appropriate, e.g. `zh-CN.lang`.
- For automatic inclusion at build time, add your language file to the `/lang` directory (see 'Adding Languages to Video.js below').
Adding Languages to Video.js
----------------------------
Additional language support can be added to Video.js in multiple ways.
1. Create language scripts out of your JSON objects by using our custom grunt task `vjslanguages`. This task is automatically run as part of the default grunt task in Video.JS, but can be configured to match your `src`/`dist` directories if different. Once these scripts are created, just add them to your DOM like any other script.
NOTE: These need to be added after the core Video.js script.
2. Add your JSON objects via the videojs.addLanguage API. Preferably in the HEAD element of your DOM or otherwise prior to player instantiation.
"You aborted the video playback":"Ha interrumpido la reproducción del vídeo.",
"A network error caused the video download to fail part-way.":"Un error de red ha interrumpido la descarga del vídeo.",
"The video could not be loaded, either because the server or network failed or because the format is not supported.":"No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible.",
"The video playback was aborted due to a corruption problem or because the video used features your browser did not support.":"La reproducción de vídeo se ha interrumpido por un problema de corrupción de datos o porque el vídeo precisa funciones que su navegador no ofrece.",
"No compatible source was found for this video.":"No se ha encontrado ninguna fuente compatible con este vídeo."
});
</script>
</head>
```
3. During a Video.js player instantiation. Adding the languages to the configuration object provided in the `data-setup` attribute.
- This will add your language key/values to the Video.js player instances individually. If these values already exist in the global dictionary via the process above, those will be overridden for the player instance in question.
Setting Default Language in a Video.js Player
---------------------------------------------
During a Video.js player instantiation you can force it to localize to a specific language by including the locale value into the configuration object via the `data-setup` attribute. Valid options listed at the bottom of the page for reference.
The player language is set to one of the following in descending priority:
* The language specified in setup options as above
* The language specified by the closet element with a `lang` attribute. This could be the player itself or a parent element. Usually the document language is specified on the `html` tag.
* Browser language preference (the first language if more than one is configured)
* 'en'
The player language can be change after instantiation with `language('fr')`. However localizable text will not be modified by doing this, for best results set the language beforehand.
Language selection
------------------
* Language codes are considered case-insensitively (`en-US` == `en-us`).
* If there is no match for a language code with a subcode (`en-us`), a match for the primary code (`en`) is used if available.
Localization in Plugins
-----------------------
When you're developing a plugin, you can also introduce new localized strings. Simply wrap the string with the player's `localize` function:
The following is a list of official language codes.
**NOTE:** For supported language translations, please see the [Languages Folder (/lang)](https://github.com/videojs/video.js/tree/master/lang) folder located in the project root.
The Video.js emebed code is simply an HTML5 video tag, so for many of the options you can use the standard tag attributes to set the options.
The Video.js embed code is simply an HTML5 video tag, so for many of the options you can use the standard tag attributes to set the options.
<code type="html">
<video controls autoplay preload="auto" ...>
</code>
```html
<video controls autoplay preload="auto" ...>
```
Alternatively, you can use the data-setup attribute to provide options in the [JSON](http://json.org/example.html) format. This is also how you would set options that aren't standard to the video tag.
Finally, if you're not using the data-setup attribute to trigger the player setup, you can pass in an object with the player options as the second argument in the javascript setup function.
> 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:
>
> WRONG
> <code type="html">
>
> <video controls="true" ...>
>
> </code>
>
> RIGHT
> <code type="html">
>
> <video controls ...>
>
> </code>
>
WRONG
```html
<video controls="true" ...>
```
RIGHT
```html
<video controls ...>
```
> 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").
### controls ###
The controls option sets whether or not the player has controls that the user can interact with. Without controls the only way to start the video playing is with the autoplay attribute or through the API.
<code type="html">
<video controls ...>
or
{ "controls": true }
```html
<video controls ...>
or
{ "controls": true }
```
</code>
### autoplay ###
If autoplay is true, the video will start playing as soon as page is loaded (without any interaction from the user).
If autoplay is true, the video will start playing as soon as page is loaded (without any interaction from the user).
NOT SUPPORTED BY APPLE iOS DEVICES. Apple blocks the autoplay functionality in an effort to protect it's customers from unwillingly using a lot of their (often expensive) monthly data plans. A user touch/click is required to start the video in this case.
<code type="html">
```html
<video autoplay ...>
or
{ "autoplay": true }
```
<video autoplay ...>
or
{ "autoplay": true }
</code>
### preload ###
The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. The options are auto, metadata, and none.
@@ -90,50 +71,68 @@ The preload attribute informs the browser whether or not the video data should b
'none': Don't preload any of the video data. This will wait until the user clicks play to begin downloading.
<code type="html">
```html
<video preload ...>
or
{ "preload": "auto" }
```
<video preload ...>
or
{ "preload": "auto" }
</code>
### poster ###
The poster attribute sets the image that displays before the video begins playing. This is often a frame of the video or a custom title screen. As soon as the user clicks play the image will go away.
<code type="html">
```html
<video poster="myPoster.jpg" ...>
or
{ "poster": "myPoster.jpg" }
```
<video poster="myPoster.jpg" ...>
or
{ "poster": "myPoster.jpg" }
</code>
### loop ###
The loop attribute causes the video to start over as soon as it ends. This could be used for a visual affect like clouds in the background.
<code type="html">
The loop attribute causes the video to start over as soon as it ends. This could be used for a visual effect like clouds in the background.
```html
<video loop ...>
or
{ "loop": true }
```
<video loop ...>
or
{ "loop": "true" }
</code>
### width ###
The width attribute sets the display width of the video.
<code type="html">
```html
<video width="640" ...>
or
{ "width": 640 }
```
<video width="640" ...>
or
{ "width": 640 }
</code>
### height ###
The height attribute sets the display height of the video.
<code type="html">
```html
<video height="480" ...>
or
{ "height": 480 }
```
<video height="480" ...>
or
{ "height": 480 }
Component Options
-----------------
</code>
You can set the options for any single player component. For instance, if you wanted to remove the `muteToggle` button, which
is a child of `controlBar`, you can just set that component to false:
```js
var player = videojs('video-id', {
controlBar: {
muteToggle: false
}
});
```
This also works using the `data-setup` attribute on the video element, just remember the options need to use proper JSON
If you've built something cool with Video.js, you can easily share it with the rest of the world by creating a plugin. Although, you can roll your own, you can also use [generator-videojs-plugin](https://github.com/dmlap/generator-videojs-plugin), a [Yeoman](http://yeoman.io) generator that provides scaffolding for video.js plugins including:
* [Grunt](http://gruntjs.com) for build management
* [npm](https://www.npmjs.org) for dependency management
* [QUnit](http://qunitjs.com) for testing
Step 1: Write Some Javascript
-----------------------------
You may have already done this step. Code up something interesting and then wrap it in a function. At the most basic level, that's all a video.js plugin is. By convention, plugins take a hash of options as their first argument:
```js
functionexamplePlugin(options){
this.on('play',function(e){
console.log('playback has started!');
});
};
```
When it's activated, `this` will be the Video.js player your plugin is attached to. You can use anything you'd like in the [Video.js API](./api.md) when you're writing a plugin: change the `src`, mess up the DOM, or listen for and emit your own events.
Step 2: Registering A Plugin
-------------------------------
It's time to give the rest of the world the opportunity to be awed by your genius. When your plugin is loaded, it needs to let Video.js know this amazing new functionality is now available:
```js
videojs.plugin('examplePlugin',examplePlugin);
```
From this point on, your plugin will be added to the Video.js prototype and will show up as a property on every instance created. Make sure you choose a unique name that doesn't clash with any of the properties already in Video.js. Which leads us to...
Step 3: Using A Plugin
----------------------
There are two ways to initialize a plugin. If you're creating your video tag dynamically, you can specify the plugins you'd like to initialize with it and any options you want to pass to them:
```js
videojs('vidId',{
plugins:{
examplePlugin:{
exampleOption:true
}
}
});
```
If you've already initialized your video tag, you can activate a plugin at any time by calling its setup function directly:
```js
varvideo=videojs('cool-vid');
video.examplePlugin({exampleOption:true});
```
That's it. Head on over to the [Video.js wiki](https://github.com/videojs/video.js/wiki/Plugins) and add your plugin to the list so everyone else can check it out.
## How should I use the Video.js icons in my plugin?
If you'd like to use any of the icons available in the [Video.js icon set](http://videojs.github.io/font/), please target them via the CSS class names instead of codepoints. The codepoints *may* change between versions of the font, so using the class names ensures that your plugin will stay up to date with any font changes.
Sometimes, you want to remove players after page load (in single page apps or modals, for instance). It's easy to manage, but there are some simple rules you need to follow.
Call `.dispose()`
-----------------
To remove the html associated with your videojs player from the page always call the player's [`dispose()`](http://docs.videojs.com/docs/api/player.html#Methodsdispose) method:
For instance, if you have a modal that a player appears in, you should create the player when the modal pops up. When the modal hides, dispose the player. If you try to hide the Flash tech, things will go poorly. Even with other tech, calling `dispose()` on a player that's not needed will free up resources for the browser.
Why Is This Needed?
-------------------
VideoJS internally tracks all players and their associated data by html id attribute. If you plan to create new players with the same id as previously created players, you'll need to call the player's dispose() method to clear VideoJS's internal state before creating the new player.
Signs You Did It Wrong
-------------------------
```
TypeError: this.el_.vjs_getProperty is not a function
"VIDEOJS:" "Video.js: buffered unavailable on Hls playback technology element." TypeError: this.el_.vjs_getProperty is not a function
Stack trace:
...
```
If you encounter a console error in the browser similar to the above, you've probably forgotten to `dispose()` a player before removing it from the dom. This would happen when using the [contrib-hls](https://github.com/videojs/videojs-contrib-hls) plugin.
You can download the Video.js source and host it on your own servers, or use the free CDN hosted version. As of Video.js 5.0, the source is [transpiled from ES2015](http://babeljs.io/) (formerly known as ES6) to [ES5](https://es5.github.io/), but IE8 only supports ES3. In order to continue to support IE8, we've bundled an [ES5 shim and sham](https://github.com/es-shims/es5-shim) together and hosted it on the CDN.
Alternatively you can always [go here](http://videojs.com/getting-started/) to get the latest URL for videojs CDN.
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:
```js
window.HELP_IMPROVE_VIDEOJS=false;
```
## Install via package manager
### NPM
```
$ npm install --save video.js
```
### Bower
```
$ bower install --save video.js
```
### Self Hosted. ###
To entirely self-host, you'll need to pull in the font files and let Video.js know where the swf is located. If you simply copy the dist folder or zip file contents into your project everything
should Just Work™, but the paths can easily be changed by editing the LESS file and re-building, or by modifying the generated CSS file. Additionally include the [videojs-vtt.js](https://www.npmjs.com/package/videojs-vtt.js) source, which adds the `WebVTT` object to the global scope.
With Video.js you just use an HTML5 video tag to embed a video. Video.js will then read the tag and make it work in all browsers, not just ones that support HTML5 video. Beyond the basic markup, Video.js needs a few extra pieces.
> Note: The `data-setup` attribute described here should not be used if you use the alternative setup described in the next section.
1. The 'data-setup' Attribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see [options](./options.md)). There are other methods for initializing the player, but this is the easiest.
2. The 'id' Attribute: Should be used and unique for every video on the same page.
3. The 'class' attribute contains two classes:
-`video-js` applies styles that are required for Video.js functionality, like fullscreen and subtitles.
-`vjs-default-skin` applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.
Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.*
<pclass="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <ahref="http://videojs.com/html5-video-support/"target="_blank">supports HTML5 video</a></p>
</video>
```
By default, the big play button is located in the upper left hand corner so it doesn't cover up the interesting parts of the poster. If you'd prefer to center the big play button, you can add an additional `vjs-big-play-centered` class to your video element. For example:
If your web page or application loads the video tag dynamically (ajax, appendChild, etc.), so that it may not exist when the page loads, you'll want to manually set up the player instead of relying on the data-setup attribute. To do this, first remove the data-setup attribute from the tag so there's no confusion around when the player is initialized. Next, run the following javascript some time after the Video.js javascript library has loaded, and after the video tag has been loaded into the DOM.
```js
videojs("example_video_1",{},function(){
// Player (this) is initialized and ready.
});
```
The first argument in the `videojs` function is the ID of your video tag. Replace it with your own.
The second argument is an options object. It allows you to set additional options like you can with the data-setup attribute.
The third argument is a 'ready' callback. Once Video.js has initialized it will call this function.
Instead of using an element ID, you can also pass a reference to the element itself.
// You can grab an element by class if you'd like, just make sure
// if it's an array that you pick one (here we chose the first).
});
```
\* 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](https://github.com/videojs/video.js/blob/master/CONTRIBUTING.md).
The base Video.js skin is made using HTML and CSS (although we use the [Sass preprocessor](http://sass-lang.com)),
and by default these styles are added to the DOM for you!
That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding
the styles you'd like to change.
If you don't want Video.js to inject the base styles for you, you can disable it by setting `window.VIDEOJS_NO_BASE_THEME = true` before Video.js is loaded.
Keep in mind that without these base styles enabled, you'll need to manually include them.
Video.js does not currently include the base skin automatically yet, so, this option isn't necessary.
## Default style elements
Video.js uses a couple of style elements dynamically, specifically, there's a default styles element as well as a player dimensions style element.
They are used to provide extra default flexiblity with styling the player. However, in some cases, like if a user has the HEAD tag managed by React, users do not want this.
When `window.VIDEOJS_NO_DYNAMIC_STYLE` is set to `true`, video.js will *not* include these element in the page.
This means that default dimensions and configured player dimensions will *not* be applied.
For example, the following player will end up having a width and height of 0 when initialized if `window.VIDEOJS_NO_DYNAMIC_STYLE === true`:
```html
<videowidth="600"height="300"></video>
```
### `Player#width` and `Player#height`
When `VIDEOJS_NO_DYNAMIC_STYLE` is set, `Player#width` and `Player#height` will apply any width and height
that is set directly to the video element (or whatever element the current tech uses).
## Icons
You can view all of the icons available in the base theme by renaming and viewing
[`icons.html.example`](https://github.com/videojs/video.js/blob/master/sandbox/icons.html.example) in the sandbox directory.
## Customization
When you create a new skin, the easiest way to get started is to simply override the base Video.js theme.
You should include a new class matching the name of your theme, then just start overriding!
Playback Technology refers to the specific browser or plugin technology used to play the video or audio. When using HTML5, the playback technology is the video or audio element. When using Flash, the playback technology is the specific Flash player used, e.g. Flowplayer, YouTube Player, video-js.swf, etc. (not just "Flash"). This could also include Silverlight, Quicktime, or any other plugin that will play back video in the browser, as long as there is an API wrapper written for it.
Essentially we're using HTML5 and plugins only as video decoders, and using HTML and JavaScript to create a consistent API and skinning experience across all of them.
Building an API Wrapper
-----------------------
We'll write a more complete guide on writing a wrapper soon, but for now the best resource is the [Video.js](https://github.com/zencoder/video-js/tree/master/src) source where you can see how both the HTML5 and video-js.swf API wrappers were created.
Required Methods
----------------
canPlayType
play
pause
currentTime
volume
duration
buffered
supportsFullScreen
Required Events
---------------
loadstart
play
pause
playing
ended
volumechange
durationchange
error
Optional Events (include if supported)
--------------------------------------
timeupdate
progress
enterFullScreen
exitFullScreen
Adding Playback Technology
==================
When adding additional Tech to a video player, make sure to add the supported tech to the video object.
By default Video.js performs "Tech-first" ordering when it searches for a source/tech combination to play videos. This means that if you have two sources and two techs, video.js will try to play each video with the first tech in the `techOrder` option property before moving on to try the next playback technology.
Tech-first ordering can present a problem if you have a `sourceHandler` that supports both `Html5` and `Flash` techs such as videojs-contrib-hls.
There is a good chance that the mp4 source will be selected on platforms that do not have media source extensions. Video.js will try all sources against the first playback technology, in this case `Html5`, and select the first source that can play - in this case MP4.
In "Tech-first" mode, the tests run something like this:
Can video.m3u8 play with Html5? No...
Can video.mp4 play with Html5? Yes! Use the second source.
Video.js now provides another method of selecting the source - "Source-first" ordering. In this mode, Video.js tries the first source against every tech in `techOrder` before moving onto the next source.
The Flash-based HLS support will be tried before falling back to the MP4 source.
In "Source-first" mode, the tests run something like this:
Can video.m3u8 play with Html5? No...
Can video.m3u8 play with Flash? Yes! Use the first source.
Flash Technology
==================
The Flash playback tech is a part of the default `techOrder`. You may notice undesirable playback behavior in browsers that are subject to using this playback tech, in particular when scrubbing and seeking within a video. This behavior is a result of Flash's progressive video playback.
Enabling Streaming Playback
--------------------------------
In order to force the Flash tech to choose streaming playback, you need to provide a valid streaming source **before other valid Flash video sources**. This is necessary because of the source selection algorithm, where playback tech chooses the first possible source object with a valid type. Valid streaming `type` values include `rtmp/mp4` and `rtmp/flv`. The streaming `src` value requires valid connection and stream strings, separated by an `&`. An example of supplying a streaming source through your HTML markup might look like:
Text Tracks are a function of HTML5 video for providing time triggered text to the viewer. Video.js makes tracks work across all browsers. There are currently five types of tracks:
- **Subtitles**: Translations of the dialogue in the video for when audio is available but not understood. Subtitles are shown over the video.
- **Captions**: Transcription of the dialogue, sound effects, musical cues, and other audio information for when the viewer is deaf/hard of hearing, or the video is muted. Captions are also shown over the video.
- **Chapters**: Chapter titles that are used to create navigation within the video. Typically they're in the form of a list of chapters that the viewer can click on to go to a specific chapter.
- **Descriptions**: Text descriptions of what's happening in the video for when the video portion isn't available, because the viewer is blind, not using a screen, or driving and about to crash because they're trying to enjoy a video while driving. Descriptions are read by a screen reader or turned into a separate audio track.
- **Metadata**: Tracks that have data meant for javascript to parse and do something with. These aren't shown to the user.
## Creating the Text File
Timed text requires a text file in [WebVTT](http://dev.w3.org/html5/webvtt/) format. This format defines a list of "cues" that have a start time, and end time, and text to display. [Microsoft has a builder](https://dev.modern.ie/testdrive/demos/captionmaker/) that can help you get started on the file.
When creating captions, there's also additional [caption formatting techniques] (http://www.theneitherworld.com/mcpoodle/SCC_TOOLS/DOCS/SCC_FORMAT.HTML#style) that would be good to use, like brackets around sound effects: [ sound effect ]. If you'd like a more in depth style guide for captioning, you can reference the [Captioning Key](http://www.dcmp.org/captioningkey/), but keep in mind not all features are supported by WebVTT or (more likely) the Video.js WebVTT implementation.
## Adding to Video.js
Once you have your WebVTT file created, you can add it to Video.js using the track tag. Put your track tag after all the source elements, and before any fallback content.
Because we're pulling in the text track file via Javascript, the [same-origin policy](http://en.wikipedia.org/wiki/Same_origin_policy) applies. If you'd like to have a player served from one domain,
but the text track served from another, you'll need to [enable CORS](http://enable-cors.org/) in order to do so.
In addition to enabling CORS on the server serving the text tracks, you will need to add the [`crossorigin` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) to the video element itself. This attribute has two values `anonymous` and `use-credentials`. Most users will want to use `anonymous` with cross-origin tracks.
One thing to be aware of is that in this case the video files themselves will *also* needs CORS headers applied to it. This is because some browsers apply the crossorigin attribute to the video source itself and not just the tracks and is considered a [security concern by the spec](https://html.spec.whatwg.org/multipage/embedded-content.html#security-and-privacy-considerations).
## Track Attributes
Additional settings for track tags.
### kind
One of the five track types listed above. Kind defaults to subtitles if no kind is included.
### label
The label for the track that will be show to the user, for example in a menu that list the different languages available for subtitles.
### default
The default attribute can be used to have a track default to showing. Otherwise the viewer would need to select their language from the captions or subtitles menu.
NOTE: For chapters, default is required if you want the chapters menu to show.
### srclang
The two-letter code (valid BCP 47 language tag) for the language of the text track, for example "en" for English. A list of language codes is [available here](languages.md#language-codes).
## Interacting with Text Tracks
### Showing tracks programmatically
Some of you would want to turn captions on and off programmatically rather than just forcing the user to do so themselves. This can be easily achieved by modifying the `mode` of the text tracks.
The `mode` can be one of three values `disabled`, `hidden`, and `showing`.
When a text track's `mode` is `disabled`, the track does not show on screen as the video is playing.
When the `mode` is set to `showing`, the track is visible to the viewer and updates while the video is playing.
Above, we mentioned that `mode` can also be `hidden`, what this means is that the track will update
as the video is playing but it won't be visible to the viewer. This is most useful for `metadata` text tracks.
One usecase for metadata text tracks is to have something happen when their cues become active, to do so, you listen to the `cuechange` event on the track. These events fire when the mode is `showing` as well.
By default, video.js will try and use native text tracks if possible and fall back to emulated text tracks if the native functionality is broken or incomplete or non-existent.
The Flash tech will always use the emulated text track functionality.
The video.js API and TextTrack objects were modeled after the w3c's specification.
video.js uses [Mozilla's vtt.js](https://github.com/mozilla/vtt.js) library to parse and display its emulated text tracks.
If you wanted to disable native text track functionality and force video.js to use emulated text tracks always, you can supply the `nativeTextTracks` option to the tech like so:
```js
letplayer=videojs('myvideo',{
html5:{
nativeTextTracks:false
}
});
```
### Text Track Settings
When using emulated Text Tracks, captions will have an additional item in the menu called "caption settings".
This allows the viewer of the player to change some styles of how the captions are displayed on screen.
If you don't want that, you can disable it by turning off the text track settings component and hiding the menu item like so:
```js
letplayer=videojs('myvideo',{
// make the text track settings dialog not initialize
textTrackSettings:false
});
```
```css
/* hide the captions settings item from the captions menu */
.vjs-texttrack-settings{
display:none;
}
```
## Text Track Precedence
In general, the Descriptions tracks is of lower precedence than captions and subtitles.
What this means for you?
* If you are using the `default` attribute, videojs will choose the first track that is marked as `default` and turn it on. If There are multiple tracks marked `default`, it will try and turn on the first `captions` or `subtitles` track *before* any `descriptions` tracks.
* This only applied to the emulated captions support, native text tracks behavior will change depending on the browser
* If you select a given track from the menu, videojs will turn off all the other tracks of the same kind. This may seem like you can have both subtitles and captions turned on at the same time but unfortuantely, at this time we only support one track being displayed at a time.
* This means that for emulated text tracks, we'll choose the first captions or subtitles track that is enabled to display.
* When native text tracks are supported, we will still disable the other tracks of the same kind but it is possible that multiple text tracks are shown.
* If a `descriptions` track is selected and subsequently a `subtitles` or `captions` track is selected, the `descriptions` track is disabled and its menu button is also disabled.
* When enabling a track programmatically, there's not much checking that videojs does.
* For emulated text tracks, when it's time to display the captions, video.js would choose the first track that's showing, again choosing `subtitles` or `captions` over `descriptions`, if necessary.
* For native text tracks, this behavior depends on the browser. Some browsers will let you have multiple text tracks but others will disable all other tracks when a new one is selected.
## API
### `player.textTracks() -> TextTrackList`
This is the main interface into the text tracks of the player.
It return a TextTrackList which lists all the tracks on the player.
### `player.remoteTextTracks() -> TextTrackList`
This is a helper method to get a list of all the tracks that were created from `track` elements or that were added to the player by the `addRemoteTextTrack` method. All these tracks are removeable from the player, where-as not all tracks from `player.textTracks()` are necessarily removeable.
This is based on the [w3c spec API](http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack) and when given a kind and an optional label and language, will create a new text track for you to use.
This method is intended for purely programmatic usage of tracks and has one important limitation:
tracks created using this method *cannot* be removed. The native `addTextTrack` does not have a corresponding `removeTextTrack`, so, we actually discourage the usage of this method.
This function takes an options object that looks pretty similar to the track element and returns a HTMLTrackElement.
This object has a `track` property on it which is the actual TextTrack object.
This `TextTrack` object is equivalent to the one that can be returned from `player.addTextTrack` with the added bonus that it can be removed from the player.
Internally, video.js will either add a `<track>` element for you, or emulate that depending on whether native text tracks are supported or not.
Video Tracks are a function of HTML5 video for providing a selection of alternative video tracks to the user, so that they can change type of video they want to watch. Video.js makes video tracks work across all browsers. There are currently six types of tracks:
- **Alternative**: an alternative video representation of the main video track
- **Captions**: The main video track with burned in captions
- **Main**: the main video track
- **Sign**: the main video track with added sign language overlay
- **Subtitles**: the main video track with burned in subtitles
- **Commentary**: the main video track with burned in commentary
## Missing Funtionality
- It is currently impossible to add VideoTracks in a non-programtic way
- Literal switching of VideoTracks for playback is not handled by video.js and must be handled by something else. video.js only stores the track representation
- There is currently no UI implementation of VideoTracks
## Adding to Video.js
> Right now adding video tracks in the HTML is unsupported. Video Tracks must be added programatically.
You must add video tracks [programatically](#api) for the time being.
## Attributes
Video Track propertites and settings
### kind
One of the five track types listed above. Kind defaults to empty string if no kind is included, or an invalid kind is used.
### label
The label for the track that will be show to the user, for example in a menu that list the different languages available for video tracks.
### language
The two-letter code (valid BCP 47 language tag) for the language of the video track, for example "en" for English. A list of language codes is [available here](languages.md#language-codes).
### selected
If this track should be playing or not. Trying to select more than one track will cause other tracks to be deselected.
## Interacting with Video Tracks
### Doing something when a track becomes enabled
When a new track is enabled (other than the main track) an event is fired on the `VideoTrackList` called `change` you can listen to that event and do something with it.
Here's an example:
```js
// get the current players VideoTrackList object
lettracks=player.videoTracks();
// listen to the change event
tracks.addEventListener('change',function(){
// get the currently selected track
letindex=tracks.selectedIndex;
lettrack=tracks[index];
// print the currently selected track
console.log(track.label);
});
```
## API
### `player.videoTracks() -> VideoTrackList`
This is the main interface into the video tracks of the player.
It returns an VideoTrackList which is an array like object that contains all the `VideoTrack` on the player.
### `player.videoTracks().addTrack(VideoTrack)`
Add an existing VideoTrack to the players internal list of VideoTracks.
The Video.js documentation is here to help you setup and use the player. These docs can be found and contributed to in the [Video.js library repository](https://github.com/zencoder/video-js/tree/master/docs).
There are two categories of docs: [Guides](./guides/) and [API docs](./api/). Guides explain general topics and use cases (e.g. setup). API docs are automatically generated from the codebase and give specific details about functions, properties, and events.
### [Setup](/docs/setup)
Check out the [5 second setup](/#setup) if you're just getting started. The setup documentation gives a deeper view of the additional methods you can use to trigger the player setup.
(Corrections and additions welcome)
### [Options](/docs/options/)
There are a number of options that can be used to change how the player behaves, starting with the HTML5 media options like autoplay and preload, and expanding to Video.JS specific options.
## Guides
### [API](/docs/api/)
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.
### Getting Started
### [Skins](/docs/skins/)
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.
* [Setup](./guides/setup.md) - The setup documentation gives a deeper view of the additional methods you can use to trigger the player setup.
### [Tech](/docs/tech/)
A 'playback technology' is the term we're using to represent HTML5 video, Flash, and other video plugins, as well as other players like the YouTube player. Basically anything that has a unique API to audio or video. Additional playback technologies can be added relatively easily.
* [Options](./guides/options.md) - There are a number of options that can be used to change how the player behaves, starting with the HTML5 media options like autoplay and preload, and expanding to Video.js specific options.
### [Glossary](/docs/glossary/)
Some helpful definitions.
* [Tracks](./guides/tracks.md) - Tracks are used for displaying text information over a video, selecting different audio tracks for a video, or selected different video tracks for a video.
### Customizing
* [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.
* [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.
* [Tech](./guides/tech.md) - A 'playback technology' is the term we're using to represent HTML5 video, Flash, and other video plugins, as well as other players like the YouTube player. Basically anything that has a unique API to audio or video. Additional playback technologies can be added relatively easily.
* [Plugins](./guides/plugins.md) - 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.
### Resources
* [Glossary](./guides/glossary.md) - Some helpful definitions.
* [Removing Players](./guides/removing-players.md) - Helpful for using VideoJS in single page apps.
## API Docs
- The most relevant API doc is the [player API doc](./api/vjs.Player.md).
You can download the Video.js source and host it on your own servers, or use the free CDN hosted version. It's often recommended now to put JavaScript before the end body tag (</body>) instead of the head (<head>), but Video.js includes an 'HTML5 Shiv', which needs to be in the head for older IE versions to respect the video tag as a valid element.
> NOTE: If you're already using an HTML5 shiv like [Modernizr](http://modernizr.com/) you can include the Video.js JavaScript anywhere, however make sure your version of Modernizr includes the shiv for video.
With Video.js you just use an HTML5 video tag to embed a video. Video.js will then read the tag and make it work in all browsers, not just ones that support HTML5 video. Beyond the basic markup, Video.js needs a few extra pieces.
1. The 'data-setup' Atrribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see ['options'](http://videojs.com/docs/options/)). There are other methods for initializing the player, but this is the easiest.
2. The 'id' Attribute: Should be used and unique for every video on the same page.
3. The 'class' attribute contains two classes:
- 'video-js' applies styles that are required for Video.js functionality, like fullscreen and subtitles.
- 'vjs-default-skin' applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.
Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.
If your web page or application loads the video tag dynamically (ajax, appendChild, etc.), so that it may not exist when the page loads, you'll want to manually set up the player instead of relying on the data-setup attribute. To do this, first remove the data-setup attribute from the tag so there's no confusion around when the player is initialized. Next, run the following javascript some time after the Video.js javascript library has loaded, and after the video tag has been loaded into the DOM.
<code type="javascript">
_V_("example_video_1", {}, function(){
// Player (this) is initialized and ready.
});
</code>
The first argument in the \_V_ function is the ID of your video tag. Replace it with your own.
The second argument is an options object. It allows you to set additional options like you can with the data-setup attribute.
The third argument is a 'ready' callback. Once Video.js has initialized it will call this function.
The default Video.js skin is made using HTML and CSS, so there's no need to learn a complicated skinning language to update colors or even create an entirely new skin. New in version 3.0 is the use of a sprites image file (video-js.png). The image allows for a little bit more classy design, as well as compatibility with older versions of IE now that the HTML skin also shows when Flash is used for those browsers.
You can view the uncompressed CSS for the default skin by downloading the latest version of Video.js or viewing [the source version](https://github.com/zencoder/video-js/blob/master/design/video-js.css) on Github.
You can either override styles in the default skin:
Or remove the 'vjs-default-skin' class from the video tag and create your own skin.
{% highlight html %}
<video class="video-js my-custom-skin" ...>
{% endhighlight %}
More custom skins will be available for download soon. If you have one you'd like to contribute back, please email it to <script type="text/javascript">eval(decodeURIComponent('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%73%6b%69%6e%73%40%76%69%64%65%6f%6a%73%2e%63%6f%6d%22%3e%73%6b%69%6e%73%40%76%69%64%65%6f%6a%73%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script>.
Playback Technology refers to the specific browser or plugin technology used to play the video or audio. When using HTML5, the playback technology is the video or audio element. When using Flash, the playback technology is the specific Flash player used, e.g. Flowplayer, YouTube Player, video-js.swf, etc. (not just "Flash"). This could also include Silverlight, Quicktime, or any other plugin that will play back video in the browser, as long as there is an API wrapper written for it.
Essentially we're using HTML5 and plugins only as video decoders, and using HTML and JavaScript to create a consistent API and skinning experience across all of them.
Building an API Wrapper
-----------------------
We'll write a more complete guide on writing a wrapper soon, but for now the best resource is the [Video.js](https://github.com/zencoder/video-js/tree/master/src) source where you can see how both the HTML5 and video-js.swf API wrappers were created.
title: HTML5 Video Text Tracks (Subtitles, Captions, Chapters)
description: Video.js support for captions, subtitles, and chapters through the use of the HTML5 video track element.
body_id: tracks
body_class: docs subpage
---
Tracks
======
Text Tracks are a function of HTML5 video for providing time triggered text to the viewer. Video.js makes tracks work across all browsers. There are currently five types of tracks:
- **Subtitles**: Translations of the dialogue in the video for when audio is available but not understood. Subtitles are shown over the video.
- **Captions**: Transcription of the dialogue, sound effects, musical cues, and other audio information for when the viewer is deaf/hard of hearing, or the video is muted. Captions are also shown over the video.
- **Chapters**: Chapter titles that are used to create navigation within the video. Typically they're in the form of a list of chapters that the viewer can click on to go to a specific chapter.
- **Descriptions** (not supported yet): Text descriptions of what's happening in the video for when the video portion isn't available, because the viewer is blind, not using a screen, or driving and about to crash because they're trying to enjoy a video while driving. Descriptions are read by a screen reader or turned into a separate audio track.
- **Metadata** (not supported yet): Tracks that have data meant for javascript to parse and do something with. These aren't shown to the user.
Creating the Text File
----------------------
Timed text requires a text file in [WebVTT](http://dev.w3.org/html5/webvtt/) format. This format defines a list of "cues" that have a start time, and end time, and text to display. [Microsoft has a builder](http://ie.microsoft.com/testdrive/Graphics/CaptionMaker/) that can help you get started on the file.
When creating captions, there's also additional (caption formatting techniques)[http://www.theneitherworld.com/mcpoodle/SCC_TOOLS/DOCS/SCC_FORMAT.HTML#style] that would be good to use, like brackets around sound effects. [ sound effect ]
Adding to Video.js
------------------
Once you have your WebVTT file created, you can add it to Video.js using the track trag. Put your track track tag after all the source elements, and before any fallback content.
One of the five track types listed above. Kind defaults to subtitles if no kind is included.
### label
The label for the track that will be show to the user, for example in a menu that list the different languages available for subtitles.
### default
The default attribute can be used to have a track default to showing. Otherwise the viewer would need to select their language from the captions or subtitles menu.
NOTE: For chapters, default is required if you want the chapters menu to show.
### srclang
The two-letter code (valid BCP 47 language tag) for the language of the text track, for example "en" for English. Here's a list of available language codes.
"You aborted the media playback":"لقد ألغيت تشغيل الفيديو",
"A network error caused the media download to fail part-way.":"تسبب خطأ في الشبكة بفشل تحميل الفيديو بالكامل.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"لا يمكن تحميل الفيديو بسبب فشل في الخادم أو الشبكة ، أو فشل بسبب عدم امكانية قراءة تنسيق الفيديو.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"تم ايقاف تشغيل الفيديو بسبب مشكلة فساد أو لأن الفيديو المستخدم يستخدم ميزات غير مدعومة من متصفحك.",
"No compatible source was found for this media.":"فشل العثور على أي مصدر متوافق مع هذا الفيديو.",
"Play Video":"تشغيل الفيديو",
"Close":"أغلق",
"Modal Window":"نافذة مشروطة",
"This is a modal window":"هذه نافذة مشروطة",
"This modal can be closed by pressing the Escape key or activating the close button.":"يمكن غلق هذه النافذة المشروطة عن طريق الضغط على زر الخروج أو تفعيل زر الإغلاق",
"You aborted the media playback":"Isključili ste reprodukciju videa.",
"A network error caused the media download to fail part-way.":"Video se prestao preuzimati zbog greške na mreži.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"Video se ne može reproducirati zbog servera, greške u mreži ili je format ne podržan.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"Reprodukcija videa je zaustavljenja zbog greške u formatu ili zbog verzije vašeg pretraživača.",
"No compatible source was found for this media.":"Nije nađen nijedan kompatibilan izvor ovog videa."
"You aborted the media playback":"Спряхте възпроизвеждането на видеото",
"A network error caused the media download to fail part-way.":"Грешка в мрежата провали изтеглянето на видеото.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"Видеото не може да бъде заредено заради проблем със сървъра или мрежата или защото този формат не е поддържан.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"Възпроизвеждането на видеото беше прекъснато заради проблем с файла или защото видеото използва опции които браузърът Ви не поддържа.",
"No compatible source was found for this media.":"Не беше намерен съвместим източник за това видео."
"You aborted the media playback":"Heu interromput la reproducció del vídeo.",
"A network error caused the media download to fail part-way.":"Un error de la xarxa ha interromput la baixada del vídeo.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"No s'ha pogut carregar el vídeo perquè el servidor o la xarxa han fallat, o bé perquè el seu format no és compatible.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"La reproducció de vídeo s'ha interrumput per un problema de corrupció de dades o bé perquè el vídeo demanava funcions que el vostre navegador no ofereix.",
"No compatible source was found for this media.":"No s'ha trobat cap font compatible amb el vídeo."
"You aborted the media playback":"Přehrávání videa je přerušeno.",
"A network error caused the media download to fail part-way.":"Video nemohlo být načteno, kvůli chybě v síti.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"Video nemohlo být načteno, buď kvůli chybě serveru nebo sítě nebo proto, že daný formát není podporován.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"Váš prohlížeč nepodporuje formát videa.",
"No compatible source was found for this media.":"Špatně zadaný zdroj videa."
"captions off":"Uden undertekster for hørehæmmede",
"Chapters":"Kapitler",
"You aborted the media playback":"Du afbrød videoafspilningen.",
"A network error caused the media download to fail part-way.":"En netværksfejl fik download af videoen til at fejle.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"Videoen kunne ikke indlæses, enten fordi serveren eller netværket fejlede, eller fordi formatet ikke er understøttet.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"Videoafspilningen blev afbrudt på grund af ødelagte data eller fordi videoen benyttede faciliteter som din browser ikke understøtter.",
"No compatible source was found for this media.":"Fandt ikke en kompatibel kilde for denne media."
"You aborted the media playback":"Sie haben die Videowiedergabe abgebrochen.",
"A network error caused the media download to fail part-way.":"Der Videodownload ist aufgrund eines Netzwerkfehlers fehlgeschlagen.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"Das Video konnte nicht geladen werden, da entweder ein Server- oder Netzwerkfehler auftrat oder das Format nicht unterstützt wird.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"Die Videowiedergabe wurde entweder wegen eines Problems mit einem beschädigten Video oder wegen verwendeten Funktionen, die vom Browser nicht unterstützt werden, abgebrochen.",
"No compatible source was found for this media.":"Für dieses Video wurde keine kompatible Quelle gefunden.",
"Play Video":"Video abspielen",
"Close":"Schließen",
"Modal Window":"Modales Fenster",
"This is a modal window":"Dies ist ein modales Fenster",
"This modal can be closed by pressing the Escape key or activating the close button.":"Durch Drücken der Esc-Taste bzw. Betätigung der Schaltfläche \"Schließen\" wird dieses modale Fenster geschlossen.",
", opens captions settings dialog":", öffnet Einstellungen für Untertitel",
", opens subtitles settings dialog":", öffnet Einstellungen für Untertitel",
"You aborted the media playback":"Ακυρώσατε την αναπαραγωγή",
"A network error caused the media download to fail part-way.":"Ένα σφάλμα δικτύου προκάλεσε την αποτυχία μεταφόρτωσης του αρχείου προς αναπαραγωγή.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"Το αρχείο προς αναπαραγωγή δεν ήταν δυνατό να φορτωθεί είτε γιατί υπήρξε σφάλμα στον διακομιστή ή το δίκτυο, είτε γιατί ο τύπος του αρχείου δεν υποστηρίζεται.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"Η αναπαραγωγή ακυρώθηκε είτε λόγω κατεστραμμένου αρχείου, είτε γιατί το αρχείο απαιτεί λειτουργίες που δεν υποστηρίζονται από το πρόγραμμα περιήγησης που χρησιμοποιείτε.",
"No compatible source was found for this media.":"Δεν βρέθηκε συμβατή πηγή αναπαραγωγής για το συγκεκριμένο αρχείο.",
"Play video":"Αναπαραγωγή βίντεο",
"Close":"Κλείσιμο",
"Modal Window":"Aναδυόμενο παράθυρο",
"This is a modal window":"Το παρών είναι ένα αναδυόμενο παράθυρο",
"This modal can be closed by pressing the Escape key or activating the close button.":"Αυτό το παράθυρο μπορεί να εξαφανιστεί πατώντας το πλήκτρο Escape ή πατώντας το κουμπί κλεισίματος.",
", opens captions settings dialog":", εμφανίζει τις ρυθμίσεις για τις λεζάντες",
", opens subtitles settings dialog":", εμφανίζει τις ρυθμίσεις για τους υπότιτλους",
"You aborted the media playback":"You aborted the media playback",
"A network error caused the media download to fail part-way.":"A network error caused the media download to fail part-way.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"The media could not be loaded, either because the server or network failed or because the format is not supported.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.",
"No compatible source was found for this media.":"No compatible source was found for this media.",
"Play Video":"Play Video",
"Close":"Close",
"Modal Window":"Modal Window",
"This is a modal window":"This is a modal window",
"This modal can be closed by pressing the Escape key or activating the close button.":"This modal can be closed by pressing the Escape key or activating the close button.",
"You aborted the media playback":"Ha interrumpido la reproducción del vídeo.",
"A network error caused the media download to fail part-way.":"Un error de red ha interrumpido la descarga del vídeo.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"La reproducción de vídeo se ha interrumpido por un problema de corrupción de datos o porque el vídeo precisa funciones que su navegador no ofrece.",
"No compatible source was found for this media.":"No se ha encontrado ninguna fuente compatible con este vídeo."
"You aborted the media playback":"شما پخش را متوقف کردید.",
"A network error caused the media download to fail part-way.":"مشکل در دریافت ویدئو ...",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"فرمت پشتیبانی نمیشود یا خطایی روی داده است.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"مشکل در دریافت ویدئو ...",
"No compatible source was found for this media.":"هیچ ورودی ای برای این رسانه شناسایی نشد."
"You aborted the media playback":"Olet keskeyttänyt videotoiston.",
"A network error caused the media download to fail part-way.":"Verkkovirhe keskeytti videon latauksen.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"Videon lataus ei onnistunut joko palvelin- tai verkkovirheestä tai väärästä formaatista johtuen.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"Videon toisto keskeytyi, koska media on vaurioitunut tai käyttää käyttää toimintoja, joita selaimesi ei tue.",
"No compatible source was found for this media.":"Tälle videolle ei löytynyt yhteensopivaa lähdettä."
"You aborted the media playback":"Vous avez interrompu la lecture de la vidéo.",
"A network error caused the media download to fail part-way.":"Une erreur de réseau a interrompu le téléchargement de la vidéo.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"Cette vidéo n'a pas pu être chargée, soit parce que le serveur ou le réseau a échoué ou parce que le format n'est pas reconnu.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"La lecture de la vidéo a été interrompue à cause d'un problème de corruption ou parce que la vidéo utilise des fonctionnalités non prises en charge par votre navigateur.",
"No compatible source was found for this media.":"Aucune source compatible n'a été trouvée pour cette vidéo."
"You aborted the media playback":"Isključili ste reprodukciju videa.",
"A network error caused the media download to fail part-way.":"Video se prestao preuzimati zbog greške na mreži.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"Video se ne može reproducirati zbog servera, greške u mreži ili je format ne podržan.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"Reprodukcija videa je zaustavljenja zbog greške u formatu ili zbog verzije vašeg pretraživača.",
"No compatible source was found for this media.":"Nije nađen nijedan kompatibilan izvor ovog videa."
"You aborted the media playback":"Leállította a lejátszást",
"A network error caused the media download to fail part-way.":"Hálózati hiba miatt a videó részlegesen töltődött le.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"A videó nem tölthető be hálózati vagy kiszolgálói hiba miatt, vagy a formátuma nem támogatott.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"A lejátszás adatsérülés miatt leállt, vagy a videó egyes tulajdonságait a böngészője nem támogatja.",
"No compatible source was found for this media.":"Nincs kompatibilis forrás ehhez a videóhoz."
"You aborted the media playback":"La riproduzione del filmato è stata interrotta.",
"A network error caused the media download to fail part-way.":"Il download del filmato è stato interrotto a causa di un problema rete.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"Il filmato non può essere caricato a causa di un errore nel server o nella rete o perché il formato non viene supportato.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"La riproduzione del filmato è stata interrotta a causa di un file danneggiato o per l’utilizzo di impostazioni non supportate dal browser.",
"No compatible source was found for this media.":"Non ci sono fonti compatibili per questo filmato."
"A network error caused the media download to fail part-way.":"ネットワーク エラーにより動画のダウンロードが途中で失敗しました",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"サーバーまたはネットワークのエラー、またはフォーマットがサポートされていないため、動画をロードできませんでした",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"破損の問題、またはお使いのブラウザがサポートしていない機能が動画に使用されていたため、動画の再生が中止されました",
"No compatible source was found for this media.":"この動画に対して互換性のあるソースが見つかりませんでした"
"You aborted the media playback":"비디오 재생을 취소했습니다.",
"A network error caused the media download to fail part-way.":"네트워크 오류로 인하여 비디오 일부를 다운로드하지 못 했습니다.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"비디오를 로드할 수 없습니다. 서버 혹은 네트워크 오류 때문이거나 지원되지 않는 형식 때문일 수 있습니다.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"비디오 재생이 취소됐습니다. 비디오가 손상되었거나 비디오가 사용하는 기능을 브라우저에서 지원하지 않는 것 같습니다.",
"No compatible source was found for this media.":"비디오에 호환되지 않는 소스가 있습니다."
"captions off":"Undertekst for hørselshemmede av",
"Chapters":"Kapitler",
"You aborted the media playback":"Du avbrøt avspillingen.",
"A network error caused the media download to fail part-way.":"En nettverksfeil avbrøt nedlasting av videoen.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":"Videoen kunne ikke lastes ned, på grunn av nettverksfeil eller serverfeil, eller fordi formatet ikke er støttet.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"Videoavspillingen ble avbrudt på grunn av ødelagte data eller fordi videoen ville gjøre noe som nettleseren din ikke har støtte for.",
"No compatible source was found for this media.":"Fant ikke en kompatibel kilde for dette mediainnholdet."
}
Alguns arquivos não foram exibidos porque demasiados arquivos foram alterados neste diff
Mostrar Mais
Referência em uma Nova Issue
Bloquear um usuário
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.