Comparar commits
1 Commits
| Autor | SHA1 | Data | |
|---|---|---|---|
 Gary Katsevman
|
c4374c389c |
@@ -6,70 +6,6 @@ _(none)_
|
||||
|
||||
--------------------
|
||||
|
||||
## 5.11.2 (2016-08-09)
|
||||
_(none)_
|
||||
|
||||
## 5.11.1 (2016-08-08)
|
||||
* @vxsx fixed legend selector to be more specific. Fixes #3492 ([view](https://github.com/videojs/video.js/pull/3494))
|
||||
|
||||
## 5.11.0 (2016-07-22)
|
||||
* @BrandonOCasey Document audio/video track usage ([view](https://github.com/videojs/video.js/pull/3295))
|
||||
* @hartman Correct documentation to refer to nativeTextTracks option ([view](https://github.com/videojs/video.js/pull/3309))
|
||||
* @nickygerritsen Also pass tech options to canHandleSource ([view](https://github.com/videojs/video.js/pull/3303))
|
||||
* @misteroneill Un-deprecate the videojs.players property ([view](https://github.com/videojs/video.js/pull/3299))
|
||||
* @nickygerritsen Add title to all clickable components ([view](https://github.com/videojs/video.js/pull/3296))
|
||||
* @nickygerritsen Update Dutch language file ([view](https://github.com/videojs/video.js/pull/3297))
|
||||
* @hartman Add descriptions and audio button to adaptive classes ([view](https://github.com/videojs/video.js/pull/3312))
|
||||
* @MattiasBuelens Retain details from tech error ([view](https://github.com/videojs/video.js/pull/3313))
|
||||
* @nickygerritsen Fix test for tooltips in IE8 ([view](https://github.com/videojs/video.js/pull/3327))
|
||||
* @mboles added loadstart event to jsdoc ([view](https://github.com/videojs/video.js/pull/3370))
|
||||
* @hartman added default print styling ([view](https://github.com/videojs/video.js/pull/3304))
|
||||
* @ldayananda updated videojs to not do anything if no src is set ([view](https://github.com/videojs/video.js/pull/3378))
|
||||
* @nickygerritsen removed unused tracks when changing sources. Fixes #3000 ([view](https://github.com/videojs/video.js/pull/3002))
|
||||
* @vit-koumar updated Flash tech to return Infinity from duration instead of -1 ([view](https://github.com/videojs/video.js/pull/3128))
|
||||
* @alex-phillips added ontextdata to Flash tech ([view](https://github.com/videojs/video.js/pull/2748))
|
||||
* @MattiasBuelens updated components to use durationchange only ([view](https://github.com/videojs/video.js/pull/3349))
|
||||
* @misteroneill improved Logging for IE < 11 ([view](https://github.com/videojs/video.js/pull/3356))
|
||||
* @vdeshpande updated control text of modal dialog ([view](https://github.com/videojs/video.js/pull/3400))
|
||||
* @ldayananda fixed mouse handling on menus by using mouseleave over mouseout ([view](https://github.com/videojs/video.js/pull/3404))
|
||||
* @mister-ben updated language to inherit correctly and respect the attribute on the player ([view](https://github.com/videojs/video.js/pull/3426))
|
||||
* @sashyro fixed nativeControlsForTouch option ([view](https://github.com/videojs/video.js/pull/3410))
|
||||
* @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))
|
||||
|
||||
|
||||
+1
-3
@@ -450,7 +450,6 @@ module.exports = function(grunt) {
|
||||
require('load-grunt-tasks')(grunt);
|
||||
grunt.loadNpmTasks('videojs-doc-generator');
|
||||
grunt.loadNpmTasks('chg');
|
||||
grunt.loadNpmTasks('gkatsev-grunt-sass');
|
||||
|
||||
const buildDependents = [
|
||||
'clean:build',
|
||||
@@ -494,8 +493,7 @@ module.exports = function(grunt) {
|
||||
// Default task - build and test
|
||||
grunt.registerTask('default', ['test']);
|
||||
|
||||
// The test script includes coveralls only when the TRAVIS env var is set.
|
||||
grunt.registerTask('test', ['build', 'karma:defaults'].concat(process.env.TRAVIS && 'coveralls').filter(Boolean));
|
||||
grunt.registerTask('test', ['build', 'karma:defaults']);
|
||||
|
||||
// Run while developing
|
||||
grunt.registerTask('dev', ['build', 'connect:dev', 'concurrent:watchSandbox']);
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "video.js",
|
||||
"description": "An HTML5 and Flash video player with a common API and skin for both.",
|
||||
"version": "5.11.2",
|
||||
"version": "5.10.2",
|
||||
"keywords": [
|
||||
"videojs",
|
||||
"html5",
|
||||
|
||||
externo
+9
-36
@@ -437,8 +437,7 @@ body.vjs-full-window {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
font-family: Arial, Helvetica, sans-serif; }
|
||||
overflow: auto; }
|
||||
|
||||
.vjs-scrubbing .vjs-menu-button:hover .vjs-menu {
|
||||
display: none; }
|
||||
@@ -1185,22 +1184,19 @@ video::-webkit-media-text-track-display {
|
||||
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-current-time, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-time-divider, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-duration, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-remaining-time,
|
||||
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-playback-rate, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-progress-control,
|
||||
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-mute-control, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-volume-control, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-volume-menu-button,
|
||||
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-chapters-button, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-descriptions-button, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-captions-button,
|
||||
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-subtitles-button, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-audio-button {
|
||||
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-chapters-button, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-captions-button, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-subtitles-button {
|
||||
display: none; }
|
||||
|
||||
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-current-time, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-time-divider, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-duration, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-remaining-time,
|
||||
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-playback-rate,
|
||||
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-mute-control, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-volume-control, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-volume-menu-button,
|
||||
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-chapters-button, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-descriptions-button, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-captions-button,
|
||||
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-subtitles-button, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-audio-button {
|
||||
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-chapters-button, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-captions-button, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-subtitles-button {
|
||||
display: none; }
|
||||
|
||||
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-current-time, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-time-divider, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-duration, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-remaining-time,
|
||||
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-playback-rate,
|
||||
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-mute-control, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-volume-control,
|
||||
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-chapters-button, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-descriptions-button, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-captions-button,
|
||||
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-subtitles-button .vjs-audio-button {
|
||||
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-chapters-button, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-captions-button, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-subtitles-button {
|
||||
display: none; }
|
||||
|
||||
.vjs-caption-settings {
|
||||
@@ -1211,13 +1207,13 @@ video::-webkit-media-text-track-display {
|
||||
color: #fff;
|
||||
margin: 0 auto;
|
||||
padding: 0.5em;
|
||||
height: 16em;
|
||||
height: 15em;
|
||||
font-size: 12px;
|
||||
width: 40em; }
|
||||
|
||||
.vjs-caption-settings .vjs-tracksettings {
|
||||
top: 0;
|
||||
bottom: 1em;
|
||||
bottom: 2em;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
@@ -1240,20 +1236,16 @@ video::-webkit-media-text-track-display {
|
||||
.vjs-caption-settings .vjs-tracksetting {
|
||||
margin: 5px;
|
||||
padding: 3px;
|
||||
min-height: 40px;
|
||||
border: none; }
|
||||
min-height: 40px; }
|
||||
|
||||
.vjs-caption-settings .vjs-tracksetting label,
|
||||
.vjs-caption-settings .vjs-tracksetting legend {
|
||||
.vjs-caption-settings .vjs-tracksetting label {
|
||||
display: block;
|
||||
width: 100px;
|
||||
margin-bottom: 5px; }
|
||||
|
||||
.vjs-caption-settings .vjs-tracksetting span {
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
vertical-align: top;
|
||||
float: right; }
|
||||
margin-left: 5px; }
|
||||
|
||||
.vjs-caption-settings .vjs-tracksetting > div {
|
||||
margin-bottom: 5px;
|
||||
@@ -1267,21 +1259,6 @@ video::-webkit-media-text-track-display {
|
||||
.vjs-caption-settings label > input {
|
||||
margin-right: 10px; }
|
||||
|
||||
.vjs-caption-settings fieldset {
|
||||
margin-top: 1em;
|
||||
margin-left: .5em; }
|
||||
|
||||
.vjs-caption-settings fieldset .vjs-label {
|
||||
position: absolute;
|
||||
clip: rect(1px 1px 1px 1px);
|
||||
/* for Internet Explorer */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden; }
|
||||
|
||||
.vjs-caption-settings input[type="button"] {
|
||||
width: 40px;
|
||||
height: 40px; }
|
||||
@@ -1296,7 +1273,3 @@ video::-webkit-media-text-track-display {
|
||||
line-height: 1.5;
|
||||
padding: 20px 24px;
|
||||
z-index: 1; }
|
||||
|
||||
@media print {
|
||||
.video-js > *:not(.vjs-tech):not(.vjs-poster) {
|
||||
visibility: hidden; } }
|
||||
|
||||
externo
+1
-1
Diff do arquivo suprimido porque uma ou mais linhas são muito longas
externo
+261
-405
Diff do arquivo suprimido porque uma ou mais linhas são muito longas
externo
+10
-13
Diff do arquivo suprimido porque uma ou mais linhas são muito longas
externo
+1
-1
Diff do arquivo suprimido porque uma ou mais linhas são muito longas
+3
@@ -3,11 +3,14 @@
|
||||
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<title>Video.js | HTML5 Video Player</title>
|
||||
<link href="http://vjs.zencdn.net/5.0.2/video-js.css" rel="stylesheet">
|
||||
<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
|
||||
<script src="http://vjs.zencdn.net/5.0.2/video.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
externo
-1
@@ -18,7 +18,6 @@ videojs.addLanguage("en",{
|
||||
"Captions": "Captions",
|
||||
"captions off": "captions off",
|
||||
"Chapters": "Chapters",
|
||||
"Close Modal Dialog": "Close Modal Dialog",
|
||||
"Descriptions": "Descriptions",
|
||||
"descriptions off": "descriptions off",
|
||||
"You aborted the media playback": "You aborted the media playback",
|
||||
|
||||
externo
+4
-15
@@ -14,24 +14,13 @@ videojs.addLanguage("nl",{
|
||||
"Unmute": "Geluid aan",
|
||||
"Playback Rate": "Weergavesnelheid",
|
||||
"Subtitles": "Ondertiteling",
|
||||
"subtitles off": "ondertiteling uit",
|
||||
"Captions": "Bijschriften",
|
||||
"captions off": "bijschriften uit",
|
||||
"subtitles off": "Ondertiteling uit",
|
||||
"Captions": "Ondertiteling",
|
||||
"captions off": "Ondertiteling uit",
|
||||
"Chapters": "Hoofdstukken",
|
||||
"Descriptions": "Beschrijvingen",
|
||||
"descriptions off": "beschrijvingen off",
|
||||
"You aborted the media playback": "U hebt de mediaweergave afgebroken.",
|
||||
"A network error caused the media download to fail part-way.": "De mediadownload is mislukt door een netwerkfout.",
|
||||
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "De media kon niet worden geladen, vanwege een server- of netwerkfout of doordat het formaat niet wordt ondersteund.",
|
||||
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "De mediaweergave is afgebroken vanwege beschadigde data of het mediabestand gebruikt functies die niet door uw browser worden ondersteund.",
|
||||
"No compatible source was found for this media.": "Voor deze media is geen ondersteunde bron gevonden.",
|
||||
"Play Video": "Video Afspelen",
|
||||
"Close": "Sluiten",
|
||||
"Modal Window": "Modal Venster",
|
||||
"This is a modal window": "Dit is een modaal venster",
|
||||
"This modal can be closed by pressing the Escape key or activating the close button.": "Dit modaal venster kan gesloten worden door op Escape te drukken of de 'sluiten' knop te activeren.",
|
||||
", opens captions settings dialog": ", opent bijschriften instellingen venster",
|
||||
", opens subtitles settings dialog": ", opent ondertiteling instellingen venster",
|
||||
", opens descriptions settings dialog": ", opent beschrijvingen instellingen venster",
|
||||
", selected": ", selected"
|
||||
"No compatible source was found for this media.": "Voor deze media is geen ondersteunde bron gevonden."
|
||||
});
|
||||
externo
+3
-3
@@ -1,6 +1,6 @@
|
||||
videojs.addLanguage("pt-BR",{
|
||||
"Play": "Tocar",
|
||||
"Pause": "Pausar",
|
||||
"Pause": "Pause",
|
||||
"Current Time": "Tempo",
|
||||
"Duration Time": "Duração",
|
||||
"Remaining Time": "Tempo Restante",
|
||||
@@ -18,9 +18,9 @@ videojs.addLanguage("pt-BR",{
|
||||
"Captions": "Anotações",
|
||||
"captions off": "Sem Anotações",
|
||||
"Chapters": "Capítulos",
|
||||
"You aborted the media playback": "Você parou a execução do vídeo.",
|
||||
"You aborted the media playback": "Você parou a execução de vídeo.",
|
||||
"A network error caused the media download to fail part-way.": "Um erro na rede fez o vídeo parar parcialmente.",
|
||||
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "O vídeo não pode ser carregado, ou porque houve um problema com sua rede ou pelo formato do vídeo não ser suportado.",
|
||||
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "A execução foi interrompida por um problema com o vídeo ou por seu navegador não dar suporte ao seu formato.",
|
||||
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "A Execução foi interrompida por um problema com o vídeo ou por seu navegador não dar suporte ao seu formato.",
|
||||
"No compatible source was found for this media.": "Não foi encontrada fonte de vídeo compatível."
|
||||
});
|
||||
Arquivo binário não exibido.
externo
+9
-36
@@ -437,8 +437,7 @@ body.vjs-full-window {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
font-family: Arial, Helvetica, sans-serif; }
|
||||
overflow: auto; }
|
||||
|
||||
.vjs-scrubbing .vjs-menu-button:hover .vjs-menu {
|
||||
display: none; }
|
||||
@@ -1185,22 +1184,19 @@ video::-webkit-media-text-track-display {
|
||||
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-current-time, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-time-divider, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-duration, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-remaining-time,
|
||||
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-playback-rate, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-progress-control,
|
||||
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-mute-control, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-volume-control, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-volume-menu-button,
|
||||
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-chapters-button, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-descriptions-button, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-captions-button,
|
||||
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-subtitles-button, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-audio-button {
|
||||
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-chapters-button, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-captions-button, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-subtitles-button {
|
||||
display: none; }
|
||||
|
||||
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-current-time, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-time-divider, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-duration, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-remaining-time,
|
||||
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-playback-rate,
|
||||
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-mute-control, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-volume-control, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-volume-menu-button,
|
||||
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-chapters-button, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-descriptions-button, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-captions-button,
|
||||
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-subtitles-button, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-audio-button {
|
||||
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-chapters-button, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-captions-button, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-subtitles-button {
|
||||
display: none; }
|
||||
|
||||
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-current-time, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-time-divider, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-duration, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-remaining-time,
|
||||
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-playback-rate,
|
||||
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-mute-control, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-volume-control,
|
||||
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-chapters-button, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-descriptions-button, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-captions-button,
|
||||
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-subtitles-button .vjs-audio-button {
|
||||
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-chapters-button, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-captions-button, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-subtitles-button {
|
||||
display: none; }
|
||||
|
||||
.vjs-caption-settings {
|
||||
@@ -1211,13 +1207,13 @@ video::-webkit-media-text-track-display {
|
||||
color: #fff;
|
||||
margin: 0 auto;
|
||||
padding: 0.5em;
|
||||
height: 16em;
|
||||
height: 15em;
|
||||
font-size: 12px;
|
||||
width: 40em; }
|
||||
|
||||
.vjs-caption-settings .vjs-tracksettings {
|
||||
top: 0;
|
||||
bottom: 1em;
|
||||
bottom: 2em;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
@@ -1240,20 +1236,16 @@ video::-webkit-media-text-track-display {
|
||||
.vjs-caption-settings .vjs-tracksetting {
|
||||
margin: 5px;
|
||||
padding: 3px;
|
||||
min-height: 40px;
|
||||
border: none; }
|
||||
min-height: 40px; }
|
||||
|
||||
.vjs-caption-settings .vjs-tracksetting label,
|
||||
.vjs-caption-settings .vjs-tracksetting legend {
|
||||
.vjs-caption-settings .vjs-tracksetting label {
|
||||
display: block;
|
||||
width: 100px;
|
||||
margin-bottom: 5px; }
|
||||
|
||||
.vjs-caption-settings .vjs-tracksetting span {
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
vertical-align: top;
|
||||
float: right; }
|
||||
margin-left: 5px; }
|
||||
|
||||
.vjs-caption-settings .vjs-tracksetting > div {
|
||||
margin-bottom: 5px;
|
||||
@@ -1267,21 +1259,6 @@ video::-webkit-media-text-track-display {
|
||||
.vjs-caption-settings label > input {
|
||||
margin-right: 10px; }
|
||||
|
||||
.vjs-caption-settings fieldset {
|
||||
margin-top: 1em;
|
||||
margin-left: .5em; }
|
||||
|
||||
.vjs-caption-settings fieldset .vjs-label {
|
||||
position: absolute;
|
||||
clip: rect(1px 1px 1px 1px);
|
||||
/* for Internet Explorer */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden; }
|
||||
|
||||
.vjs-caption-settings input[type="button"] {
|
||||
width: 40px;
|
||||
height: 40px; }
|
||||
@@ -1296,7 +1273,3 @@ video::-webkit-media-text-track-display {
|
||||
line-height: 1.5;
|
||||
padding: 20px 24px;
|
||||
z-index: 1; }
|
||||
|
||||
@media print {
|
||||
.video-js > *:not(.vjs-tech):not(.vjs-poster) {
|
||||
visibility: hidden; } }
|
||||
|
||||
externo
+1
-1
Diff do arquivo suprimido porque uma ou mais linhas são muito longas
externo
+261
-405
Diff do arquivo suprimido porque uma ou mais linhas são muito longas
externo
+20
-18
Diff do arquivo suprimido porque uma ou mais linhas são muito longas
externo
+10
-13
Diff do arquivo suprimido porque uma ou mais linhas são muito longas
externo
+1
-1
Diff do arquivo suprimido porque uma ou mais linhas são muito longas
@@ -3,11 +3,14 @@
|
||||
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<title>Video.js | HTML5 Video Player</title>
|
||||
<link href="http://vjs.zencdn.net/5.0.2/video-js.css" rel="stylesheet">
|
||||
<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
|
||||
<script src="http://vjs.zencdn.net/5.0.2/video.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@@ -1,69 +0,0 @@
|
||||
# Audio Tracks
|
||||
|
||||
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
|
||||
let tracks = player.audioTracks();
|
||||
|
||||
// listen to the change event
|
||||
tracks.addEventListener('change', function() {
|
||||
|
||||
// print the currently enabled AudioTrack label
|
||||
for (let i = 0; i < tracks.length; i++) {
|
||||
let track = 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.
|
||||
|
||||
### `player.audioTracks().removeTrack(AudioTrack)`
|
||||
Remove a track from the AudioTrackList currently on the player. if no track exists this will do nothing.
|
||||
@@ -32,7 +32,6 @@ A sample dictionary for Spanish `['es']` would look as follows:
|
||||
"Captions": "Subtítulos especiales",
|
||||
"captions off": "Subtítulos especiales desactivados",
|
||||
"Chapters": "Capítulos",
|
||||
"Close Modal Dialog": "Cerca de diálogo modal",
|
||||
"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.",
|
||||
@@ -81,7 +80,6 @@ NOTE: These need to be added after the core Video.js script.
|
||||
"Captions": "Subtítulos especiales",
|
||||
"captions off": "Subtítulos especiales desactivados",
|
||||
"Chapters": "Capítulos",
|
||||
"Close Modal Dialog": "Cerca de diálogo modal",
|
||||
"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.",
|
||||
@@ -131,14 +129,14 @@ During a Video.js player instantiation you can force it to localize to a specifi
|
||||
Determining Player Language
|
||||
---------------------------
|
||||
|
||||
The player language is set to one of the following in descending priority:
|
||||
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)
|
||||
* The language set in setup options as above
|
||||
* The document language (`lang` attribute of the `html` element)
|
||||
* Browser language preference
|
||||
* '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.
|
||||
That can be overridden after instantiation with `language('fr')`.
|
||||
|
||||
Language selection
|
||||
------------------
|
||||
|
||||
@@ -1,184 +0,0 @@
|
||||
# Text 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**: 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.
|
||||
|
||||
```html
|
||||
<video id="example_video_1" class="video-js"
|
||||
controls preload="auto" width="640" height="264"
|
||||
data-setup='{"example_option":true}'>
|
||||
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
|
||||
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm" />
|
||||
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" />
|
||||
|
||||
<track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
|
||||
|
||||
</video>
|
||||
```
|
||||
|
||||
You can also add tracks [programatically](#api).
|
||||
|
||||
## Subtitles from Another Domain
|
||||
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.
|
||||
It can be added to the video element like so:
|
||||
```html
|
||||
<video class="video-js" crossorigin="anonymous">
|
||||
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
|
||||
<track src="http://example.com/oceans.vtt" kind="captions" srclang="en" label="English">
|
||||
</video>
|
||||
```
|
||||
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.
|
||||
You can change of a particular track like so:
|
||||
```js
|
||||
let tracks = player.textTracks();
|
||||
|
||||
for (let i = 0; i < tracks.length; i++) {
|
||||
let track = tracks[i];
|
||||
|
||||
// find the captions track that's in english
|
||||
if (track.kind === 'captions' && track.language === 'en') {
|
||||
track.mode = 'showing';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Doing something when a cue becomes active
|
||||
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.
|
||||
Here's an example:
|
||||
```js
|
||||
let tracks = player.textTracks();
|
||||
let metadataTrack;
|
||||
|
||||
for (let i = 0; i < tracks.length; i++) {
|
||||
let track = tracks[i];
|
||||
|
||||
// find the metadata track that's labeled ads
|
||||
if (track.kind === 'captions' && track.label === 'ads') {
|
||||
track.mode = 'hidden';
|
||||
// store it for usage outside of the loop
|
||||
metadataTrack = track;
|
||||
}
|
||||
}
|
||||
|
||||
metadataTrack.addEventListener('cuechange', function() {
|
||||
player.ads.startLinearAdMode();
|
||||
});
|
||||
```
|
||||
|
||||
## Emulated Text Tracks
|
||||
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
|
||||
let player = 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
|
||||
let player = 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.
|
||||
|
||||
### `player.remoteTextTrackEls() -> HTMLTrackElementList`
|
||||
Another helper method, this is a list of all the `track` elements associated with the player. Both emulated or otherwise.
|
||||
|
||||
### `player.addTextTrack(String kind, [String label [, String language]]) -> TextTrack`
|
||||
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.
|
||||
|
||||
### `player.addRemoteTextTrack(Object options) -> HTMLTrackElement`
|
||||
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.
|
||||
The options available are:
|
||||
* `kind`
|
||||
* `label`
|
||||
* `language` (also `srclang`)
|
||||
* `id`
|
||||
* `src`
|
||||
|
||||
### `player.removeRemoteTextTrack(HTMLTrackElement|TextTrack)`
|
||||
This function takes either an HTMLTrackElement or a TextTrack object and removes it from the player.
|
||||
+182
-4
@@ -1,6 +1,184 @@
|
||||
# Tracks
|
||||
There are currently three types of tracks
|
||||
|
||||
* [AudioTracks](./audio-tracks.md) - allows the selection of alternative AudioTracks for a video
|
||||
* [VideoTracks](./video-tracks.md) - allows the selection of an alternative VideoTrack for a video
|
||||
* [TextTracks](./text-tracks.md) - Text Tracks are used to display subtitles and captions, and add a menu for navigating between chapters in a video.
|
||||
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.
|
||||
|
||||
```html
|
||||
<video id="example_video_1" class="video-js"
|
||||
controls preload="auto" width="640" height="264"
|
||||
data-setup='{"example_option":true}'>
|
||||
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
|
||||
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm" />
|
||||
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" />
|
||||
|
||||
<track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
|
||||
|
||||
</video>
|
||||
```
|
||||
|
||||
You can also add tracks [programatically](#api).
|
||||
|
||||
## Subtitles from Another Domain
|
||||
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.
|
||||
It can be added to the video element like so:
|
||||
```html
|
||||
<video class="video-js" crossorigin="anonymous">
|
||||
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
|
||||
<track src="http://example.com/oceans.vtt" kind="captions" srclang="en" label="English">
|
||||
</video>
|
||||
```
|
||||
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.
|
||||
You can change of a particular track like so:
|
||||
```js
|
||||
let tracks = player.textTracks();
|
||||
|
||||
for (let i = 0; i < tracks.length; i++) {
|
||||
let track = tracks[i];
|
||||
|
||||
// find the captions track that's in english
|
||||
if (track.kind === 'captions' && track.language === 'en') {
|
||||
track.mode = 'showing';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Doing something when a cue becomes active
|
||||
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.
|
||||
Here's an example:
|
||||
```js
|
||||
let tracks = player.textTracks();
|
||||
let metadataTrack;
|
||||
|
||||
for (let i = 0; i < tracks.length; i++) {
|
||||
let track = tracks[i];
|
||||
|
||||
// find the metadata track that's labeled ads
|
||||
if (track.kind === 'captions' && track.label === 'ads') {
|
||||
track.mode = 'hidden';
|
||||
// store it for usage outside of the loop
|
||||
metadataTrack = track;
|
||||
}
|
||||
}
|
||||
|
||||
metadataTrack.addEventListener('cuechange', function() {
|
||||
player.ads.startLinearAdMode();
|
||||
});
|
||||
```
|
||||
|
||||
## Emulated Text Tracks
|
||||
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 `nativeTextTrack` option to the tech like so:
|
||||
```js
|
||||
let player = videojs('myvideo', {
|
||||
html5: {
|
||||
nativeTextTrack: 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
|
||||
let player = 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.
|
||||
|
||||
### `player.remoteTextTrackEls() -> HTMLTrackElementList`
|
||||
Another helper method, this is a list of all the `track` elements associated with the player. Both emulated or otherwise.
|
||||
|
||||
### `player.addTextTrack(String kind, [String label [, String language]]) -> TextTrack`
|
||||
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.
|
||||
|
||||
### `player.addRemoteTextTrack(Object options) -> HTMLTrackElement`
|
||||
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.
|
||||
The options available are:
|
||||
* `kind`
|
||||
* `label`
|
||||
* `language` (also `srclang`)
|
||||
* `id`
|
||||
* `src`
|
||||
|
||||
### `player.removeRemoteTextTrack(HTMLTrackElement|TextTrack)`
|
||||
This function takes either an HTMLTrackElement or a TextTrack object and removes it from the player.
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
# Video Tracks
|
||||
|
||||
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
|
||||
let tracks = player.videoTracks();
|
||||
|
||||
// listen to the change event
|
||||
tracks.addEventListener('change', function() {
|
||||
// get the currently selected track
|
||||
let index = tracks.selectedIndex;
|
||||
let track = 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.
|
||||
|
||||
### `player.videoTracks().removeTrack(VideoTrack)`
|
||||
Remove a track from the VideoTrackList currently on the player. if no track exists this will do nothing.
|
||||
|
||||
### `player.videoTracks().selectedIndex`
|
||||
The current index for the selected track
|
||||
+1
-1
@@ -14,7 +14,7 @@ There are two categories of docs: [Guides](./guides/) and [API docs](./api/). Gu
|
||||
|
||||
* [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.
|
||||
|
||||
* [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.
|
||||
* [Tracks](./guides/tracks.md) - Text Tracks are used to display subtitles and captions, and add a menu for navigating between chapters in a video.
|
||||
|
||||
### Customizing
|
||||
|
||||
|
||||
@@ -18,7 +18,6 @@
|
||||
"Captions": "Captions",
|
||||
"captions off": "captions off",
|
||||
"Chapters": "Chapters",
|
||||
"Close Modal Dialog": "Close Modal Dialog",
|
||||
"Descriptions": "Descriptions",
|
||||
"descriptions off": "descriptions off",
|
||||
"You aborted the media playback": "You aborted the media playback",
|
||||
|
||||
+4
-15
@@ -14,24 +14,13 @@
|
||||
"Unmute": "Geluid aan",
|
||||
"Playback Rate": "Weergavesnelheid",
|
||||
"Subtitles": "Ondertiteling",
|
||||
"subtitles off": "ondertiteling uit",
|
||||
"Captions": "Bijschriften",
|
||||
"captions off": "bijschriften uit",
|
||||
"subtitles off": "Ondertiteling uit",
|
||||
"Captions": "Ondertiteling",
|
||||
"captions off": "Ondertiteling uit",
|
||||
"Chapters": "Hoofdstukken",
|
||||
"Descriptions": "Beschrijvingen",
|
||||
"descriptions off": "beschrijvingen off",
|
||||
"You aborted the media playback": "U hebt de mediaweergave afgebroken.",
|
||||
"A network error caused the media download to fail part-way.": "De mediadownload is mislukt door een netwerkfout.",
|
||||
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "De media kon niet worden geladen, vanwege een server- of netwerkfout of doordat het formaat niet wordt ondersteund.",
|
||||
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "De mediaweergave is afgebroken vanwege beschadigde data of het mediabestand gebruikt functies die niet door uw browser worden ondersteund.",
|
||||
"No compatible source was found for this media.": "Voor deze media is geen ondersteunde bron gevonden.",
|
||||
"Play Video": "Video Afspelen",
|
||||
"Close": "Sluiten",
|
||||
"Modal Window": "Modal Venster",
|
||||
"This is a modal window": "Dit is een modaal venster",
|
||||
"This modal can be closed by pressing the Escape key or activating the close button.": "Dit modaal venster kan gesloten worden door op Escape te drukken of de 'sluiten' knop te activeren.",
|
||||
", opens captions settings dialog": ", opent bijschriften instellingen venster",
|
||||
", opens subtitles settings dialog": ", opent ondertiteling instellingen venster",
|
||||
", opens descriptions settings dialog": ", opent beschrijvingen instellingen venster",
|
||||
", selected": ", selected"
|
||||
"No compatible source was found for this media.": "Voor deze media is geen ondersteunde bron gevonden."
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"Play": "Tocar",
|
||||
"Pause": "Pausar",
|
||||
"Pause": "Pause",
|
||||
"Current Time": "Tempo",
|
||||
"Duration Time": "Duração",
|
||||
"Remaining Time": "Tempo Restante",
|
||||
@@ -18,9 +18,9 @@
|
||||
"Captions": "Anotações",
|
||||
"captions off": "Sem Anotações",
|
||||
"Chapters": "Capítulos",
|
||||
"You aborted the media playback": "Você parou a execução do vídeo.",
|
||||
"You aborted the media playback": "Você parou a execução de vídeo.",
|
||||
"A network error caused the media download to fail part-way.": "Um erro na rede fez o vídeo parar parcialmente.",
|
||||
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "O vídeo não pode ser carregado, ou porque houve um problema com sua rede ou pelo formato do vídeo não ser suportado.",
|
||||
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "A execução foi interrompida por um problema com o vídeo ou por seu navegador não dar suporte ao seu formato.",
|
||||
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "A Execução foi interrompida por um problema com o vídeo ou por seu navegador não dar suporte ao seu formato.",
|
||||
"No compatible source was found for this media.": "Não foi encontrada fonte de vídeo compatível."
|
||||
}
|
||||
|
||||
+11
-12
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "video.js",
|
||||
"description": "An HTML5 and Flash video player with a common API and skin for both.",
|
||||
"version": "5.11.2",
|
||||
"version": "5.10.2",
|
||||
"copyright": "Copyright Brightcove, Inc. <https://www.brightcove.com/>",
|
||||
"license": "Apache-2.0",
|
||||
"keywords": [
|
||||
@@ -14,7 +14,7 @@
|
||||
"homepage": "http://videojs.com",
|
||||
"author": "Steve Heffernan",
|
||||
"scripts": {
|
||||
"test": "grunt test"
|
||||
"test": "grunt test && if [ '$TRAVIS' ]; then grunt coveralls; fi;"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -23,16 +23,16 @@
|
||||
"main": "./dist/video.js",
|
||||
"style": "./dist/video-js.css",
|
||||
"dependencies": {
|
||||
"global": "4.3.0",
|
||||
"lodash-compat": "3.10.2",
|
||||
"object.assign": "4.0.3",
|
||||
"safe-json-parse": "4.0.0",
|
||||
"global": "^4.3.0",
|
||||
"lodash-compat": "^3.9.3",
|
||||
"object.assign": "^4.0.1",
|
||||
"safe-json-parse": "^4.0.0",
|
||||
"tsml": "1.0.1",
|
||||
"videojs-font": "2.0.0",
|
||||
"videojs-font": "^2.0.0",
|
||||
"videojs-ie8": "1.1.2",
|
||||
"videojs-swf": "5.1.0",
|
||||
"videojs-vtt.js": "0.12.1",
|
||||
"xhr": "2.2.0"
|
||||
"videojs-swf": "5.0.1",
|
||||
"videojs-vtt.js": "^0.12.1",
|
||||
"xhr": "~2.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel": "^5.2.2",
|
||||
@@ -44,8 +44,6 @@
|
||||
"chg": "^0.3.2",
|
||||
"css": "^2.2.0",
|
||||
"es5-shim": "^4.1.3",
|
||||
"es6-shim": "^0.35.1",
|
||||
"gkatsev-grunt-sass": "^1.1.1",
|
||||
"grunt": "^0.4.4",
|
||||
"grunt-aws-s3": "^0.12.1",
|
||||
"grunt-banner": "^0.4.0",
|
||||
@@ -66,6 +64,7 @@
|
||||
"grunt-fastly": "^0.1.3",
|
||||
"grunt-github-releaser": "^0.1.17",
|
||||
"grunt-karma": "^0.8.3",
|
||||
"grunt-sass": "^1.0.0",
|
||||
"grunt-version": "~0.3.0",
|
||||
"grunt-videojs-languages": "0.0.4",
|
||||
"grunt-zip": "0.10.2",
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
@media print {
|
||||
.video-js > *:not(.vjs-tech):not(.vjs-poster) {
|
||||
visibility:hidden;
|
||||
}
|
||||
}
|
||||
@@ -8,8 +8,7 @@
|
||||
.vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time,
|
||||
.vjs-playback-rate, .vjs-progress-control,
|
||||
.vjs-mute-control, .vjs-volume-control, .vjs-volume-menu-button,
|
||||
.vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button,
|
||||
.vjs-subtitles-button, .vjs-audio-button { display: none; }
|
||||
.vjs-chapters-button, .vjs-captions-button, .vjs-subtitles-button { display: none; }
|
||||
}
|
||||
|
||||
// When the player is x-small, display nothing but:
|
||||
@@ -20,8 +19,7 @@
|
||||
.vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time,
|
||||
.vjs-playback-rate,
|
||||
.vjs-mute-control, .vjs-volume-control, .vjs-volume-menu-button,
|
||||
.vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button,
|
||||
.vjs-subtitles-button, .vjs-audio-button { display: none; }
|
||||
.vjs-chapters-button, .vjs-captions-button, .vjs-subtitles-button { display: none; }
|
||||
}
|
||||
|
||||
|
||||
@@ -35,6 +33,5 @@
|
||||
.vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time,
|
||||
.vjs-playback-rate,
|
||||
.vjs-mute-control, .vjs-volume-control,
|
||||
.vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button,
|
||||
.vjs-subtitles-button .vjs-audio-button { display: none; }
|
||||
.vjs-chapters-button, .vjs-captions-button, .vjs-subtitles-button { display: none; }
|
||||
}
|
||||
|
||||
@@ -6,14 +6,14 @@
|
||||
color: $primary-foreground-color;
|
||||
margin: 0 auto;
|
||||
padding: 0.5em;
|
||||
height: 16em;
|
||||
height: 15em;
|
||||
font-size: 12px;
|
||||
width: 40em;
|
||||
}
|
||||
|
||||
.vjs-caption-settings .vjs-tracksettings {
|
||||
top: 0;
|
||||
bottom: 1em;
|
||||
bottom: 2em;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
@@ -40,10 +40,8 @@
|
||||
margin: 5px;
|
||||
padding: 3px;
|
||||
min-height: 40px;
|
||||
border: none;
|
||||
}
|
||||
.vjs-caption-settings .vjs-tracksetting label,
|
||||
.vjs-caption-settings .vjs-tracksetting legend {
|
||||
.vjs-caption-settings .vjs-tracksetting label {
|
||||
display: block;
|
||||
width: 100px;
|
||||
margin-bottom: 5px;
|
||||
@@ -52,8 +50,6 @@
|
||||
.vjs-caption-settings .vjs-tracksetting span {
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
vertical-align: top;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.vjs-caption-settings .vjs-tracksetting > div {
|
||||
@@ -71,23 +67,6 @@
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.vjs-caption-settings fieldset {
|
||||
margin-top: 1em;
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
// Hide labels within fieldsets, so they are only for screen reader users
|
||||
.vjs-caption-settings fieldset .vjs-label {
|
||||
position: absolute;
|
||||
clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vjs-caption-settings input[type="button"] {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
@@ -16,7 +16,6 @@
|
||||
display: block;
|
||||
padding: 0; margin: 0;
|
||||
overflow: auto;
|
||||
font-family: $text-font-family;
|
||||
}
|
||||
|
||||
// prevent menus from opening while scrubbing (FF, IE)
|
||||
|
||||
@@ -39,5 +39,3 @@
|
||||
@import "components/adaptive";
|
||||
@import "components/captions-settings";
|
||||
@import "components/modal-dialog";
|
||||
|
||||
@import "print";
|
||||
|
||||
@@ -78,7 +78,7 @@ class ClickableComponent extends Component {
|
||||
el.appendChild(this.controlTextEl_);
|
||||
}
|
||||
|
||||
this.controlText(this.controlText_, el);
|
||||
this.controlText(this.controlText_);
|
||||
|
||||
return this.controlTextEl_;
|
||||
}
|
||||
@@ -86,19 +86,15 @@ class ClickableComponent extends Component {
|
||||
/**
|
||||
* Controls text - both request and localize
|
||||
*
|
||||
* @param {String} text Text for element
|
||||
* @param {Element=} el Element to set the title on
|
||||
* @param {String} text Text for element
|
||||
* @return {String}
|
||||
* @method controlText
|
||||
*/
|
||||
controlText(text, el=this.el()) {
|
||||
controlText(text) {
|
||||
if (!text) return this.controlText_ || 'Need Text';
|
||||
|
||||
const localizedText = this.localize(text);
|
||||
|
||||
this.controlText_ = text;
|
||||
this.controlTextEl_.innerHTML = localizedText;
|
||||
el.setAttribute('title', localizedText);
|
||||
this.controlTextEl_.innerHTML = this.localize(this.controlText_);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
@@ -48,6 +48,7 @@ class ControlBar extends Component {
|
||||
}
|
||||
|
||||
ControlBar.prototype.options_ = {
|
||||
loadEvent: 'play',
|
||||
children: [
|
||||
'playToggle',
|
||||
'volumeMenuButton',
|
||||
|
||||
@@ -75,11 +75,9 @@ class ChaptersButton extends TextTrackButton {
|
||||
createMenu() {
|
||||
let tracks = this.player_.textTracks() || [];
|
||||
let chaptersTrack;
|
||||
let items = this.items || [];
|
||||
let items = this.items = [];
|
||||
|
||||
for (let i = tracks.length - 1; i >= 0; i--) {
|
||||
|
||||
// We will always choose the last track as our chaptersTrack
|
||||
for (let i = 0, length = tracks.length; i < length; i++) {
|
||||
let track = tracks[i];
|
||||
|
||||
if (track['kind'] === this.kind_) {
|
||||
@@ -99,12 +97,6 @@ class ChaptersButton extends TextTrackButton {
|
||||
});
|
||||
menu.children_.unshift(title);
|
||||
Dom.insertElFirst(title, menu.contentEl());
|
||||
} else {
|
||||
// We will empty out the menu children each time because we want a
|
||||
// fresh new menu child list each time
|
||||
items.forEach(item => menu.removeChild(item));
|
||||
// Empty out the ChaptersButton menu items because we no longer need them
|
||||
items = [];
|
||||
}
|
||||
|
||||
if (chaptersTrack && chaptersTrack.cues == null) {
|
||||
@@ -132,15 +124,17 @@ class ChaptersButton extends TextTrackButton {
|
||||
|
||||
menu.addChild(mi);
|
||||
}
|
||||
|
||||
this.addChild(menu);
|
||||
}
|
||||
|
||||
if (items.length > 0) {
|
||||
if (this.items.length > 0) {
|
||||
this.show();
|
||||
}
|
||||
// Assigning the value of items back to this.items for next iteration
|
||||
this.items = items;
|
||||
|
||||
return menu;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ChaptersButton.prototype.kind_ = 'chapters';
|
||||
|
||||
@@ -18,7 +18,13 @@ class DurationDisplay extends Component {
|
||||
constructor(player, options){
|
||||
super(player, options);
|
||||
|
||||
this.on(player, 'durationchange', this.updateContent);
|
||||
// this might need to be changed to 'durationchange' instead of 'timeupdate' eventually,
|
||||
// however the durationchange event fires before this.player_.duration() is set,
|
||||
// so the value cannot be written out using this method.
|
||||
// Once the order of durationchange and this.player_.duration() being set is figured out,
|
||||
// this can be updated.
|
||||
this.on(player, 'timeupdate', this.updateContent);
|
||||
this.on(player, 'loadedmetadata', this.updateContent);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -19,7 +19,6 @@ class RemainingTimeDisplay extends Component {
|
||||
super(player, options);
|
||||
|
||||
this.on(player, 'timeupdate', this.updateContent);
|
||||
this.on(player, 'durationchange', this.updateContent);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -141,8 +141,8 @@ class MenuButton extends ClickableComponent {
|
||||
* @method handleClick
|
||||
*/
|
||||
handleClick() {
|
||||
this.one(this.menu.contentEl(), 'mouseleave', Fn.bind(this, function(e){
|
||||
this.unpressButton();
|
||||
this.one('mouseout', Fn.bind(this, function(){
|
||||
this.menu.unlockShowing();
|
||||
this.el_.blur();
|
||||
}));
|
||||
if (this.buttonPressed_){
|
||||
|
||||
@@ -255,7 +255,7 @@ class ModalDialog extends Component {
|
||||
// content element, so temporarily change the content element.
|
||||
let temp = this.contentEl_;
|
||||
this.contentEl_ = this.el_;
|
||||
close = this.addChild('closeButton', {controlText: 'Close Modal Dialog'});
|
||||
close = this.addChild('closeButton');
|
||||
this.contentEl_ = temp;
|
||||
this.on(close, 'close', this.close);
|
||||
}
|
||||
|
||||
+9
-66
@@ -92,25 +92,6 @@ class Player extends Component {
|
||||
// see enableTouchActivity in Component
|
||||
options.reportTouchActivity = false;
|
||||
|
||||
// If language is not set, get the closest lang attribute
|
||||
if (!options.language) {
|
||||
if (typeof tag.closest === 'function') {
|
||||
let closest = tag.closest('[lang]');
|
||||
if (closest) {
|
||||
options.language = closest.getAttribute('lang');
|
||||
}
|
||||
} else {
|
||||
let element = tag;
|
||||
while (element && element.nodeType === 1) {
|
||||
if (Dom.getElAttributes(element).hasOwnProperty('lang')) {
|
||||
options.language = element.getAttribute('lang');
|
||||
break;
|
||||
}
|
||||
element = element.parentNode;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Run base component initializing with new options
|
||||
super(null, options, ready);
|
||||
|
||||
@@ -643,7 +624,6 @@ class Player extends Component {
|
||||
this.on(this.tech_, 'texttrackchange', this.handleTechTextTrackChange_);
|
||||
this.on(this.tech_, 'loadedmetadata', this.updateStyleEl_);
|
||||
this.on(this.tech_, 'posterchange', this.handleTechPosterChange_);
|
||||
this.on(this.tech_, 'textdata', this.handleTechTextData_);
|
||||
|
||||
this.usingNativeControls(this.techGet_('controls'));
|
||||
|
||||
@@ -792,13 +772,8 @@ class Player extends Component {
|
||||
// In Safari (5.1.1), when we move the video element into the container div, autoplay doesn't work.
|
||||
// In Chrome (15), if you have autoplay + a poster + no controls, the video gets hidden (but audio plays)
|
||||
// This fixes both issues. Need to wait for API, so it updates displays correctly
|
||||
if ((this.src() || this.currentSrc()) && this.tag && this.options_.autoplay && this.paused()) {
|
||||
try {
|
||||
delete this.tag.poster; // Chrome Fix. Fixed in Chrome v16.
|
||||
}
|
||||
catch (e) {
|
||||
log('deleting tag.poster throws in some browsers', e);
|
||||
}
|
||||
if (this.src() && this.tag && this.options_.autoplay && this.paused()) {
|
||||
delete this.tag.poster; // Chrome Fix. Fixed in Chrome v16.
|
||||
this.play();
|
||||
}
|
||||
}
|
||||
@@ -1127,7 +1102,7 @@ class Player extends Component {
|
||||
*/
|
||||
handleTechError_() {
|
||||
let error = this.tech_.error();
|
||||
this.error(error);
|
||||
this.error(error && error.code);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1180,14 +1155,6 @@ class Player extends Component {
|
||||
this.trigger('loadedmetadata');
|
||||
}
|
||||
|
||||
handleTechTextData_() {
|
||||
var data = null;
|
||||
if (arguments.length > 1) {
|
||||
data = arguments[1];
|
||||
}
|
||||
this.trigger('textdata', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fires when the browser has loaded the current frame of the audio/video
|
||||
*
|
||||
@@ -1266,7 +1233,7 @@ class Player extends Component {
|
||||
// Otherwise call method now
|
||||
} else {
|
||||
try {
|
||||
this.tech_ && this.tech_[method](arg);
|
||||
this.tech_[method](arg);
|
||||
} catch(e) {
|
||||
log(e);
|
||||
throw e;
|
||||
@@ -1320,15 +1287,7 @@ class Player extends Component {
|
||||
* @method play
|
||||
*/
|
||||
play() {
|
||||
// Only calls the tech's play if we already have a src loaded
|
||||
if (this.src() || this.currentSrc()) {
|
||||
this.techCall_('play');
|
||||
} else {
|
||||
this.tech_.one('loadstart', function() {
|
||||
this.play();
|
||||
});
|
||||
}
|
||||
|
||||
this.techCall_('play');
|
||||
return this;
|
||||
}
|
||||
|
||||
@@ -1864,7 +1823,7 @@ class Player extends Component {
|
||||
let foundSourceAndTech;
|
||||
let flip = (fn) => (a, b) => fn(b, a);
|
||||
let finder = ([techName, tech], source) => {
|
||||
if (tech.canPlaySource(source, this.options_[techName.toLowerCase()])) {
|
||||
if (tech.canPlaySource(source)) {
|
||||
return {source: source, tech: techName};
|
||||
}
|
||||
};
|
||||
@@ -1939,7 +1898,7 @@ class Player extends Component {
|
||||
} else if (source instanceof Object) {
|
||||
// check if the source has a type and the loaded tech cannot play the source
|
||||
// if there's no type we'll just try the current tech
|
||||
if (source.type && !currentTech.canPlaySource(source, this.options_[this.techName_.toLowerCase()])) {
|
||||
if (source.type && !currentTech.canPlaySource(source)) {
|
||||
// create a source list with the current source and send through
|
||||
// the tech loop to check for a compatible technology
|
||||
this.sourceList_([source]);
|
||||
@@ -2270,9 +2229,7 @@ class Player extends Component {
|
||||
if (err === null) {
|
||||
this.error_ = err;
|
||||
this.removeClass('vjs-error');
|
||||
if (this.errorDisplay) {
|
||||
this.errorDisplay.close();
|
||||
}
|
||||
this.errorDisplay.close();
|
||||
return this;
|
||||
}
|
||||
|
||||
@@ -2883,7 +2840,7 @@ Player.prototype.options_ = {
|
||||
'textTrackSettings'
|
||||
],
|
||||
|
||||
language: navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language || 'en',
|
||||
language: document.getElementsByTagName('html')[0].getAttribute('lang') || navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language || 'en',
|
||||
|
||||
// locales and their language translations
|
||||
languages: {},
|
||||
@@ -2892,13 +2849,6 @@ Player.prototype.options_ = {
|
||||
notSupportedMessage: 'No compatible source was found for this media.'
|
||||
};
|
||||
|
||||
/**
|
||||
* Fired when the user agent begins looking for media data
|
||||
*
|
||||
* @event loadstart
|
||||
*/
|
||||
Player.prototype.handleTechLoadStart_;
|
||||
|
||||
/**
|
||||
* Fired when the player has initial duration and dimension information
|
||||
*
|
||||
@@ -2906,13 +2856,6 @@ Player.prototype.handleTechLoadStart_;
|
||||
*/
|
||||
Player.prototype.handleLoadedMetaData_;
|
||||
|
||||
/**
|
||||
* Fired when the player receives text data
|
||||
*
|
||||
* @event textdata
|
||||
*/
|
||||
Player.prototype.handleTextData_;
|
||||
|
||||
/**
|
||||
* Fired when the player has downloaded data at the current playback position
|
||||
*
|
||||
|
||||
@@ -75,10 +75,9 @@ function FlashRtmpDecorator(Flash) {
|
||||
/**
|
||||
* Check if Flash can handle the source natively
|
||||
* @param {Object} source The source object
|
||||
* @param {Object} options The options passed to the tech
|
||||
* @return {String} 'probably', 'maybe', or '' (empty string)
|
||||
*/
|
||||
Flash.rtmpSourceHandler.canHandleSource = function(source, options){
|
||||
Flash.rtmpSourceHandler.canHandleSource = function(source){
|
||||
let can = Flash.rtmpSourceHandler.canPlayType(source.type);
|
||||
|
||||
if (can) {
|
||||
|
||||
+3
-18
@@ -229,20 +229,6 @@ class Flash extends Tech {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get media duration
|
||||
*
|
||||
* @returns {Number} Media duration
|
||||
*/
|
||||
duration() {
|
||||
if (this.readyState() === 0) {
|
||||
return NaN;
|
||||
} else {
|
||||
let duration = this.el_.vjs_getProperty('duration');
|
||||
return duration >= 0 ? duration : Infinity;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load media into player
|
||||
*
|
||||
@@ -326,7 +312,7 @@ class Flash extends Tech {
|
||||
// Create setters and getters for attributes
|
||||
const _api = Flash.prototype;
|
||||
const _readWrite = 'rtmpConnection,rtmpStream,preload,defaultPlaybackRate,playbackRate,autoplay,loop,mediaGroup,controller,controls,volume,muted,defaultMuted'.split(',');
|
||||
const _readOnly = 'networkState,readyState,initialTime,startOffsetTime,paused,ended,videoWidth,videoHeight'.split(',');
|
||||
const _readOnly = 'networkState,readyState,initialTime,duration,startOffsetTime,paused,ended,videoWidth,videoHeight'.split(',');
|
||||
|
||||
function _createSetter(attr){
|
||||
var attrUpper = attr.charAt(0).toUpperCase() + attr.slice(1);
|
||||
@@ -383,10 +369,9 @@ Flash.nativeSourceHandler.canPlayType = function(type){
|
||||
* Check Flash can handle the source natively
|
||||
*
|
||||
* @param {Object} source The source object
|
||||
* @param {Object} options The options passed to the tech
|
||||
* @return {String} 'probably', 'maybe', or '' (empty string)
|
||||
*/
|
||||
Flash.nativeSourceHandler.canHandleSource = function(source, options){
|
||||
Flash.nativeSourceHandler.canHandleSource = function(source){
|
||||
var type;
|
||||
|
||||
function guessMimeType(src) {
|
||||
@@ -471,7 +456,7 @@ Flash.checkReady = function(tech){
|
||||
// Trigger events from the swf on the player
|
||||
Flash.onEvent = function(swfID, eventName){
|
||||
let tech = Dom.getEl(swfID).tech;
|
||||
tech.trigger(eventName, Array.prototype.slice.call(arguments, 2));
|
||||
tech.trigger(eventName);
|
||||
};
|
||||
|
||||
// Log errors from the swf
|
||||
|
||||
+10
-85
@@ -94,9 +94,6 @@ class Html5 extends Tech {
|
||||
tl.addEventListener('change', Fn.bind(this, this[`handle${capitalType}TrackChange_`]));
|
||||
tl.addEventListener('addtrack', Fn.bind(this, this[`handle${capitalType}TrackAdd_`]));
|
||||
tl.addEventListener('removetrack', Fn.bind(this, this[`handle${capitalType}TrackRemove_`]));
|
||||
|
||||
// Remove (native) trackts that are not used anymore
|
||||
this.on('loadstart', this[`removeOld${capitalType}Tracks_`]);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -116,8 +113,9 @@ class Html5 extends Tech {
|
||||
// Our goal should be to get the custom controls on mobile solid everywhere
|
||||
// so we can remove this all together. Right now this will block custom
|
||||
// controls on touch enabled laptops like the Chrome Pixel
|
||||
if ((browser.TOUCH_ENABLED || browser.IS_IPHONE ||
|
||||
browser.IS_NATIVE_ANDROID) && options.nativeControlsForTouch === true) {
|
||||
if (browser.TOUCH_ENABLED && options.nativeControlsForTouch === true ||
|
||||
browser.IS_IPHONE ||
|
||||
browser.IS_NATIVE_ANDROID) {
|
||||
this.setControls(true);
|
||||
}
|
||||
|
||||
@@ -140,11 +138,6 @@ class Html5 extends Tech {
|
||||
tl.removeEventListener('addtrack', this[`handle${capitalType}TrackAdd_`]);
|
||||
tl.removeEventListener('removetrack', this[`handle${capitalType}TrackRemove_`]);
|
||||
}
|
||||
|
||||
// Stop removing old text tracks
|
||||
if (tl) {
|
||||
this.off('loadstart', this[`removeOld${capitalType}Tracks_`]);
|
||||
}
|
||||
});
|
||||
|
||||
Html5.disposeMediaElement(this.el_);
|
||||
@@ -303,9 +296,6 @@ class Html5 extends Tech {
|
||||
tt.addEventListener('addtrack', this.handleTextTrackAdd_);
|
||||
tt.addEventListener('removetrack', this.handleTextTrackRemove_);
|
||||
}
|
||||
|
||||
// Remove (native) texttracks that are not used anymore
|
||||
this.on('loadstart', this.removeOldTextTracks_);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -363,60 +353,6 @@ class Html5 extends Tech {
|
||||
this.audioTracks().removeTrack_(e.track);
|
||||
}
|
||||
|
||||
/**
|
||||
* This is a helper function that is used in removeOldTextTracks_, removeOldAudioTracks_ and
|
||||
* removeOldVideoTracks_
|
||||
* @param {Track[]} techTracks Tracks for this tech
|
||||
* @param {Track[]} elTracks Tracks for the HTML5 video element
|
||||
* @private
|
||||
*/
|
||||
removeOldTracks_(techTracks, elTracks) {
|
||||
// This will loop over the techTracks and check if they are still used by the HTML5 video element
|
||||
// If not, they will be removed from the emulated list
|
||||
let removeTracks = [];
|
||||
if (!elTracks) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < techTracks.length; i++) {
|
||||
let techTrack = techTracks[i];
|
||||
|
||||
let found = false;
|
||||
for (let j = 0; j < elTracks.length; j++) {
|
||||
if (elTracks[j] === techTrack) {
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!found) {
|
||||
removeTracks.push(techTrack);
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < removeTracks.length; i++) {
|
||||
const track = removeTracks[i];
|
||||
techTracks.removeTrack_(track);
|
||||
}
|
||||
}
|
||||
|
||||
removeOldTextTracks_() {
|
||||
const techTracks = this.textTracks();
|
||||
const elTracks = this.el().textTracks;
|
||||
this.removeOldTracks_(techTracks, elTracks);
|
||||
}
|
||||
|
||||
removeOldAudioTracks_() {
|
||||
const techTracks = this.audioTracks();
|
||||
const elTracks = this.el().audioTracks;
|
||||
this.removeOldTracks_(techTracks, elTracks);
|
||||
}
|
||||
|
||||
removeOldVideoTracks_() {
|
||||
const techTracks = this.videoTracks();
|
||||
const elTracks = this.el().videoTracks;
|
||||
this.removeOldTracks_(techTracks, elTracks);
|
||||
}
|
||||
|
||||
/**
|
||||
* Play for html5 tech
|
||||
@@ -1008,10 +944,9 @@ Html5.nativeSourceHandler.canPlayType = function(type){
|
||||
* Check if the video element can handle the source natively
|
||||
*
|
||||
* @param {Object} source The source object
|
||||
* @param {Object} options The options passed to the tech
|
||||
* @return {String} 'probably', 'maybe', or '' (empty string)
|
||||
*/
|
||||
Html5.nativeSourceHandler.canHandleSource = function(source, options){
|
||||
Html5.nativeSourceHandler.canHandleSource = function(source){
|
||||
var match, ext;
|
||||
|
||||
// If a type was provided we should rely on that
|
||||
@@ -1057,14 +992,9 @@ Html5.registerSourceHandler(Html5.nativeSourceHandler);
|
||||
* @return {Boolean}
|
||||
*/
|
||||
Html5.canControlVolume = function(){
|
||||
// IE will error if Windows Media Player not installed #3315
|
||||
try {
|
||||
var volume = Html5.TEST_VID.volume;
|
||||
Html5.TEST_VID.volume = (volume / 2) + 0.1;
|
||||
return volume !== Html5.TEST_VID.volume;
|
||||
} catch(e) {
|
||||
return false;
|
||||
}
|
||||
var volume = Html5.TEST_VID.volume;
|
||||
Html5.TEST_VID.volume = (volume / 2) + 0.1;
|
||||
return volume !== Html5.TEST_VID.volume;
|
||||
};
|
||||
|
||||
/*
|
||||
@@ -1078,14 +1008,9 @@ Html5.canControlPlaybackRate = function(){
|
||||
if (browser.IS_ANDROID && browser.IS_CHROME) {
|
||||
return false;
|
||||
}
|
||||
// IE will error if Windows Media Player not installed #3315
|
||||
try {
|
||||
var playbackRate = Html5.TEST_VID.playbackRate;
|
||||
Html5.TEST_VID.playbackRate = (playbackRate / 2) + 0.1;
|
||||
return playbackRate !== Html5.TEST_VID.playbackRate;
|
||||
} catch(e) {
|
||||
return false;
|
||||
}
|
||||
var playbackRate = Html5.TEST_VID.playbackRate;
|
||||
Html5.TEST_VID.playbackRate = (playbackRate / 2) + 0.1;
|
||||
return playbackRate !== Html5.TEST_VID.playbackRate;
|
||||
};
|
||||
|
||||
/*
|
||||
|
||||
+7
-10
@@ -726,17 +726,16 @@ Tech.withSourceHandlers = function(_Tech){
|
||||
/*
|
||||
* Return the first source handler that supports the source
|
||||
* TODO: Answer question: should 'probably' be prioritized over 'maybe'
|
||||
* @param {Object} source The source object
|
||||
* @param {Object} options The options passed to the tech
|
||||
* @param {Object} source The source object
|
||||
* @returns {Object} The first source handler that supports the source
|
||||
* @returns {null} Null if no source handler is found
|
||||
*/
|
||||
_Tech.selectSourceHandler = function(source, options){
|
||||
_Tech.selectSourceHandler = function(source){
|
||||
let handlers = _Tech.sourceHandlers || [];
|
||||
let can;
|
||||
|
||||
for (let i = 0; i < handlers.length; i++) {
|
||||
can = handlers[i].canHandleSource(source, options);
|
||||
can = handlers[i].canHandleSource(source);
|
||||
|
||||
if (can) {
|
||||
return handlers[i];
|
||||
@@ -749,14 +748,13 @@ Tech.withSourceHandlers = function(_Tech){
|
||||
/*
|
||||
* Check if the tech can support the given source
|
||||
* @param {Object} srcObj The source object
|
||||
* @param {Object} options The options passed to the tech
|
||||
* @return {String} 'probably', 'maybe', or '' (empty string)
|
||||
*/
|
||||
_Tech.canPlaySource = function(srcObj, options){
|
||||
let sh = _Tech.selectSourceHandler(srcObj, options);
|
||||
_Tech.canPlaySource = function(srcObj){
|
||||
let sh = _Tech.selectSourceHandler(srcObj);
|
||||
|
||||
if (sh) {
|
||||
return sh.canHandleSource(srcObj, options);
|
||||
return sh.canHandleSource(srcObj);
|
||||
}
|
||||
|
||||
return '';
|
||||
@@ -794,7 +792,7 @@ Tech.withSourceHandlers = function(_Tech){
|
||||
* @return {Tech} self
|
||||
*/
|
||||
_Tech.prototype.setSource = function(source){
|
||||
let sh = _Tech.selectSourceHandler(source, this.options_);
|
||||
let sh = _Tech.selectSourceHandler(source);
|
||||
|
||||
if (!sh) {
|
||||
// Fall back to a native source hander when unsupported sources are
|
||||
@@ -857,7 +855,6 @@ Tech.withSourceHandlers = function(_Tech){
|
||||
this.off(this.el_, 'loadstart', _Tech.prototype.firstLoadStartListener_);
|
||||
this.off(this.el_, 'loadstart', _Tech.prototype.successiveLoadStartListener_);
|
||||
this.sourceHandler_.dispose();
|
||||
this.sourceHandler_ = null;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -67,18 +67,9 @@ class TextTrackSettings extends Component {
|
||||
* @method createEl
|
||||
*/
|
||||
createEl() {
|
||||
let uniqueId = this.id_;
|
||||
let dialogLabelId = 'TTsettingsDialogLabel-' + uniqueId;
|
||||
let dialogDescriptionId = 'TTsettingsDialogDescription-' + uniqueId;
|
||||
|
||||
return super.createEl('div', {
|
||||
className: 'vjs-caption-settings vjs-modal-overlay',
|
||||
innerHTML: captionOptionsMenuTemplate(uniqueId, dialogLabelId, dialogDescriptionId),
|
||||
tabIndex: -1
|
||||
}, {
|
||||
role: 'dialog',
|
||||
'aria-labelledby': dialogLabelId,
|
||||
'aria-describedby': dialogDescriptionId
|
||||
innerHTML: captionOptionsMenuTemplate()
|
||||
});
|
||||
}
|
||||
|
||||
@@ -250,19 +241,14 @@ function setSelectedOption(target, value) {
|
||||
target.selectedIndex = i;
|
||||
}
|
||||
|
||||
function captionOptionsMenuTemplate(uniqueId, dialogLabelId, dialogDescriptionId) {
|
||||
|
||||
let template = `
|
||||
<div role="document">
|
||||
<div role="heading" aria-level="1" id="${dialogLabelId}" class="vjs-control-text">Captions Settings Dialog</div>
|
||||
<div id="${dialogDescriptionId}" class="vjs-control-text">Beginning of dialog window. Escape will cancel and close the window.</div>
|
||||
<div class="vjs-tracksettings">
|
||||
<div class="vjs-tracksettings-colors">
|
||||
<fieldset class="vjs-fg-color vjs-tracksetting">
|
||||
<legend>Text</legend>
|
||||
<label class="vjs-label" for="captions-foreground-color-${uniqueId}">Color</label>
|
||||
<select id="captions-foreground-color-${uniqueId}">
|
||||
<option value="#FFF" selected>White</option>
|
||||
function captionOptionsMenuTemplate() {
|
||||
let template = `<div class="vjs-tracksettings">
|
||||
<div class="vjs-tracksettings-colors">
|
||||
<div class="vjs-fg-color vjs-tracksetting">
|
||||
<label class="vjs-label">Foreground</label>
|
||||
<select>
|
||||
<option value="">---</option>
|
||||
<option value="#FFF">White</option>
|
||||
<option value="#000">Black</option>
|
||||
<option value="#F00">Red</option>
|
||||
<option value="#0F0">Green</option>
|
||||
@@ -272,19 +258,19 @@ function captionOptionsMenuTemplate(uniqueId, dialogLabelId, dialogDescriptionId
|
||||
<option value="#0FF">Cyan</option>
|
||||
</select>
|
||||
<span class="vjs-text-opacity vjs-opacity">
|
||||
<label class="vjs-label" for="captions-foreground-opacity-${uniqueId}">Transparency</label>
|
||||
<select id="captions-foreground-opacity-${uniqueId}">
|
||||
<option value="1" selected>Opaque</option>
|
||||
<select>
|
||||
<option value="">---</option>
|
||||
<option value="1">Opaque</option>
|
||||
<option value="0.5">Semi-Opaque</option>
|
||||
</select>
|
||||
</span>
|
||||
</fieldset>
|
||||
<fieldset class="vjs-bg-color vjs-tracksetting">
|
||||
<legend>Background</legend>
|
||||
<label class="vjs-label" for="captions-background-color-${uniqueId}">Color</label>
|
||||
<select id="captions-background-color-${uniqueId}">
|
||||
<option value="#000" selected>Black</option>
|
||||
</div> <!-- vjs-fg-color -->
|
||||
<div class="vjs-bg-color vjs-tracksetting">
|
||||
<label class="vjs-label">Background</label>
|
||||
<select>
|
||||
<option value="">---</option>
|
||||
<option value="#FFF">White</option>
|
||||
<option value="#000">Black</option>
|
||||
<option value="#F00">Red</option>
|
||||
<option value="#0F0">Green</option>
|
||||
<option value="#00F">Blue</option>
|
||||
@@ -293,20 +279,20 @@ function captionOptionsMenuTemplate(uniqueId, dialogLabelId, dialogDescriptionId
|
||||
<option value="#0FF">Cyan</option>
|
||||
</select>
|
||||
<span class="vjs-bg-opacity vjs-opacity">
|
||||
<label class="vjs-label" for="captions-background-opacity-${uniqueId}">Transparency</label>
|
||||
<select id="captions-background-opacity-${uniqueId}">
|
||||
<option value="1" selected>Opaque</option>
|
||||
<option value="0.5">Semi-Transparent</option>
|
||||
<option value="0">Transparent</option>
|
||||
</select>
|
||||
<select>
|
||||
<option value="">---</option>
|
||||
<option value="1">Opaque</option>
|
||||
<option value="0.5">Semi-Transparent</option>
|
||||
<option value="0">Transparent</option>
|
||||
</select>
|
||||
</span>
|
||||
</fieldset>
|
||||
<fieldset class="window-color vjs-tracksetting">
|
||||
<legend>Window</legend>
|
||||
<label class="vjs-label" for="captions-window-color-${uniqueId}">Color</label>
|
||||
<select id="captions-window-color-${uniqueId}">
|
||||
<option value="#000" selected>Black</option>
|
||||
</div> <!-- vjs-bg-color -->
|
||||
<div class="window-color vjs-tracksetting">
|
||||
<label class="vjs-label">Window</label>
|
||||
<select>
|
||||
<option value="">---</option>
|
||||
<option value="#FFF">White</option>
|
||||
<option value="#000">Black</option>
|
||||
<option value="#F00">Red</option>
|
||||
<option value="#0F0">Green</option>
|
||||
<option value="#00F">Blue</option>
|
||||
@@ -315,59 +301,59 @@ function captionOptionsMenuTemplate(uniqueId, dialogLabelId, dialogDescriptionId
|
||||
<option value="#0FF">Cyan</option>
|
||||
</select>
|
||||
<span class="vjs-window-opacity vjs-opacity">
|
||||
<label class="vjs-label" for="captions-window-opacity-${uniqueId}">Transparency</label>
|
||||
<select id="captions-window-opacity-${uniqueId}">
|
||||
<option value="0" selected>Transparent</option>
|
||||
<option value="0.5">Semi-Transparent</option>
|
||||
<option value="1">Opaque</option>
|
||||
</select>
|
||||
<select>
|
||||
<option value="">---</option>
|
||||
<option value="1">Opaque</option>
|
||||
<option value="0.5">Semi-Transparent</option>
|
||||
<option value="0">Transparent</option>
|
||||
</select>
|
||||
</span>
|
||||
</fieldset>
|
||||
</div> <!-- vjs-tracksettings-colors -->
|
||||
<div class="vjs-tracksettings-font">
|
||||
<div class="vjs-font-percent vjs-tracksetting">
|
||||
<label class="vjs-label" for="captions-font-size-${uniqueId}">Font Size</label>
|
||||
<select id="captions-font-size-${uniqueId}">
|
||||
<option value="0.50">50%</option>
|
||||
<option value="0.75">75%</option>
|
||||
<option value="1.00" selected>100%</option>
|
||||
<option value="1.25">125%</option>
|
||||
<option value="1.50">150%</option>
|
||||
<option value="1.75">175%</option>
|
||||
<option value="2.00">200%</option>
|
||||
<option value="3.00">300%</option>
|
||||
<option value="4.00">400%</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="vjs-edge-style vjs-tracksetting">
|
||||
<label class="vjs-label" for="captions-edge-style-${uniqueId}">Text Edge Style</label>
|
||||
<select id="captions-edge-style-${uniqueId}">
|
||||
<option value="none" selected>None</option>
|
||||
<option value="raised">Raised</option>
|
||||
<option value="depressed">Depressed</option>
|
||||
<option value="uniform">Uniform</option>
|
||||
<option value="dropshadow">Dropshadow</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="vjs-font-family vjs-tracksetting">
|
||||
<label class="vjs-label" for="captions-font-family-${uniqueId}">Font Family</label>
|
||||
<select id="captions-font-family-${uniqueId}">
|
||||
<option value="proportionalSansSerif" selected>Proportional Sans-Serif</option>
|
||||
<option value="monospaceSansSerif">Monospace Sans-Serif</option>
|
||||
<option value="proportionalSerif">Proportional Serif</option>
|
||||
<option value="monospaceSerif">Monospace Serif</option>
|
||||
<option value="casual">Casual</option>
|
||||
<option value="script">Script</option>
|
||||
<option value="small-caps">Small Caps</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> <!-- vjs-tracksettings-font -->
|
||||
<div class="vjs-tracksettings-controls">
|
||||
<button class="vjs-default-button">Defaults</button>
|
||||
<button class="vjs-done-button">Done</button>
|
||||
</div>
|
||||
</div> <!-- vjs-window-color -->
|
||||
</div> <!-- vjs-tracksettings -->
|
||||
</div> <!-- role="document" -->`;
|
||||
<div class="vjs-tracksettings-font">
|
||||
<div class="vjs-font-percent vjs-tracksetting">
|
||||
<label class="vjs-label">Font Size</label>
|
||||
<select>
|
||||
<option value="0.50">50%</option>
|
||||
<option value="0.75">75%</option>
|
||||
<option value="1.00" selected>100%</option>
|
||||
<option value="1.25">125%</option>
|
||||
<option value="1.50">150%</option>
|
||||
<option value="1.75">175%</option>
|
||||
<option value="2.00">200%</option>
|
||||
<option value="3.00">300%</option>
|
||||
<option value="4.00">400%</option>
|
||||
</select>
|
||||
</div> <!-- vjs-font-percent -->
|
||||
<div class="vjs-edge-style vjs-tracksetting">
|
||||
<label class="vjs-label">Text Edge Style</label>
|
||||
<select>
|
||||
<option value="none">None</option>
|
||||
<option value="raised">Raised</option>
|
||||
<option value="depressed">Depressed</option>
|
||||
<option value="uniform">Uniform</option>
|
||||
<option value="dropshadow">Dropshadow</option>
|
||||
</select>
|
||||
</div> <!-- vjs-edge-style -->
|
||||
<div class="vjs-font-family vjs-tracksetting">
|
||||
<label class="vjs-label">Font Family</label>
|
||||
<select>
|
||||
<option value="">Default</option>
|
||||
<option value="monospaceSerif">Monospace Serif</option>
|
||||
<option value="proportionalSerif">Proportional Serif</option>
|
||||
<option value="monospaceSansSerif">Monospace Sans-Serif</option>
|
||||
<option value="proportionalSansSerif">Proportional Sans-Serif</option>
|
||||
<option value="casual">Casual</option>
|
||||
<option value="script">Script</option>
|
||||
<option value="small-caps">Small Caps</option>
|
||||
</select>
|
||||
</div> <!-- vjs-font-family -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="vjs-tracksettings-controls">
|
||||
<button class="vjs-default-button">Defaults</button>
|
||||
<button class="vjs-done-button">Done</button>
|
||||
</div>`;
|
||||
|
||||
return template;
|
||||
}
|
||||
|
||||
@@ -60,9 +60,6 @@ export const IS_FIREFOX = (/Firefox/i).test(USER_AGENT);
|
||||
export const IS_EDGE = (/Edge/i).test(USER_AGENT);
|
||||
export const IS_CHROME = !IS_EDGE && (/Chrome/i).test(USER_AGENT);
|
||||
export const IS_IE8 = (/MSIE\s8\.0/).test(USER_AGENT);
|
||||
export const IE_VERSION = (function(result){
|
||||
return result && parseFloat(result[1]);
|
||||
})((/MSIE\s(\d+)\.\d/).exec(USER_AGENT));
|
||||
|
||||
export const TOUCH_ENABLED = !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch);
|
||||
export const BACKGROUND_SIZE_SUPPORTED = 'backgroundSize' in document.createElement('video').style;
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import log from './log.js';
|
||||
|
||||
/**
|
||||
* Object containing the default behaviors for available handler methods.
|
||||
*
|
||||
* @private
|
||||
* @type {Object}
|
||||
*/
|
||||
const defaultBehaviors = {
|
||||
get(obj, key) {
|
||||
return obj[key];
|
||||
},
|
||||
set(obj, key, value) {
|
||||
obj[key] = value;
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Expose private objects publicly using a Proxy to log deprecation warnings.
|
||||
*
|
||||
* Browsers that do not support Proxy objects will simply return the `target`
|
||||
* object, so it can be directly exposed.
|
||||
*
|
||||
* @param {Object} target The target object.
|
||||
* @param {Object} messages Messages to display from a Proxy. Only operations
|
||||
* with an associated message will be proxied.
|
||||
* @param {String} [messages.get]
|
||||
* @param {String} [messages.set]
|
||||
* @return {Object} A Proxy if supported or the `target` argument.
|
||||
*/
|
||||
export default (target, messages={}) => {
|
||||
if (typeof Proxy === 'function') {
|
||||
let handler = {};
|
||||
|
||||
// Build a handler object based on those keys that have both messages
|
||||
// and default behaviors.
|
||||
Object.keys(messages).forEach(key => {
|
||||
if (defaultBehaviors.hasOwnProperty(key)) {
|
||||
handler[key] = function() {
|
||||
log.warn(messages[key]);
|
||||
return defaultBehaviors[key].apply(this, arguments);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
return new Proxy(target, handler);
|
||||
}
|
||||
return target;
|
||||
};
|
||||
+54
-72
@@ -2,96 +2,78 @@
|
||||
* @file log.js
|
||||
*/
|
||||
import window from 'global/window';
|
||||
import {IE_VERSION} from './browser';
|
||||
|
||||
/**
|
||||
* Log messages to the console and history based on the type of message
|
||||
*
|
||||
* @param {String} type
|
||||
* The name of the console method to use.
|
||||
* @param {Array} args
|
||||
* The arguments to be passed to the matching console method.
|
||||
* @param {Boolean} [stringify]
|
||||
* By default, only old IEs should get console argument stringification,
|
||||
* but this is exposed as a parameter to facilitate testing.
|
||||
*/
|
||||
export const logByType = (type, args, stringify = !!IE_VERSION && IE_VERSION < 11) => {
|
||||
const console = window.console;
|
||||
|
||||
// If there's no console then don't try to output messages, but they will
|
||||
// still be stored in `log.history`.
|
||||
//
|
||||
// Was setting these once outside of this function, but containing them
|
||||
// in the function makes it easier to test cases where console doesn't exist
|
||||
// when the module is executed.
|
||||
const fn = console && console[type] || function(){};
|
||||
|
||||
if (type !== 'log') {
|
||||
|
||||
// add the type to the front of the message when it's not "log"
|
||||
args.unshift(type.toUpperCase() + ':');
|
||||
}
|
||||
|
||||
// add to history
|
||||
log.history.push(args);
|
||||
|
||||
// add console prefix after adding to history
|
||||
args.unshift('VIDEOJS:');
|
||||
|
||||
// IEs previous to 11 log objects uselessly as "[object Object]"; so, JSONify
|
||||
// objects and arrays for those less-capable browsers.
|
||||
if (stringify) {
|
||||
args = args.map(a => {
|
||||
if (a && typeof a === 'object' || Array.isArray(a)) {
|
||||
try {
|
||||
return JSON.stringify(a);
|
||||
} catch (x) {}
|
||||
}
|
||||
|
||||
// Cast to string before joining, so we get null and undefined explicitly
|
||||
// included in output (as we would in a modern console).
|
||||
return String(a);
|
||||
}).join(' ');
|
||||
}
|
||||
|
||||
// Old IE versions do not allow .apply() for console methods (they are
|
||||
// reported as objects rather than functions).
|
||||
if (!fn.apply) {
|
||||
fn(args);
|
||||
} else {
|
||||
fn[Array.isArray(args) ? 'apply' : 'call'](console, args);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Log plain debug messages
|
||||
*
|
||||
* @function log
|
||||
*/
|
||||
function log(...args) {
|
||||
logByType('log', args);
|
||||
}
|
||||
const log = function(){
|
||||
_logType(null, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* Keep a history of log messages
|
||||
*
|
||||
* @type {Array}
|
||||
*/
|
||||
log.history = [];
|
||||
|
||||
/**
|
||||
* Log error messages
|
||||
*
|
||||
* @method error
|
||||
*/
|
||||
log.error = (...args) => logByType('error', args);
|
||||
log.error = function(){
|
||||
_logType('error', arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* Log warning messages
|
||||
*
|
||||
* @method warn
|
||||
*/
|
||||
log.warn = (...args) => logByType('warn', args);
|
||||
log.warn = function(){
|
||||
_logType('warn', arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* Log messages to the console and history based on the type of message
|
||||
*
|
||||
* @param {String} type The type of message, or `null` for `log`
|
||||
* @param {Object} args The args to be passed to the log
|
||||
* @private
|
||||
* @method _logType
|
||||
*/
|
||||
function _logType(type, args){
|
||||
// convert args to an array to get array functions
|
||||
let argsArray = Array.prototype.slice.call(args);
|
||||
// if there's no console then don't try to output messages
|
||||
// they will still be stored in log.history
|
||||
// Was setting these once outside of this function, but containing them
|
||||
// in the function makes it easier to test cases where console doesn't exist
|
||||
let noop = function(){};
|
||||
|
||||
let console = window['console'] || {
|
||||
'log': noop,
|
||||
'warn': noop,
|
||||
'error': noop
|
||||
};
|
||||
|
||||
if (type) {
|
||||
// add the type to the front of the message
|
||||
argsArray.unshift(type.toUpperCase()+':');
|
||||
} else {
|
||||
// default to log with no prefix
|
||||
type = 'log';
|
||||
}
|
||||
|
||||
// add to history
|
||||
log.history.push(argsArray);
|
||||
|
||||
// add console prefix after adding to history
|
||||
argsArray.unshift('VIDEOJS:');
|
||||
|
||||
// call appropriate log function
|
||||
if (console[type].apply) {
|
||||
console[type].apply(console, argsArray);
|
||||
} else {
|
||||
// ie8 doesn't allow error.apply, but it will just join() the array anyway
|
||||
console[type](argsArray.join(' '));
|
||||
}
|
||||
}
|
||||
|
||||
export default log;
|
||||
|
||||
+14
-6
@@ -16,6 +16,7 @@ import TextTrack from './tracks/text-track.js';
|
||||
import AudioTrack from './tracks/audio-track.js';
|
||||
import VideoTrack from './tracks/video-track.js';
|
||||
|
||||
import assign from 'object.assign';
|
||||
import { createTimeRanges } from './utils/time-ranges.js';
|
||||
import formatTime from './utils/format-time.js';
|
||||
import log from './utils/log.js';
|
||||
@@ -24,6 +25,7 @@ import * as browser from './utils/browser.js';
|
||||
import * as Url from './utils/url.js';
|
||||
import extendFn from './extend.js';
|
||||
import merge from 'lodash-compat/object/merge';
|
||||
import createDeprecationProxy from './utils/create-deprecation-proxy.js';
|
||||
import xhr from 'xhr';
|
||||
|
||||
// Include the built-in techs
|
||||
@@ -53,7 +55,7 @@ if (typeof HTMLVideoElement === 'undefined') {
|
||||
* @mixes videojs
|
||||
* @method videojs
|
||||
*/
|
||||
function videojs(id, options, ready){
|
||||
let videojs = function(id, options, ready){
|
||||
let tag; // Element of ID
|
||||
|
||||
// Allow for element or ID to be passed in
|
||||
@@ -97,7 +99,7 @@ function videojs(id, options, ready){
|
||||
// Element may have a player attr referring to an already created player instance.
|
||||
// If not, set up a new player and return the instance.
|
||||
return tag['player'] || Player.players[tag.playerId] || new Player(tag, options, ready);
|
||||
}
|
||||
};
|
||||
|
||||
// Add default styles
|
||||
if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true) {
|
||||
@@ -151,15 +153,21 @@ videojs.options = Player.prototype.options_;
|
||||
* @mixes videojs
|
||||
* @method getPlayers
|
||||
*/
|
||||
videojs.getPlayers = () => Player.players;
|
||||
videojs.getPlayers = function() {
|
||||
return Player.players;
|
||||
};
|
||||
|
||||
/**
|
||||
* Expose players object.
|
||||
* For backward compatibility, expose players object.
|
||||
*
|
||||
* @deprecated
|
||||
* @memberOf videojs
|
||||
* @property {Object} players
|
||||
* @property {Object|Proxy} players
|
||||
*/
|
||||
videojs.players = Player.players;
|
||||
videojs.players = createDeprecationProxy(Player.players, {
|
||||
get: 'Access to videojs.players is deprecated; use videojs.getPlayers instead',
|
||||
set: 'Modification of videojs.players is deprecated'
|
||||
});
|
||||
|
||||
/**
|
||||
* Get a component class object by name
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import 'es6-shim';
|
||||
import document from 'global/document';
|
||||
import window from 'global/window';
|
||||
import sinon from 'sinon';
|
||||
|
||||
@@ -4,7 +4,7 @@ import TestHelpers from './test-helpers.js';
|
||||
q.module('Button');
|
||||
|
||||
test('should localize its text', function(){
|
||||
expect(3);
|
||||
expect(2);
|
||||
|
||||
var player, testButton, el;
|
||||
|
||||
@@ -22,6 +22,5 @@ test('should localize its text', function(){
|
||||
el = testButton.createEl();
|
||||
|
||||
ok(el.nodeName.toLowerCase().match('button'));
|
||||
ok(el.innerHTML.match(/vjs-control-text"?>Juego/));
|
||||
equal(el.getAttribute('title'), 'Juego');
|
||||
ok(el.innerHTML.match('Juego'));
|
||||
});
|
||||
|
||||
@@ -247,7 +247,7 @@ test('should hide the poster when play is called', function() {
|
||||
});
|
||||
|
||||
equal(player.hasStarted(), false, 'the show poster flag is true before play');
|
||||
player.tech_.trigger('play');
|
||||
player.play();
|
||||
equal(player.hasStarted(), true, 'the show poster flag is false after play');
|
||||
|
||||
player.tech_.trigger('loadstart');
|
||||
@@ -255,7 +255,7 @@ test('should hide the poster when play is called', function() {
|
||||
false,
|
||||
'the resource selection algorithm sets the show poster flag to true');
|
||||
|
||||
player.tech_.trigger('play');
|
||||
player.play();
|
||||
equal(player.hasStarted(), true, 'the show poster flag is false after play');
|
||||
});
|
||||
|
||||
@@ -839,24 +839,6 @@ expect(3);
|
||||
strictEqual(player.localize('Good'), 'Brilliant', 'Ignored case');
|
||||
});
|
||||
|
||||
test('inherits language from parent element', function() {
|
||||
var fixture = document.getElementById('qunit-fixture');
|
||||
var oldLang = fixture.getAttribute('lang');
|
||||
var player;
|
||||
|
||||
fixture.setAttribute('lang', 'x-test');
|
||||
player = TestHelpers.makePlayer();
|
||||
|
||||
equal(player.language(), 'x-test', 'player inherits parent element language');
|
||||
|
||||
player.dispose();
|
||||
if (oldLang) {
|
||||
fixture.setAttribute('lang', oldLang);
|
||||
} else {
|
||||
fixture.removeAttribute('lang');
|
||||
}
|
||||
});
|
||||
|
||||
test('should return correct values for canPlayType', function(){
|
||||
var player = TestHelpers.makePlayer();
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import {IE_VERSION} from '../../src/js/utils/browser';
|
||||
import registerPlugin from '../../src/js/plugins.js';
|
||||
import Player from '../../src/js/player.js';
|
||||
import TestHelpers from './test-helpers.js';
|
||||
@@ -170,18 +169,14 @@ test('Plugins should not get events after stopImmediatePropagation is called', f
|
||||
});
|
||||
|
||||
test('Plugin that does not exist logs an error', function() {
|
||||
|
||||
// stub the global log functions
|
||||
var console, log, error, origConsole;
|
||||
|
||||
origConsole = window.console;
|
||||
|
||||
console = window.console = {
|
||||
origConsole = window['console'];
|
||||
console = window['console'] = {
|
||||
log: function(){},
|
||||
warn: function(){},
|
||||
error: function(){}
|
||||
};
|
||||
|
||||
log = sinon.stub(console, 'log');
|
||||
error = sinon.stub(console, 'error');
|
||||
|
||||
@@ -195,16 +190,11 @@ test('Plugin that does not exist logs an error', function() {
|
||||
});
|
||||
|
||||
ok(error.called, 'error was called');
|
||||
|
||||
if (IE_VERSION && IE_VERSION < 11) {
|
||||
equal(error.firstCall.args[0], 'VIDEOJS: ERROR: Unable to find plugin: nonExistingPlugin');
|
||||
} else {
|
||||
equal(error.firstCall.args[2], 'Unable to find plugin:');
|
||||
equal(error.firstCall.args[3], 'nonExistingPlugin');
|
||||
}
|
||||
equal(error.firstCall.args[2], 'Unable to find plugin:');
|
||||
equal(error.firstCall.args[3], 'nonExistingPlugin');
|
||||
|
||||
// tear down logging stubs
|
||||
log.restore();
|
||||
error.restore();
|
||||
window.console = origConsole;
|
||||
window['console'] = origConsole;
|
||||
});
|
||||
|
||||
@@ -8,16 +8,16 @@ test('Flash.canPlaySource', function() {
|
||||
var canPlaySource = Flash.canPlaySource;
|
||||
|
||||
// Supported
|
||||
ok(canPlaySource({ type: 'video/mp4; codecs=avc1.42E01E,mp4a.40.2' }, {}), 'codecs supported');
|
||||
ok(canPlaySource({ type: 'video/mp4' }, {}), 'video/mp4 supported');
|
||||
ok(canPlaySource({ type: 'video/x-flv' }, {}), 'video/x-flv supported');
|
||||
ok(canPlaySource({ type: 'video/flv' }, {}), 'video/flv supported');
|
||||
ok(canPlaySource({ type: 'video/m4v' }, {}), 'video/m4v supported');
|
||||
ok(canPlaySource({ type: 'VIDEO/FLV' }, {}), 'capitalized mime type');
|
||||
ok(canPlaySource({ type: 'video/mp4; codecs=avc1.42E01E,mp4a.40.2' }), 'codecs supported');
|
||||
ok(canPlaySource({ type: 'video/mp4' }), 'video/mp4 supported');
|
||||
ok(canPlaySource({ type: 'video/x-flv' }), 'video/x-flv supported');
|
||||
ok(canPlaySource({ type: 'video/flv' }), 'video/flv supported');
|
||||
ok(canPlaySource({ type: 'video/m4v' }), 'video/m4v supported');
|
||||
ok(canPlaySource({ type: 'VIDEO/FLV' }), 'capitalized mime type');
|
||||
|
||||
// Not supported
|
||||
ok(!canPlaySource({ type: 'video/webm; codecs="vp8, vorbis"' }, {}));
|
||||
ok(!canPlaySource({ type: 'video/webm' }, {}));
|
||||
ok(!canPlaySource({ type: 'video/webm; codecs="vp8, vorbis"' }));
|
||||
ok(!canPlaySource({ type: 'video/webm' }));
|
||||
});
|
||||
|
||||
test('currentTime', function() {
|
||||
@@ -147,10 +147,10 @@ test('canPlayType should select the correct types to play', function () {
|
||||
test('canHandleSource should be able to work with src objects without a type', function () {
|
||||
let canHandleSource = Flash.nativeSourceHandler.canHandleSource;
|
||||
|
||||
equal('maybe', canHandleSource({ src: 'test.video.mp4' }, {}), 'should guess that it is a mp4 video');
|
||||
equal('maybe', canHandleSource({ src: 'test.video.m4v' }, {}), 'should guess that it is a m4v video');
|
||||
equal('maybe', canHandleSource({ src: 'test.video.flv' }, {}), 'should guess that it is a flash video');
|
||||
equal('', canHandleSource({ src: 'test.video.wgg' }, {}), 'should return empty string if it can not play the video');
|
||||
equal('maybe', canHandleSource({ src: 'test.video.mp4' }), 'should guess that it is a mp4 video');
|
||||
equal('maybe', canHandleSource({ src: 'test.video.m4v' }), 'should guess that it is a m4v video');
|
||||
equal('maybe', canHandleSource({ src: 'test.video.flv' }), 'should guess that it is a flash video');
|
||||
equal('', canHandleSource({ src: 'test.video.wgg' }), 'should return empty string if it can not play the video');
|
||||
});
|
||||
|
||||
test('seekable', function() {
|
||||
@@ -197,33 +197,6 @@ test('play after ended seeks to the beginning', function() {
|
||||
equal(seeks[0], 0, 'seeked to the beginning');
|
||||
});
|
||||
|
||||
test('duration returns NaN, Infinity or duration according to the HTML standard', function() {
|
||||
let duration = Flash.prototype.duration;
|
||||
let mockedDuration = -1;
|
||||
let mockedReadyState = 0;
|
||||
let result;
|
||||
let mockFlash = {
|
||||
el_: {
|
||||
vjs_getProperty() {
|
||||
return mockedDuration;
|
||||
}
|
||||
},
|
||||
readyState: function() {
|
||||
return mockedReadyState;
|
||||
}
|
||||
};
|
||||
result = duration.call(mockFlash);
|
||||
ok(Number.isNaN(result), 'duration returns NaN when readyState equals 0');
|
||||
|
||||
mockedReadyState = 1;
|
||||
result = duration.call(mockFlash);
|
||||
ok(!Number.isFinite(result), 'duration returns Infinity when duration property is less then 0');
|
||||
|
||||
mockedDuration = 1;
|
||||
result = duration.call(mockFlash);
|
||||
equal(result, 1, 'duration returns duration property when readeyState and duration property are both higher than 0');
|
||||
});
|
||||
|
||||
// fake out the <object> interaction but leave all the other logic intact
|
||||
class MockFlash extends Flash {
|
||||
constructor() {
|
||||
|
||||
@@ -190,16 +190,16 @@ test('native source handler canHandleSource', function(){
|
||||
|
||||
var canHandleSource = Html5.nativeSourceHandler.canHandleSource;
|
||||
|
||||
equal(canHandleSource({ type: 'video/mp4', src: 'video.flv' }, {}), 'maybe', 'Native source handler reported type support');
|
||||
equal(canHandleSource({ src: 'http://www.example.com/video.mp4' }, {}), 'maybe', 'Native source handler reported extension support');
|
||||
equal(canHandleSource({ src: 'https://example.com/video.sd.mp4?s=foo&token=bar' }, {}), 'maybe', 'Native source handler reported extension support');
|
||||
equal(canHandleSource({ src: 'https://example.com/video.sd.mp4?s=foo' }, {}), 'maybe', 'Native source handler reported extension support');
|
||||
equal(canHandleSource({ type: 'video/mp4', src: 'video.flv' }), 'maybe', 'Native source handler reported type support');
|
||||
equal(canHandleSource({ src: 'http://www.example.com/video.mp4' }), 'maybe', 'Native source handler reported extension support');
|
||||
equal(canHandleSource({ src: 'https://example.com/video.sd.mp4?s=foo&token=bar' }), 'maybe', 'Native source handler reported extension support');
|
||||
equal(canHandleSource({ src: 'https://example.com/video.sd.mp4?s=foo' }), 'maybe', 'Native source handler reported extension support');
|
||||
|
||||
// Test for issue videojs/video.js#1785 and other potential failures
|
||||
equal(canHandleSource({ src: '' }, {}), '', 'Native source handler handled empty src');
|
||||
equal(canHandleSource({}, {}), '', 'Native source handler handled empty object');
|
||||
equal(canHandleSource({ src: 'foo' }, {}), '', 'Native source handler handled bad src');
|
||||
equal(canHandleSource({ type: 'foo' }, {}), '', 'Native source handler handled bad type');
|
||||
equal(canHandleSource({ src: '' }), '', 'Native source handler handled empty src');
|
||||
equal(canHandleSource({}), '', 'Native source handler handled empty object');
|
||||
equal(canHandleSource({ src: 'foo' }), '', 'Native source handler handled bad src');
|
||||
equal(canHandleSource({ type: 'foo' }), '', 'Native source handler handled bad type');
|
||||
|
||||
// Reset test video canPlayType
|
||||
Html5.TEST_VID.canPlayType = origCPT;
|
||||
|
||||
@@ -185,8 +185,7 @@ test('should add the source handler interface to a tech', function(){
|
||||
}
|
||||
return '';
|
||||
},
|
||||
canHandleSource: function(source, options){
|
||||
strictEqual(tech.options_, options, 'the tech options were passed to the source handler canHandleSource');
|
||||
canHandleSource: function(source){
|
||||
if (source.type !=='no-support') {
|
||||
return 'probably';
|
||||
}
|
||||
@@ -195,7 +194,7 @@ test('should add the source handler interface to a tech', function(){
|
||||
handleSource: function(s, t, o){
|
||||
strictEqual(tech, t, 'the tech instance was passed to the source handler');
|
||||
strictEqual(sourceA, s, 'the tech instance was passed to the source handler');
|
||||
strictEqual(tech.options_, o, 'the tech options were passed to the source handler handleSource');
|
||||
strictEqual(tech.options_, o, 'the tech options were passed to the source handler');
|
||||
return new handlerInternalState();
|
||||
}
|
||||
};
|
||||
@@ -204,7 +203,7 @@ test('should add the source handler interface to a tech', function(){
|
||||
canPlayType: function(type){
|
||||
return ''; // no support
|
||||
},
|
||||
canHandleSource: function(source, options){
|
||||
canHandleSource: function(source){
|
||||
return ''; // no support
|
||||
},
|
||||
handleSource: function(source, tech, options){
|
||||
@@ -219,16 +218,16 @@ test('should add the source handler interface to a tech', function(){
|
||||
strictEqual(MyTech.sourceHandlers[0], handlerTwo, 'handlerTwo was registered at the correct index (0)');
|
||||
|
||||
// Test handler selection
|
||||
strictEqual(MyTech.selectSourceHandler(sourceA, tech.options_), handlerOne, 'handlerOne was selected to handle the valid source');
|
||||
strictEqual(MyTech.selectSourceHandler(sourceB, tech.options_), null, 'no handler was selected to handle the invalid source');
|
||||
strictEqual(MyTech.selectSourceHandler(sourceA), handlerOne, 'handlerOne was selected to handle the valid source');
|
||||
strictEqual(MyTech.selectSourceHandler(sourceB), null, 'no handler was selected to handle the invalid source');
|
||||
|
||||
// Test canPlayType return values
|
||||
strictEqual(MyTech.canPlayType(sourceA.type), 'probably', 'the Tech returned probably for the valid source');
|
||||
strictEqual(MyTech.canPlayType(sourceB.type), '', 'the Tech returned an empty string for the invalid source');
|
||||
|
||||
// Test canPlaySource return values
|
||||
strictEqual(MyTech.canPlaySource(sourceA, tech.options_), 'probably', 'the Tech returned probably for the valid source');
|
||||
strictEqual(MyTech.canPlaySource(sourceB, tech.options_), '', 'the Tech returned an empty string for the invalid source');
|
||||
strictEqual(MyTech.canPlaySource(sourceA), 'probably', 'the Tech returned probably for the valid source');
|
||||
strictEqual(MyTech.canPlaySource(sourceB), '', 'the Tech returned an empty string for the invalid source');
|
||||
|
||||
tech.addRemoteTextTrack({});
|
||||
tech.addRemoteTextTrack({});
|
||||
@@ -382,7 +381,7 @@ test('Tech#setSource clears currentSource_ after repeated loadstart', function()
|
||||
canPlayType: function(type) {
|
||||
return true;
|
||||
},
|
||||
canHandleSource: function(source, options) {
|
||||
canHandleSource: function(source) {
|
||||
return true;
|
||||
},
|
||||
handleSource: function(source, tech, options) {
|
||||
@@ -414,82 +413,3 @@ test('Tech#setSource clears currentSource_ after repeated loadstart', function()
|
||||
equal(tech.currentSource_, null, 'Current source is still null');
|
||||
|
||||
});
|
||||
|
||||
test('setSource after tech dispose should dispose source handler once', function(){
|
||||
let MyTech = extendFn(Tech);
|
||||
Tech.withSourceHandlers(MyTech);
|
||||
|
||||
let disposeCount = 0;
|
||||
let handler = {
|
||||
dispose() {
|
||||
disposeCount++;
|
||||
}
|
||||
};
|
||||
|
||||
MyTech.registerSourceHandler({
|
||||
canPlayType: function() {
|
||||
return true;
|
||||
},
|
||||
canHandleSource: function() {
|
||||
return true;
|
||||
},
|
||||
handleSource: function(source, tech, options) {
|
||||
return handler;
|
||||
}
|
||||
});
|
||||
|
||||
let tech = new MyTech();
|
||||
tech.setSource('test');
|
||||
|
||||
equal(disposeCount, 0, 'did not call sourceHandler_ dispose for initial dispose');
|
||||
tech.dispose();
|
||||
ok(!tech.sourceHandler_, 'sourceHandler should be unset');
|
||||
equal(disposeCount, 1, 'called the source handler dispose');
|
||||
|
||||
// this would normally be done above tech on src after dispose
|
||||
tech.el_ = tech.createEl();
|
||||
|
||||
tech.setSource('test');
|
||||
equal(disposeCount, 1, 'did not dispose after initial setSource');
|
||||
|
||||
tech.setSource('test');
|
||||
equal(disposeCount, 2, 'did dispose on second setSource');
|
||||
|
||||
});
|
||||
|
||||
test('setSource after previous setSource should dispose source handler once', function(){
|
||||
let MyTech = extendFn(Tech);
|
||||
Tech.withSourceHandlers(MyTech);
|
||||
|
||||
let disposeCount = 0;
|
||||
let handler = {
|
||||
dispose() {
|
||||
disposeCount++;
|
||||
}
|
||||
};
|
||||
|
||||
MyTech.registerSourceHandler({
|
||||
canPlayType: function() {
|
||||
return true;
|
||||
},
|
||||
canHandleSource: function() {
|
||||
return true;
|
||||
},
|
||||
handleSource: function(source, tech, options) {
|
||||
return handler;
|
||||
}
|
||||
});
|
||||
|
||||
let tech = new MyTech();
|
||||
|
||||
tech.setSource('test');
|
||||
equal(disposeCount, 0, 'did not call dispose for initial setSource');
|
||||
|
||||
tech.setSource('test');
|
||||
equal(disposeCount, 1, 'did dispose for second setSource');
|
||||
|
||||
tech.setSource('test');
|
||||
equal(disposeCount, 2, 'did dispose for third setSource');
|
||||
|
||||
});
|
||||
|
||||
|
||||
@@ -9,16 +9,6 @@ const tracks = [{
|
||||
label: 'test'
|
||||
}];
|
||||
|
||||
const defaultSettings = {
|
||||
backgroundColor: '#000',
|
||||
backgroundOpacity: '1',
|
||||
color: '#FFF',
|
||||
fontFamily: 'proportionalSansSerif',
|
||||
textOpacity: '1',
|
||||
windowColor: '#000',
|
||||
windowOpacity: '0'
|
||||
};
|
||||
|
||||
q.module('Text Track Settings', {
|
||||
beforeEach() {
|
||||
window.localStorage.clear();
|
||||
@@ -30,13 +20,13 @@ test('should update settings', function() {
|
||||
tracks,
|
||||
persistTextTrackSettings: true
|
||||
});
|
||||
const newSettings = {
|
||||
backgroundOpacity: '0.5',
|
||||
textOpacity: '0.5',
|
||||
windowOpacity: '0.5',
|
||||
let newSettings = {
|
||||
backgroundOpacity: '1',
|
||||
textOpacity: '1',
|
||||
windowOpacity: '1',
|
||||
edgeStyle: 'raised',
|
||||
fontFamily: 'monospaceSerif',
|
||||
color: '#F00',
|
||||
color: '#FFF',
|
||||
backgroundColor: '#FFF',
|
||||
windowColor: '#FFF',
|
||||
fontPercent: 1.25
|
||||
@@ -45,14 +35,14 @@ test('should update settings', function() {
|
||||
player.textTrackSettings.setValues(newSettings);
|
||||
deepEqual(player.textTrackSettings.getValues(), newSettings, 'values are updated');
|
||||
|
||||
equal(player.$('.vjs-fg-color > select').selectedIndex, 2, 'fg-color is set to new value');
|
||||
equal(player.$('.vjs-fg-color > select').selectedIndex, 1, 'fg-color is set to new value');
|
||||
equal(player.$('.vjs-bg-color > select').selectedIndex, 1, 'bg-color is set to new value');
|
||||
equal(player.$('.window-color > select').selectedIndex, 1, 'window-color is set to new value');
|
||||
equal(player.$('.vjs-text-opacity > select').selectedIndex, 1, 'text-opacity is set to new value');
|
||||
equal(player.$('.vjs-bg-opacity > select').selectedIndex, 1, 'bg-opacity is set to new value');
|
||||
equal(player.$('.vjs-window-opacity > select').selectedIndex, 1, 'window-opacity is set to new value');
|
||||
equal(player.$('.vjs-edge-style select').selectedIndex, 1, 'edge-style is set to new value');
|
||||
equal(player.$('.vjs-font-family select').selectedIndex, 3, 'font-family is set to new value');
|
||||
equal(player.$('.vjs-font-family select').selectedIndex, 1, 'font-family is set to new value');
|
||||
equal(player.$('.vjs-font-percent select').selectedIndex, 3, 'font-percent is set to new value');
|
||||
|
||||
Events.trigger(player.$('.vjs-done-button'), 'click');
|
||||
@@ -81,9 +71,8 @@ test('should restore default settings', function() {
|
||||
Events.trigger(player.$('.vjs-default-button'), 'click');
|
||||
Events.trigger(player.$('.vjs-done-button'), 'click');
|
||||
|
||||
deepEqual(player.textTrackSettings.getValues(), defaultSettings, 'values are defaulted');
|
||||
// MikeA: need to figure out how to modify saveSettings to factor in defaults are no longer null
|
||||
// deepEqual(window.localStorage.getItem('vjs-text-track-settings'), defaultSettings, 'values are saved');
|
||||
deepEqual(player.textTrackSettings.getValues(), {}, 'values are defaulted');
|
||||
deepEqual(window.localStorage.getItem('vjs-text-track-settings'), null, 'values are saved');
|
||||
|
||||
equal(player.$('.vjs-fg-color > select').selectedIndex, 0, 'fg-color is set to default value');
|
||||
equal(player.$('.vjs-bg-color > select').selectedIndex, 0, 'bg-color is set to default value');
|
||||
@@ -197,13 +186,13 @@ test('do not try to restore or save settings if persist option is not set', func
|
||||
|
||||
test('should restore saved settings', function() {
|
||||
let player;
|
||||
const newSettings = {
|
||||
backgroundOpacity: '0.5',
|
||||
textOpacity: '0.5',
|
||||
windowOpacity: '0.5',
|
||||
let newSettings = {
|
||||
backgroundOpacity: '1',
|
||||
textOpacity: '1',
|
||||
windowOpacity: '1',
|
||||
edgeStyle: 'raised',
|
||||
fontFamily: 'monospaceSerif',
|
||||
color: '#F00',
|
||||
color: '#FFF',
|
||||
backgroundColor: '#FFF',
|
||||
windowColor: '#FFF',
|
||||
fontPercent: 1.25
|
||||
@@ -223,13 +212,13 @@ test('should restore saved settings', function() {
|
||||
|
||||
test('should not restore saved settings', function() {
|
||||
let player;
|
||||
const newSettings = {
|
||||
backgroundOpacity: '0.5',
|
||||
textOpacity: '0.5',
|
||||
windowOpacity: '0.5',
|
||||
let newSettings = {
|
||||
backgroundOpacity: '1',
|
||||
textOpacity: '1',
|
||||
windowOpacity: '1',
|
||||
edgeStyle: 'raised',
|
||||
fontFamily: 'monospaceSerif',
|
||||
color: '#F00',
|
||||
color: '#FFF',
|
||||
backgroundColor: '#FFF',
|
||||
windowColor: '#FFF',
|
||||
fontPercent: 1.25
|
||||
@@ -242,7 +231,7 @@ test('should not restore saved settings', function() {
|
||||
persistTextTrackSettings: false
|
||||
});
|
||||
|
||||
deepEqual(player.textTrackSettings.getValues(), defaultSettings);
|
||||
deepEqual(player.textTrackSettings.getValues(), {});
|
||||
|
||||
player.dispose();
|
||||
});
|
||||
|
||||
@@ -339,20 +339,20 @@ test('tracks are parsed once vttjs is loaded', function() {
|
||||
|
||||
test('stops processing if vttjs loading errored out', function() {
|
||||
const clock = sinon.useFakeTimers();
|
||||
const errorSpy = sinon.spy();
|
||||
const oldVTT = window.WebVTT;
|
||||
let parserCreated = false;
|
||||
window.WebVTT = true;
|
||||
|
||||
// use proxyquire to stub xhr module because IE8s XDomainRequest usage
|
||||
let xhrHandler;
|
||||
let errorMsg;
|
||||
let TextTrack = proxyquire('../../../src/js/tracks/text-track.js', {
|
||||
xhr(options, fn) {
|
||||
xhrHandler = fn;
|
||||
},
|
||||
'../utils/log.js': {
|
||||
'default': {
|
||||
error: errorSpy
|
||||
error(msg) {
|
||||
errorMsg = msg;
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -376,11 +376,8 @@ test('stops processing if vttjs loading errored out', function() {
|
||||
testTech.trigger('vttjserror');
|
||||
let offSpyCall = testTech.off.getCall(0);
|
||||
|
||||
ok(errorSpy.called, 'vttjs failed to load, so log.error was called');
|
||||
if (errorSpy.called) {
|
||||
ok(/^vttjs failed to load, stopping trying to process/.test(errorSpy.getCall(0).args[0]),
|
||||
'log.error was called with the expected message');
|
||||
}
|
||||
ok(/^vttjs failed to load, stopping trying to process/.test(errorMsg),
|
||||
'vttjs failed to load, so, we logged an error');
|
||||
ok(!parserCreated, 'WebVTT is not loaded, do not try to parse yet');
|
||||
ok(offSpyCall, 'tech.off was called');
|
||||
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
import createDeprecationProxy from '../../../src/js/utils/create-deprecation-proxy.js';
|
||||
import log from '../../../src/js/utils/log.js';
|
||||
|
||||
const proxySupported = typeof Proxy === 'function';
|
||||
|
||||
test('should return a Proxy object when supported or the target object by reference', function() {
|
||||
let target = {foo: 1};
|
||||
let subject = createDeprecationProxy(target, {
|
||||
get: 'get message',
|
||||
set: 'set message'
|
||||
});
|
||||
|
||||
// Testing for a Proxy is really difficult because Proxy objects by their
|
||||
// nature disguise the fact that they are in fact Proxy objects. So, this
|
||||
// tests that the log.warn method gets called on property get/set operations
|
||||
// to detect the Proxy.
|
||||
if (proxySupported) {
|
||||
sinon.stub(log, 'warn');
|
||||
|
||||
subject.foo; // Triggers a "get"
|
||||
subject.foo = 2; // Triggers a "set"
|
||||
|
||||
equal(log.warn.callCount, 2, 'proxied operations cause deprecation warnings');
|
||||
ok(log.warn.calledWith('get message'), 'proxied get logs expected message');
|
||||
ok(log.warn.calledWith('set message'), 'proxied set logs expected message');
|
||||
|
||||
log.warn.restore();
|
||||
} else {
|
||||
strictEqual(target, subject, 'identical to target');
|
||||
}
|
||||
});
|
||||
|
||||
// Tests run only in Proxy-supporting environments.
|
||||
if (proxySupported) {
|
||||
test('no deprecation warning is logged for operations without a message', function() {
|
||||
let subject = createDeprecationProxy({}, {
|
||||
get: 'get message'
|
||||
});
|
||||
|
||||
sinon.stub(log, 'warn');
|
||||
subject.foo = 'bar'; // Triggers a "set," but not a "get"
|
||||
equal(log.warn.callCount, 0, 'no deprecation warning expected');
|
||||
log.warn.restore();
|
||||
});
|
||||
}
|
||||
@@ -1,84 +1,56 @@
|
||||
import {IE_VERSION} from '../../../src/js/utils/browser';
|
||||
import log from '../../../src/js/utils/log.js';
|
||||
import {logByType} from '../../../src/js/utils/log.js';
|
||||
import window from 'global/window';
|
||||
|
||||
q.module('log', {
|
||||
q.module('log');
|
||||
|
||||
beforeEach() {
|
||||
test('should confirm logging functions work', function() {
|
||||
let origConsole = window['console'];
|
||||
// replace the native console for testing
|
||||
// in ie8 console.log is apparently not a 'function' so sinon chokes on it
|
||||
// https://github.com/cjohansen/Sinon.JS/issues/386
|
||||
// instead we'll temporarily replace them with no-op functions
|
||||
let console = window['console'] = {
|
||||
log: function(){},
|
||||
warn: function(){},
|
||||
error: function(){}
|
||||
};
|
||||
|
||||
// Back up the original console.
|
||||
this.originalConsole = window.console;
|
||||
// stub the global log functions
|
||||
let logStub = sinon.stub(console, 'log');
|
||||
let errorStub = sinon.stub(console, 'error');
|
||||
let warnStub = sinon.stub(console, 'warn');
|
||||
|
||||
// Replace the native console for testing. In IE8 `console.log` is not a
|
||||
// 'function' so sinon chokes on it when trying to spy:
|
||||
// https://github.com/cjohansen/Sinon.JS/issues/386
|
||||
//
|
||||
// Instead we'll temporarily replace them with no-op functions
|
||||
window.console = {
|
||||
log: sinon.spy(),
|
||||
warn: sinon.spy(),
|
||||
error: sinon.spy()
|
||||
};
|
||||
},
|
||||
|
||||
afterEach() {
|
||||
|
||||
// Restore the native/original console.
|
||||
window.console = this.originalConsole;
|
||||
|
||||
// Empty the logger's history.
|
||||
log.history.length = 0;
|
||||
}
|
||||
});
|
||||
|
||||
const getConsoleArgs = (...arr) =>
|
||||
IE_VERSION && IE_VERSION < 11 ? [arr.join(' ')] : arr;
|
||||
|
||||
test('logging functions should work', function() {
|
||||
|
||||
// Need to reset history here because there are extra messages logged
|
||||
// when running via Karma.
|
||||
log.history.length = 0;
|
||||
// Reset the log history
|
||||
log.history = [];
|
||||
|
||||
log('log1', 'log2');
|
||||
log.warn('warn1', 'warn2');
|
||||
log.error('error1', 'error2');
|
||||
|
||||
ok(window.console.log.called, 'log was called');
|
||||
deepEqual(
|
||||
window.console.log.firstCall.args,
|
||||
getConsoleArgs('VIDEOJS:', 'log1', 'log2')
|
||||
);
|
||||
ok(logStub.called, 'log was called');
|
||||
equal(logStub.firstCall.args[0], 'VIDEOJS:');
|
||||
equal(logStub.firstCall.args[1], 'log1');
|
||||
equal(logStub.firstCall.args[2], 'log2');
|
||||
|
||||
ok(window.console.warn.called, 'warn was called');
|
||||
deepEqual(
|
||||
window.console.warn.firstCall.args,
|
||||
getConsoleArgs('VIDEOJS:', 'WARN:', 'warn1', 'warn2')
|
||||
);
|
||||
ok(warnStub.called, 'warn was called');
|
||||
equal(warnStub.firstCall.args[0], 'VIDEOJS:');
|
||||
equal(warnStub.firstCall.args[1], 'WARN:');
|
||||
equal(warnStub.firstCall.args[2], 'warn1');
|
||||
equal(warnStub.firstCall.args[3], 'warn2');
|
||||
|
||||
ok(window.console.error.called, 'error was called');
|
||||
deepEqual(
|
||||
window.console.error.firstCall.args,
|
||||
getConsoleArgs('VIDEOJS:', 'ERROR:', 'error1', 'error2')
|
||||
);
|
||||
ok(errorStub.called, 'error was called');
|
||||
equal(errorStub.firstCall.args[0], 'VIDEOJS:');
|
||||
equal(errorStub.firstCall.args[1], 'ERROR:');
|
||||
equal(errorStub.firstCall.args[2], 'error1');
|
||||
equal(errorStub.firstCall.args[3], 'error2');
|
||||
|
||||
equal(log.history.length, 3, 'there should be three messages in the log history');
|
||||
});
|
||||
|
||||
test('in IE pre-11 (or when requested) objects and arrays are stringified', function() {
|
||||
|
||||
// Run a custom log call, explicitly requesting object/array stringification.
|
||||
logByType('log', [
|
||||
'test',
|
||||
{foo: 'bar'},
|
||||
[1, 2, 3],
|
||||
0,
|
||||
false,
|
||||
null
|
||||
], true);
|
||||
|
||||
ok(window.console.log.called, 'log was called');
|
||||
deepEqual(window.console.log.firstCall.args,
|
||||
['VIDEOJS: test {"foo":"bar"} [1,2,3] 0 false null']);
|
||||
|
||||
// tear down sinon
|
||||
logStub.restore();
|
||||
errorStub.restore();
|
||||
warnStub.restore();
|
||||
|
||||
// restore the native console
|
||||
window['console'] = origConsole;
|
||||
});
|
||||
|
||||
Referência em uma Nova Issue
Bloquear um usuário