created: 20180113181502426 modified: 20180128160857909 tags: title: $:/plugins/TheDiveO/TwTube/usage type: text/vnd.tiddlywiki ! Usage A video player widget is created using `<$videojs>`. You then specify the audio-video media to play inside the widget using ordinary HTML5 `source` elements. Such as: ``` <$videojs controls="controls" fluid="fluid"> ``` ! Widget Attributes The `<$videojs>` video player widget supports the following attributes: |!Attribute |!Description | |^`aspectratio` |The video player aspect ratio as two numbers separated by a colon, such as `"16:9"` or `"4:3"`. While the [[Video.js documentation states|http://docs.videojs.com/tutorial-options.html]] the aspect ratio additionally puts the player into "fluid" mode, this seems to be incorrect. You'll still need to also specify the `fluid` attribute if you want the player to scale to fit its container. | |^`autoplay` |When present and not empty the player automatically begins playback when it is ready. | |^`class` |The CSS class or classes for the video player. You don't need to specify `"video-js"` as it gets added automatically by the widget. | |^`controls` |When present and not empty the player shows controls the user can interact it. If this attribute is left out the only way to start the player is using the `autoplay` attribute. | |^`fluid` |When present and not empty the player will scale to fit its container. | |^`height` |Sets the height of the video player in pixels. See also the `fluid` attribute when responsive design is needed. | |^`language` |Sets the initial language of the player using a language code, such as `"en"`. If not specified, the language defaults to the web browser language setting, or -- as the last resort -- to `"en"`. | |^`loop` |When present and not empty the the video gets looped endless and endless and ... you get the drift. | |^`muted` |When present and not empty then audio is muted by default. The user then can unmute audio at any time. | |^`poster` |URL to an image that gets displayed before the video begins playing. | |^`preload` |Indicates to the web browser whether media data download should begin immediately or not. Possible values are `auto`, `metadata`, and `none`. `auto` selects immediate downloading, but only if the web browser supports this. `metadata` preloads only information like video frame dimensions and duration. `none` disables preloading and the player will download the media only after the user clicked the "play" button. | |^`pluginsdata` |Specifies plugin (configuration) data in form of a JSON string. For instance: 
pluginsdata='{"persistvolume": {"namespace": "twtube"}}'
Alternatively, you can specify plugin configuration data in data tiddlers of type `application/json` and tagged with `$:/tags/VideojsPluginConfig`. | |^`width` |Sets the width of the video player in pixels. See also the `fluid` attribute when responsive design is needed. | ! Widget Content The content of the video player widget needs to be one or more media source declarations using the HTML5 `source` element. A typical example is: ``` ``` You can specify multiple media sources for different media formats, so that browsers can pick the format they support or even like the best. ! Widget CSS Classes This is an imcomplete list of CSS classes to be used on your `<$videojs>` widgets you might find mildly useful: ;`vjs-big-play-centered` : centers the play button over the video player widget instead of hiding it in its topleft corner. The rationale for defaulting to the topleft corner seems to be that then the button does not cover some interesting preload image details in the center. ! Plugin Configuration Data The Video.js player widget supports Video.js plugins. The player widget comes with one Video.js plugin out of the box: a plugin for making your player volume setting persistent. However, you need to activate Video.js plugins by specifying plugin configuration data. Otherwise, these Video.js plugins won't get activated. Configuration data can be specified either: * using the `pluginsdata=` attribute of a `<$videojs>` widget; this allows for an individual per-player configuration. * using Video.js plugin configuration data tiddlers, tagged with `$:/tags/VideojsPluginConfig` and of type `application/json`. ! Persistent Volume Setting Plugin As we deem the persistent volume setting plugin incredibly useful, it's enabled by default. The player's volume setting is stored in either your browser's persistent storage, or, if that isn't available, in a cookie. In the default configuration, the `<$videojs>` widgets in ''all ~TiddlyWikis share the same volume setting''. If you change the player volume in one ~TiddlyWiki, the other ~TiddlyWikis will pick up this most recent volume setting automatically. If you want instead //individual// player volume settings per ~TiddlyWiki, then overwrite the plugin tiddler [[$:/plugins/TheDiveO/TwTube/videojsplugins/videojs.persistvolume.config]] and specify a different namespace value for each of your ~TiddlyWikis. ! Caveats Due to the way ~TiddlyWiki handles widget parameters, it is not enough to specify a "boolean" parameter in itself or with an empty `""` value. Instead, you need to specify some non-empty value. The actual value is, erm, actually irrelevant, as long as it is not empty. For instance: ``` <$videojs controls="controls"/> ``` Even if these parameters are (following the HTML5 standard) termed "boolean" values, you ''cannot'' specify a false value. Any value is taken as a truth value.