mirror of
https://github.com/videojs/video.js.git
synced 2025-07-13 01:30:17 +02:00
refactor: remove IE8 specific changes (#5041)
BREAKING CHANGE: remove IE8, IE9, and IE10 specific JavaScript and CSS code. Remove Android 2.3 workaround.
This commit is contained in:
Gary Katsevman
GitHub
1
.babelrc
1
.babelrc
@ -1,6 +1,5 @@
|
|||||||
{
|
{
|
||||||
"presets": [
|
"presets": [
|
||||||
"es3",
|
|
||||||
["es2015", {
|
["es2015", {
|
||||||
"loose": true
|
"loose": true
|
||||||
}]
|
}]
|
||||||
|
|||||||
@ -6,7 +6,7 @@ const filesize = require('filesize');
|
|||||||
const Table = require('cli-table');
|
const Table = require('cli-table');
|
||||||
|
|
||||||
const files = klawSync('dist/', {
|
const files = klawSync('dist/', {
|
||||||
ignore: ['examples', 'lang', 'font', 'ie8', '*.zip', '*.gz'],
|
ignore: ['examples', 'lang', 'font', '*.zip', '*.gz'],
|
||||||
nodir: true
|
nodir: true
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -151,7 +151,6 @@ module.exports = function(grunt) {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
fonts: { cwd: 'node_modules/videojs-font/fonts/', src: ['*'], dest: 'build/temp/font/', expand: true, filter: 'isFile' },
|
fonts: { cwd: 'node_modules/videojs-font/fonts/', src: ['*'], dest: 'build/temp/font/', expand: true, filter: 'isFile' },
|
||||||
ie8: { cwd: 'node_modules/videojs-ie8/dist/', src: ['**/**'], dest: 'build/temp/ie8/', expand: true, filter: 'isFile' },
|
|
||||||
dist: { cwd: 'build/temp/', src: ['**/**', '!test*'], dest: 'dist/', expand: true, filter: 'isFile' },
|
dist: { cwd: 'build/temp/', src: ['**/**', '!test*'], dest: 'dist/', expand: true, filter: 'isFile' },
|
||||||
a11y: { src: 'sandbox/descriptions.html.example', dest: 'sandbox/descriptions.test-a11y.html' }, // Can only test a file with a .html or .htm extension
|
a11y: { src: 'sandbox/descriptions.html.example', dest: 'sandbox/descriptions.test-a11y.html' }, // Can only test a file with a .html or .htm extension
|
||||||
examples: { cwd: 'docs/examples/', src: ['**/**'], dest: 'dist/examples/', expand: true, filter: 'isFile' }
|
examples: { cwd: 'docs/examples/', src: ['**/**'], dest: 'dist/examples/', expand: true, filter: 'isFile' }
|
||||||
@ -304,10 +303,6 @@ module.exports = function(grunt) {
|
|||||||
concat: {
|
concat: {
|
||||||
options: {
|
options: {
|
||||||
separator: '\n'
|
separator: '\n'
|
||||||
},
|
|
||||||
ie8_addition: {
|
|
||||||
src: ['build/temp/video-js.css', 'src/css/ie8.css'],
|
|
||||||
dest: 'build/temp/video-js.css'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
concurrent: {
|
concurrent: {
|
||||||
@ -445,7 +440,6 @@ module.exports = function(grunt) {
|
|||||||
'cssmin',
|
'cssmin',
|
||||||
|
|
||||||
'copy:fonts',
|
'copy:fonts',
|
||||||
'copy:ie8',
|
|
||||||
'vjslanguages'
|
'vjslanguages'
|
||||||
]);
|
]);
|
||||||
|
|
||||||
@ -457,7 +451,7 @@ module.exports = function(grunt) {
|
|||||||
'zip:dist'
|
'zip:dist'
|
||||||
]);
|
]);
|
||||||
|
|
||||||
grunt.registerTask('skin', ['sass', 'concat:ie8_addition']);
|
grunt.registerTask('skin', ['sass']);
|
||||||
|
|
||||||
// Default task - build and test
|
// Default task - build and test
|
||||||
grunt.registerTask('default', ['test']);
|
grunt.registerTask('default', ['test']);
|
||||||
|
|||||||
@ -45,7 +45,6 @@ const primedBabel = babel({
|
|||||||
babelrc: false,
|
babelrc: false,
|
||||||
exclude: 'node_modules/**',
|
exclude: 'node_modules/**',
|
||||||
presets: [
|
presets: [
|
||||||
'es3',
|
|
||||||
['es2015', {
|
['es2015', {
|
||||||
loose: true,
|
loose: true,
|
||||||
modules: false
|
modules: false
|
||||||
|
|||||||
@ -44,18 +44,6 @@ Similar to the `console`, any number of mixed-type values can be passed to `vide
|
|||||||
videojs.log('this is a string', {butThis: 'is an object'});
|
videojs.log('this is a string', {butThis: 'is an object'});
|
||||||
```
|
```
|
||||||
|
|
||||||
However, certain browser consoles (namely, IE10 and lower) do not support non-string values. Video.js improves on this situation by passing objects through `JSON.stringify` before logging them in IE10 and below. In other words, instead of the above producing this:
|
|
||||||
|
|
||||||
```txt
|
|
||||||
VIDEOJS: this is a string [object Object]
|
|
||||||
```
|
|
||||||
|
|
||||||
it will produce this:
|
|
||||||
|
|
||||||
```txt
|
|
||||||
VIDEOJS: this is a string {"butThis": "is an object"}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Log Levels
|
### Log Levels
|
||||||
|
|
||||||
Unlike the `console`, `videojs.log` includes the concept of logging levels. These levels toggle logging methods on or off.
|
Unlike the `console`, `videojs.log` includes the concept of logging levels. These levels toggle logging methods on or off.
|
||||||
|
|||||||
@ -77,11 +77,6 @@ Adding `class="video-js"` with this embed is no longer necessary as it will auto
|
|||||||
#### Custom Elements
|
#### Custom Elements
|
||||||
Native Custom Elements support is relatively small according to [Can I Use](http://caniuse.com/#feat=custom-elementsv1) and because we didn't want to include a polyfill we're going with just an element called `video-js` rather than a full blown custom element.
|
Native Custom Elements support is relatively small according to [Can I Use](http://caniuse.com/#feat=custom-elementsv1) and because we didn't want to include a polyfill we're going with just an element called `video-js` rather than a full blown custom element.
|
||||||
|
|
||||||
#### Browser support
|
|
||||||
These all work in all browsers that Video.js supports, though, there are some caveats for some older browsers.
|
|
||||||
- IE8 requires running `document.createElement('video-js')` before using the `video-js` embed code.
|
|
||||||
- IE9 doesn't support having `source` elements outside of the `video` element, thus, the `video-js` embed will not work there. Though, if the source is set later, it should still work.
|
|
||||||
|
|
||||||
## data-setup
|
## data-setup
|
||||||
This is an ease-of-use method for having Video.js set up the player automatically. It is an HTML attribute and it takes a JSON string representation of the [player options](/docs/guides/options.md) as the value.
|
This is an ease-of-use method for having Video.js set up the player automatically. It is an HTML attribute and it takes a JSON string representation of the [player options](/docs/guides/options.md) as the value.
|
||||||
Using the programmatic approach is probably preferable.
|
Using the programmatic approach is probably preferable.
|
||||||
|
|||||||
36
package-lock.json
generated
36
package-lock.json
generated
@ -1057,24 +1057,6 @@
|
|||||||
"regexpu-core": "2.0.0"
|
"regexpu-core": "2.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"babel-plugin-transform-es3-member-expression-literals": {
|
|
||||||
"version": "6.22.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/babel-plugin-transform-es3-member-expression-literals/-/babel-plugin-transform-es3-member-expression-literals-6.22.0.tgz",
|
|
||||||
"integrity": "sha1-cz00RPPsxBvvjtGmpOCWV7iWnrs=",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"babel-runtime": "6.26.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"babel-plugin-transform-es3-property-literals": {
|
|
||||||
"version": "6.22.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/babel-plugin-transform-es3-property-literals/-/babel-plugin-transform-es3-property-literals-6.22.0.tgz",
|
|
||||||
"integrity": "sha1-sgeNWELiKr9A9z6M3pzTcRq9V1g=",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"babel-runtime": "6.26.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"babel-plugin-transform-regenerator": {
|
"babel-plugin-transform-regenerator": {
|
||||||
"version": "6.26.0",
|
"version": "6.26.0",
|
||||||
"resolved": "https://registry.npmjs.org/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz",
|
"resolved": "https://registry.npmjs.org/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz",
|
||||||
@ -1154,16 +1136,6 @@
|
|||||||
"babel-plugin-transform-regenerator": "6.26.0"
|
"babel-plugin-transform-regenerator": "6.26.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"babel-preset-es3": {
|
|
||||||
"version": "1.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/babel-preset-es3/-/babel-preset-es3-1.0.1.tgz",
|
|
||||||
"integrity": "sha1-4I3ZUKFnDauLUKvOqpuT09mszR4=",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"babel-plugin-transform-es3-member-expression-literals": "6.22.0",
|
|
||||||
"babel-plugin-transform-es3-property-literals": "6.22.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"babel-register": {
|
"babel-register": {
|
||||||
"version": "6.26.0",
|
"version": "6.26.0",
|
||||||
"resolved": "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz",
|
"resolved": "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz",
|
||||||
@ -3832,7 +3804,8 @@
|
|||||||
"es5-shim": {
|
"es5-shim": {
|
||||||
"version": "4.5.10",
|
"version": "4.5.10",
|
||||||
"resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.10.tgz",
|
"resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.10.tgz",
|
||||||
"integrity": "sha512-vmryBdqKRO8Ei9LJ4yyEk/EOmAOGIagcHDYPpTAi6pot4IMHS1AC2q5cTKPmydpijg2iX8DVmCuqgrNxIWj8Yg=="
|
"integrity": "sha512-vmryBdqKRO8Ei9LJ4yyEk/EOmAOGIagcHDYPpTAi6pot4IMHS1AC2q5cTKPmydpijg2iX8DVmCuqgrNxIWj8Yg==",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"es6-iterator": {
|
"es6-iterator": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
@ -6905,7 +6878,7 @@
|
|||||||
"husky": {
|
"husky": {
|
||||||
"version": "0.14.3",
|
"version": "0.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/husky/-/husky-0.14.3.tgz",
|
"resolved": "https://registry.npmjs.org/husky/-/husky-0.14.3.tgz",
|
||||||
"integrity": "sha1-xp7XTi0neXaaF7qDmbVM4LY8EsM=",
|
"integrity": "sha512-e21wivqHpstpoiWA/Yi8eFti8E+sQDSS53cpJsPptPs295QTOQR0ZwnHo2TXy1XOpZFD9rPOd3NpmqTK6uMLJA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"is-ci": "1.0.10",
|
"is-ci": "1.0.10",
|
||||||
@ -12115,7 +12088,7 @@
|
|||||||
"rollup-watch": {
|
"rollup-watch": {
|
||||||
"version": "4.3.1",
|
"version": "4.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/rollup-watch/-/rollup-watch-4.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/rollup-watch/-/rollup-watch-4.3.1.tgz",
|
||||||
"integrity": "sha1-WqHq6reHrd82iQXRArOdb8XOSos=",
|
"integrity": "sha512-6yjnIwfjpSrqA8IafyIu7fsEyeImNR4aDjA1bQ7KWeVuiA+Clfsx8+PGQkyABWIQzmauQ//tIJ5wAxLXsXs8qQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"chokidar": "1.7.0",
|
"chokidar": "1.7.0",
|
||||||
@ -14101,6 +14074,7 @@
|
|||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
|
||||||
"integrity": "sha1-oj09hgitcZK2nGB3/E64SJmNNdk=",
|
"integrity": "sha1-oj09hgitcZK2nGB3/E64SJmNNdk=",
|
||||||
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"es5-shim": "4.5.10"
|
"es5-shim": "4.5.10"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -53,7 +53,6 @@
|
|||||||
"safe-json-parse": "4.0.0",
|
"safe-json-parse": "4.0.0",
|
||||||
"tsml": "1.0.1",
|
"tsml": "1.0.1",
|
||||||
"videojs-font": "2.1.0",
|
"videojs-font": "2.1.0",
|
||||||
"videojs-ie8": "1.1.2",
|
|
||||||
"videojs-vtt.js": "0.12.6",
|
"videojs-vtt.js": "0.12.6",
|
||||||
"xhr": "2.4.0"
|
"xhr": "2.4.0"
|
||||||
},
|
},
|
||||||
@ -63,7 +62,6 @@
|
|||||||
"babel-plugin-external-helpers": "^6.22.0",
|
"babel-plugin-external-helpers": "^6.22.0",
|
||||||
"babel-plugin-transform-runtime": "^6.9.0",
|
"babel-plugin-transform-runtime": "^6.9.0",
|
||||||
"babel-preset-es2015": "^6.14.0",
|
"babel-preset-es2015": "^6.14.0",
|
||||||
"babel-preset-es3": "^1.0.1",
|
|
||||||
"babel-register": "^6.9.0",
|
"babel-register": "^6.9.0",
|
||||||
"babelify": "^8.0.0",
|
"babelify": "^8.0.0",
|
||||||
"bluebird": "^3.5.1",
|
"bluebird": "^3.5.1",
|
||||||
|
|||||||
@ -4,9 +4,6 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Video.js Sandbox</title>
|
<title>Video.js Sandbox</title>
|
||||||
|
|
||||||
<!-- Add ES5 shim and sham for IE8 -->
|
|
||||||
<script src="../dist/ie8/videojs-ie8.js"></script>
|
|
||||||
|
|
||||||
<!-- Load the source files -->
|
<!-- Load the source files -->
|
||||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||||
<script src="../dist/video.js"></script>
|
<script src="../dist/video.js"></script>
|
||||||
@ -28,11 +25,11 @@
|
|||||||
<video id="vid1" class="video-js vjs-default-skin" lang="en" controls preload="auto" width="640" height="360" poster="//d2zihajmogu5jn.cloudfront.net/elephantsdream/poster.png">
|
<video id="vid1" class="video-js vjs-default-skin" lang="en" controls preload="auto" width="640" height="360" poster="//d2zihajmogu5jn.cloudfront.net/elephantsdream/poster.png">
|
||||||
<source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4" type="video/mp4">
|
<source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4" type="video/mp4">
|
||||||
<source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.ogg" type="video/ogg">
|
<source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.ogg" type="video/ogg">
|
||||||
<track kind="captions" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.en.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
<track kind="captions" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.en.vtt" srclang="en" label="English">
|
||||||
<track kind="subtitles" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.ar.vtt" srclang="ar" label="Arabic"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
<track kind="subtitles" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.ar.vtt" srclang="ar" label="Arabic">
|
||||||
<track kind="subtitles" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.sv.vtt" srclang="sv" label="Swedish"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
<track kind="subtitles" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.sv.vtt" srclang="sv" label="Swedish">
|
||||||
<track kind="subtitles" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.ru.vtt" srclang="ru" label="Russian"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
<track kind="subtitles" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.ru.vtt" srclang="ru" label="Russian">
|
||||||
<track kind="subtitles" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.ja.vtt" srclang="ja" label="Japanese"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
<track kind="subtitles" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.ja.vtt" srclang="ja" label="Japanese">
|
||||||
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
|
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
|
||||||
</video>
|
</video>
|
||||||
<p>This player has the captions-only captionsButton, the subtiles-only subtitlesButton and the subsCapsButton which shows both kinds. Typically you'll use either just the subsCapsButton alone, or one or both of the captionsButton and subtitlesButton.</p>
|
<p>This player has the captions-only captionsButton, the subtiles-only subtitlesButton and the subsCapsButton which shows both kinds. Typically you'll use either just the subsCapsButton alone, or one or both of the captionsButton and subtitlesButton.</p>
|
||||||
|
|||||||
@ -4,9 +4,6 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Video.js Text Descriptions, Chapters & Captions Example</title>
|
<title>Video.js Text Descriptions, Chapters & Captions Example</title>
|
||||||
|
|
||||||
<!-- Add ES5 shim and sham for IE8 -->
|
|
||||||
<script src="../dist/ie8/videojs-ie8.js"></script>
|
|
||||||
|
|
||||||
<!-- Load the source files -->
|
<!-- Load the source files -->
|
||||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||||
<script src="../dist/video.js"></script>
|
<script src="../dist/video.js"></script>
|
||||||
@ -31,15 +28,15 @@
|
|||||||
<source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4" type="video/mp4">
|
<source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4" type="video/mp4">
|
||||||
<source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.ogg" type="video/ogg">
|
<source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.ogg" type="video/ogg">
|
||||||
|
|
||||||
<track kind="captions" src="../docs/examples/elephantsdream/captions.en.vtt" srclang="en" label="English" default></track><!-- Tracks need an ending tag thanks to IE9 -->
|
<track kind="captions" src="../docs/examples/elephantsdream/captions.en.vtt" srclang="en" label="English" default>
|
||||||
<track kind="captions" src="../docs/examples/elephantsdream/captions.sv.vtt" srclang="sv" label="Swedish"></track>
|
<track kind="captions" src="../docs/examples/elephantsdream/captions.sv.vtt" srclang="sv" label="Swedish">
|
||||||
<track kind="captions" src="../docs/examples/elephantsdream/captions.ru.vtt" srclang="ru" label="Russian"></track>
|
<track kind="captions" src="../docs/examples/elephantsdream/captions.ru.vtt" srclang="ru" label="Russian">
|
||||||
<track kind="captions" src="../docs/examples/elephantsdream/captions.ja.vtt" srclang="ja" label="Japanese"></track>
|
<track kind="captions" src="../docs/examples/elephantsdream/captions.ja.vtt" srclang="ja" label="Japanese">
|
||||||
<track kind="captions" src="../docs/examples/elephantsdream/captions.ar.vtt" srclang="ar" label="Arabic"></track>
|
<track kind="captions" src="../docs/examples/elephantsdream/captions.ar.vtt" srclang="ar" label="Arabic">
|
||||||
|
|
||||||
<track kind="descriptions" src="../docs/examples/elephantsdream/descriptions.en.vtt" srclang="en" label="English"></track>
|
<track kind="descriptions" src="../docs/examples/elephantsdream/descriptions.en.vtt" srclang="en" label="English">
|
||||||
|
|
||||||
<track kind="chapters" src="../docs/examples/elephantsdream/chapters.en.vtt" srclang="en" label="English"></track>
|
<track kind="chapters" src="../docs/examples/elephantsdream/chapters.en.vtt" srclang="en" label="English">
|
||||||
|
|
||||||
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
|
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
|
||||||
</video>
|
</video>
|
||||||
|
|||||||
@ -4,9 +4,6 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Video.js Sandbox</title>
|
<title>Video.js Sandbox</title>
|
||||||
|
|
||||||
<!-- Add ES5 shim and sham for IE8 -->
|
|
||||||
<script src="../dist/ie8/videojs-ie8.js"></script>
|
|
||||||
|
|
||||||
<!-- Load the source files -->
|
<!-- Load the source files -->
|
||||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||||
<script src="../dist/video.js"></script>
|
<script src="../dist/video.js"></script>
|
||||||
@ -32,7 +29,7 @@
|
|||||||
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
|
<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.webm" type="video/webm">
|
||||||
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
|
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
|
||||||
<track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
<track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English">
|
||||||
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
|
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
|
|||||||
@ -4,9 +4,6 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Video.js Sandbox</title>
|
<title>Video.js Sandbox</title>
|
||||||
|
|
||||||
<!-- Add ES5 shim and sham for IE8 -->
|
|
||||||
<script src="../dist/ie8/videojs-ie8.js"></script>
|
|
||||||
|
|
||||||
<!-- Load the source files -->
|
<!-- Load the source files -->
|
||||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||||
<script src="../dist/video.js"></script>
|
<script src="../dist/video.js"></script>
|
||||||
@ -32,7 +29,7 @@
|
|||||||
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
|
<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.webm" type="video/webm">
|
||||||
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
|
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
|
||||||
<track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
<track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English">
|
||||||
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
|
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
|
|||||||
@ -5,9 +5,6 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>VideoJS Languages Demo</title>
|
<title>VideoJS Languages Demo</title>
|
||||||
|
|
||||||
<!-- Add ES5 shim and sham for IE8 -->
|
|
||||||
<script src="../dist/ie8/videojs-ie8.js"></script>
|
|
||||||
|
|
||||||
<!-- Load the source files -->
|
<!-- Load the source files -->
|
||||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||||
<script src="../dist/video.js"></script>
|
<script src="../dist/video.js"></script>
|
||||||
|
|||||||
@ -4,9 +4,6 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Video.js Sandbox</title>
|
<title>Video.js Sandbox</title>
|
||||||
|
|
||||||
<!-- Add ES5 shim and sham for IE8 -->
|
|
||||||
<script src="../build/temp/ie8/videojs-ie8.js"></script>
|
|
||||||
|
|
||||||
<!-- Load the source files -->
|
<!-- Load the source files -->
|
||||||
<link href="../build/temp/video-js.css" rel="stylesheet" type="text/css">
|
<link href="../build/temp/video-js.css" rel="stylesheet" type="text/css">
|
||||||
<script src="../dist/video.js"></script>
|
<script src="../dist/video.js"></script>
|
||||||
|
|||||||
@ -4,9 +4,6 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Video.js Plugin Example</title>
|
<title>Video.js Plugin Example</title>
|
||||||
|
|
||||||
<!-- Add ES5 shim and sham for IE8 -->
|
|
||||||
<script src="../dist/ie8/videojs-ie8.js"></script>
|
|
||||||
|
|
||||||
<!-- Load the source files -->
|
<!-- Load the source files -->
|
||||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||||
<script src="../dist/video.js"></script>
|
<script src="../dist/video.js"></script>
|
||||||
|
|||||||
@ -4,7 +4,6 @@
|
|||||||
color: inherit;
|
color: inherit;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
overflow: visible; // IE8
|
|
||||||
font-size: inherit; // IE in general. WTF.
|
font-size: inherit; // IE in general. WTF.
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
|
|||||||
@ -44,7 +44,7 @@
|
|||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
// IE 8 + 9 Support
|
// no flex support
|
||||||
.vjs-has-started.vjs-no-flex .vjs-control-bar {
|
.vjs-has-started.vjs-no-flex .vjs-control-bar {
|
||||||
display: table;
|
display: table;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -30,7 +30,6 @@
|
|||||||
@include hide-visually;
|
@include hide-visually;
|
||||||
}
|
}
|
||||||
|
|
||||||
// IE 8 + 9 Support
|
|
||||||
.vjs-no-flex .vjs-control {
|
.vjs-no-flex .vjs-control {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
margin-top: -0.5em;
|
margin-top: -0.5em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-shadow: 0.05em 0.05em 0.1em #000;
|
text-shadow: 0.05em 0.05em 0.1em #000;
|
||||||
text-align: center; // Needed for IE8
|
text-align: center;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@ -103,8 +103,6 @@ body.vjs-full-window {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
}
|
||||||
.vjs-full-window .video-js.vjs-fullscreen {
|
.vjs-full-window .video-js.vjs-fullscreen {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -149,10 +147,8 @@ body.vjs-full-window {
|
|||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
// In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
|
|
||||||
// The .video-js classname on the video tag also isn't considered.
|
|
||||||
// This optional paragraph inside the video tag can provide a message to users
|
// This optional paragraph inside the video tag can provide a message to users
|
||||||
// about what's required to play video.
|
// about what's required to play video when JavaScript is disabled
|
||||||
.vjs-no-js {
|
.vjs-no-js {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|||||||
@ -16,16 +16,6 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Used for IE8 fallback
|
|
||||||
.vjs-poster img {
|
|
||||||
display: block;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin: 0 auto;
|
|
||||||
max-height: 100%;
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide the poster after the video has started playing
|
// Hide the poster after the video has started playing
|
||||||
.vjs-has-started .vjs-poster {
|
.vjs-has-started .vjs-poster {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@ -63,9 +63,6 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
// updated by javascript during playback
|
// updated by javascript during playback
|
||||||
width: 0;
|
width: 0;
|
||||||
// Needed for IE6
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-js .vjs-play-progress {
|
.video-js .vjs-play-progress {
|
||||||
@ -83,18 +80,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.video-js .vjs-load-progress {
|
.video-js .vjs-load-progress {
|
||||||
// For IE8, we'll lighten the color
|
|
||||||
background: lighten($secondary-background-color, 25%);
|
|
||||||
// Otherwise, we'll rely on stacked opacities
|
|
||||||
background: rgba($secondary-background-color, $secondary-background-transparency);
|
background: rgba($secondary-background-color, $secondary-background-transparency);
|
||||||
}
|
}
|
||||||
|
|
||||||
// There are child elements of the load progress bar that represent the
|
// There are child elements of the load progress bar that represent the
|
||||||
// specific time ranges that have been buffered.
|
// specific time ranges that have been buffered.
|
||||||
.video-js .vjs-load-progress div {
|
.video-js .vjs-load-progress div {
|
||||||
// For IE8, we'll lighten the color
|
|
||||||
background: lighten($secondary-background-color, 50%);
|
|
||||||
// Otherwise, we'll rely on stacked opacities
|
|
||||||
background: rgba($secondary-background-color, 0.75);
|
background: rgba($secondary-background-color, 0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -18,8 +18,6 @@
|
|||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 0.1em;
|
margin-bottom: 0.1em;
|
||||||
// Transparent black background, or fallback to all black (oldIE)
|
|
||||||
@include background-color-with-alpha(#000, 0.5);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.vjs-subtitles { color: #fff; } // Subtitles are white
|
.vjs-subtitles { color: #fff; } // Subtitles are white
|
||||||
|
|||||||
@ -18,12 +18,6 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// IE 8 + IE 9 width: auto container fix
|
|
||||||
.vjs-no-flex .vjs-remaining-time.vjs-time-control.vjs-control {
|
|
||||||
width: 0px !important;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-js .vjs-duration,
|
.video-js .vjs-duration,
|
||||||
.vjs-no-flex .vjs-duration {
|
.vjs-no-flex .vjs-duration {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@ -1,11 +1,6 @@
|
|||||||
.video-js .vjs-mute-control {
|
.video-js .vjs-mute-control {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@include flex(none);
|
@include flex(none);
|
||||||
// padding here is for IE < 9, it doesn't do width: auto from
|
|
||||||
// another style correctly
|
|
||||||
padding-left: 2em;
|
|
||||||
padding-right: 2em;
|
|
||||||
padding-bottom: 3em;
|
|
||||||
|
|
||||||
& .vjs-icon-placeholder {
|
& .vjs-icon-placeholder {
|
||||||
@extend .vjs-icon-volume-high;
|
@extend .vjs-icon-volume-high;
|
||||||
@ -39,13 +34,6 @@
|
|||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
|
|
||||||
}
|
}
|
||||||
.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
||||||
& .vjs-volume-bar,
|
|
||||||
& .vjs-volume-level {
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-js .vjs-volume-panel {
|
.video-js .vjs-volume-panel {
|
||||||
&:hover .vjs-volume-control,
|
&:hover .vjs-volume-control,
|
||||||
@ -64,14 +52,6 @@
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&.vjs-volume-vertical {
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
||||||
& .vjs-volume-bar,
|
|
||||||
& .vjs-volume-level {
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$transition-property: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
|
$transition-property: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
|
||||||
@include transition($transition-property);
|
@include transition($transition-property);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,10 +20,6 @@
|
|||||||
|
|
||||||
// This allows scrolling of content if need be.
|
// This allows scrolling of content if need be.
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
// When combined with `overflow: auto;`, this fixes gaps left by
|
|
||||||
// scrollbars in older IE versions.
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset box-sizing inside the menu.
|
// Reset box-sizing inside the menu.
|
||||||
@ -31,8 +27,8 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
// prevent menus from opening while scrubbing (FF, IE)
|
// prevent menus from opening while scrubbing
|
||||||
.vjs-scrubbing .vjs-menu-button:hover .vjs-menu {
|
.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,11 +0,0 @@
|
|||||||
@media \0screen {
|
|
||||||
.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media \0screen {
|
|
||||||
.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -988,7 +988,7 @@ class Component {
|
|||||||
|
|
||||||
// if the computed value is still 0, it's possible that the browser is lying
|
// if the computed value is still 0, it's possible that the browser is lying
|
||||||
// and we want to check the offset values.
|
// and we want to check the offset values.
|
||||||
// This code also runs on IE8 and wherever getComputedStyle doesn't exist.
|
// This code also runs wherever getComputedStyle doesn't exist.
|
||||||
if (computedWidthOrHeight === 0) {
|
if (computedWidthOrHeight === 0) {
|
||||||
const rule = `offset${toTitleCase(widthOrHeight)}`;
|
const rule = `offset${toTitleCase(widthOrHeight)}`;
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
* @file play-progress-bar.js
|
* @file play-progress-bar.js
|
||||||
*/
|
*/
|
||||||
import Component from '../../component.js';
|
import Component from '../../component.js';
|
||||||
import {IE_VERSION, IS_IOS, IS_ANDROID} from '../../utils/browser.js';
|
import {IS_IOS, IS_ANDROID} from '../../utils/browser.js';
|
||||||
import formatTime from '../../utils/format-time.js';
|
import formatTime from '../../utils/format-time.js';
|
||||||
|
|
||||||
import './time-tooltip';
|
import './time-tooltip';
|
||||||
@ -71,8 +71,8 @@ PlayProgressBar.prototype.options_ = {
|
|||||||
children: []
|
children: []
|
||||||
};
|
};
|
||||||
|
|
||||||
// Time tooltips should not be added to a player on mobile devices or IE8
|
// Time tooltips should not be added to a player on mobile devices
|
||||||
if ((!IE_VERSION || IE_VERSION > 8) && !IS_IOS && !IS_ANDROID) {
|
if (!IS_IOS && !IS_ANDROID) {
|
||||||
PlayProgressBar.prototype.options_.children.push('timeTooltip');
|
PlayProgressBar.prototype.options_.children.push('timeTooltip');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
*/
|
*/
|
||||||
import Slider from '../../slider/slider.js';
|
import Slider from '../../slider/slider.js';
|
||||||
import Component from '../../component.js';
|
import Component from '../../component.js';
|
||||||
import {IE_VERSION, IS_IOS, IS_ANDROID} from '../../utils/browser.js';
|
import {IS_IOS, IS_ANDROID} from '../../utils/browser.js';
|
||||||
import * as Dom from '../../utils/dom.js';
|
import * as Dom from '../../utils/dom.js';
|
||||||
import * as Fn from '../../utils/fn.js';
|
import * as Fn from '../../utils/fn.js';
|
||||||
import formatTime from '../../utils/format-time.js';
|
import formatTime from '../../utils/format-time.js';
|
||||||
@ -332,8 +332,8 @@ SeekBar.prototype.options_ = {
|
|||||||
barName: 'playProgressBar'
|
barName: 'playProgressBar'
|
||||||
};
|
};
|
||||||
|
|
||||||
// MouseTimeDisplay tooltips should not be added to a player on mobile devices or IE8
|
// MouseTimeDisplay tooltips should not be added to a player on mobile devices
|
||||||
if ((!IE_VERSION || IE_VERSION > 8) && !IS_IOS && !IS_ANDROID) {
|
if (!IS_IOS && !IS_ANDROID) {
|
||||||
SeekBar.prototype.options_.children.splice(1, 0, 'mouseTimeDisplay');
|
SeekBar.prototype.options_.children.splice(1, 0, 'mouseTimeDisplay');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -51,7 +51,7 @@ class Menu extends Component {
|
|||||||
this.menuButton_.unpressButton();
|
this.menuButton_.unpressButton();
|
||||||
|
|
||||||
// don't focus menu button if item is a caption settings item
|
// don't focus menu button if item is a caption settings item
|
||||||
// because focus will move elsewhere and it logs an error on IE8
|
// because focus will move elsewhere
|
||||||
if (component.name() !== 'CaptionSettingsMenuItem') {
|
if (component.name() !== 'CaptionSettingsMenuItem') {
|
||||||
this.menuButton_.focus();
|
this.menuButton_.focus();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -578,20 +578,10 @@ class Player extends Component {
|
|||||||
tag.removeAttribute('height');
|
tag.removeAttribute('height');
|
||||||
|
|
||||||
Object.getOwnPropertyNames(attrs).forEach(function(attr) {
|
Object.getOwnPropertyNames(attrs).forEach(function(attr) {
|
||||||
// workaround so we don't totally break IE7
|
el.setAttribute(attr, attrs[attr]);
|
||||||
// http://stackoverflow.com/questions/3653444/css-styles-not-applied-on-dynamic-elements-in-internet-explorer-7
|
|
||||||
if (attr === 'class') {
|
|
||||||
el.className += ' ' + attrs[attr];
|
|
||||||
|
|
||||||
if (divEmbed) {
|
if (divEmbed) {
|
||||||
tag.className += ' ' + attrs[attr];
|
tag.setAttribute(attr, attrs[attr]);
|
||||||
}
|
|
||||||
} else {
|
|
||||||
el.setAttribute(attr, attrs[attr]);
|
|
||||||
|
|
||||||
if (divEmbed) {
|
|
||||||
tag.setAttribute(attr, attrs[attr]);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -624,7 +614,8 @@ class Player extends Component {
|
|||||||
this.fluid(this.options_.fluid);
|
this.fluid(this.options_.fluid);
|
||||||
this.aspectRatio(this.options_.aspectRatio);
|
this.aspectRatio(this.options_.aspectRatio);
|
||||||
|
|
||||||
// Hide any links within the video/audio tag, because IE doesn't hide them completely.
|
// Hide any links within the video/audio tag,
|
||||||
|
// because IE doesn't hide them completely from screen readers.
|
||||||
const links = tag.getElementsByTagName('a');
|
const links = tag.getElementsByTagName('a');
|
||||||
|
|
||||||
for (let i = 0; i < links.length; i++) {
|
for (let i = 0; i < links.length; i++) {
|
||||||
@ -2884,7 +2875,7 @@ class Player extends Component {
|
|||||||
this.addClass('vjs-error');
|
this.addClass('vjs-error');
|
||||||
|
|
||||||
// log the name of the error type and any message
|
// log the name of the error type and any message
|
||||||
// ie8 just logs "[object object]" if you just log the error object
|
// IE11 logs "[object object]" and required you to expand message to see error object
|
||||||
log.error(`(CODE:${this.error_.code} ${MediaError.errorTypes[this.error_.code]})`, this.error_.message, this.error_);
|
log.error(`(CODE:${this.error_.code} ${MediaError.errorTypes[this.error_.code]})`, this.error_.message, this.error_);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -3396,7 +3387,7 @@ class Player extends Component {
|
|||||||
'webkitFlexBasis' in elem.style ||
|
'webkitFlexBasis' in elem.style ||
|
||||||
'mozFlexBasis' in elem.style ||
|
'mozFlexBasis' in elem.style ||
|
||||||
'msFlexBasis' in elem.style ||
|
'msFlexBasis' in elem.style ||
|
||||||
// IE10-specific (2012 flex spec)
|
// IE10-specific (2012 flex spec), available for completeness
|
||||||
'msFlexOrder' in elem.style);
|
'msFlexOrder' in elem.style);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -3506,7 +3497,8 @@ Player.prototype.options_ = {
|
|||||||
'bigPlayButton',
|
'bigPlayButton',
|
||||||
'controlBar',
|
'controlBar',
|
||||||
'errorDisplay',
|
'errorDisplay',
|
||||||
'textTrackSettings'
|
'textTrackSettings',
|
||||||
|
'resizeManager'
|
||||||
],
|
],
|
||||||
|
|
||||||
language: navigator && (navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language) || 'en',
|
language: navigator && (navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language) || 'en',
|
||||||
@ -3518,10 +3510,6 @@ Player.prototype.options_ = {
|
|||||||
notSupportedMessage: 'No compatible source was found for this media.'
|
notSupportedMessage: 'No compatible source was found for this media.'
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!browser.IS_IE8) {
|
|
||||||
Player.prototype.options_.children.push('resizeManager');
|
|
||||||
}
|
|
||||||
|
|
||||||
[
|
[
|
||||||
/**
|
/**
|
||||||
* Returns whether or not the player is in the "ended" state.
|
* Returns whether or not the player is in the "ended" state.
|
||||||
|
|||||||
@ -5,7 +5,6 @@ import ClickableComponent from './clickable-component.js';
|
|||||||
import Component from './component.js';
|
import Component from './component.js';
|
||||||
import * as Fn from './utils/fn.js';
|
import * as Fn from './utils/fn.js';
|
||||||
import * as Dom from './utils/dom.js';
|
import * as Dom from './utils/dom.js';
|
||||||
import * as browser from './utils/browser.js';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A `ClickableComponent` that handles showing the poster image for the player.
|
* A `ClickableComponent` that handles showing the poster image for the player.
|
||||||
@ -52,15 +51,6 @@ class PosterImage extends ClickableComponent {
|
|||||||
tabIndex: -1
|
tabIndex: -1
|
||||||
});
|
});
|
||||||
|
|
||||||
// To ensure the poster image resizes while maintaining its original aspect
|
|
||||||
// ratio, use a div with `background-size` when available. For browsers that
|
|
||||||
// do not support `background-size` (e.g. IE8), fall back on using a regular
|
|
||||||
// img element.
|
|
||||||
if (!browser.BACKGROUND_SIZE_SUPPORTED) {
|
|
||||||
this.fallbackImg_ = Dom.createEl('img');
|
|
||||||
el.appendChild(this.fallbackImg_);
|
|
||||||
}
|
|
||||||
|
|
||||||
return el;
|
return el;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -93,19 +83,15 @@ class PosterImage extends ClickableComponent {
|
|||||||
* The URL to the source for the `PosterImage`.
|
* The URL to the source for the `PosterImage`.
|
||||||
*/
|
*/
|
||||||
setSrc(url) {
|
setSrc(url) {
|
||||||
if (this.fallbackImg_) {
|
let backgroundImage = '';
|
||||||
this.fallbackImg_.src = url;
|
|
||||||
} else {
|
|
||||||
let backgroundImage = '';
|
|
||||||
|
|
||||||
// Any falsey values should stay as an empty string, otherwise
|
// Any falsey values should stay as an empty string, otherwise
|
||||||
// this will throw an extra error
|
// this will throw an extra error
|
||||||
if (url) {
|
if (url) {
|
||||||
backgroundImage = `url("${url}")`;
|
backgroundImage = `url("${url}")`;
|
||||||
}
|
|
||||||
|
|
||||||
this.el_.style.backgroundImage = backgroundImage;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.el_.style.backgroundImage = backgroundImage;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -22,35 +22,10 @@ const autoSetup = function() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// One day, when we stop supporting IE8, go back to this, but in the meantime...*hack hack hack*
|
const vids = Array.prototype.slice.call(document.getElementsByTagName('video'));
|
||||||
// var vids = Array.prototype.slice.call(document.getElementsByTagName('video'));
|
const audios = Array.prototype.slice.call(document.getElementsByTagName('audio'));
|
||||||
// var audios = Array.prototype.slice.call(document.getElementsByTagName('audio'));
|
const divs = Array.prototype.slice.call(document.getElementsByTagName('video-js'));
|
||||||
// var mediaEls = vids.concat(audios);
|
const mediaEls = vids.concat(audios, divs);
|
||||||
|
|
||||||
// Because IE8 doesn't support calling slice on a node list, we need to loop
|
|
||||||
// through each list of elements to build up a new, combined list of elements.
|
|
||||||
const vids = document.getElementsByTagName('video');
|
|
||||||
const audios = document.getElementsByTagName('audio');
|
|
||||||
const divs = document.getElementsByTagName('video-js');
|
|
||||||
const mediaEls = [];
|
|
||||||
|
|
||||||
if (vids && vids.length > 0) {
|
|
||||||
for (let i = 0, e = vids.length; i < e; i++) {
|
|
||||||
mediaEls.push(vids[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (audios && audios.length > 0) {
|
|
||||||
for (let i = 0, e = audios.length; i < e; i++) {
|
|
||||||
mediaEls.push(audios[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (divs && divs.length > 0) {
|
|
||||||
for (let i = 0, e = divs.length; i < e; i++) {
|
|
||||||
mediaEls.push(divs[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if any media elements exist
|
// Check if any media elements exist
|
||||||
if (mediaEls && mediaEls.length > 0) {
|
if (mediaEls && mediaEls.length > 0) {
|
||||||
@ -59,8 +34,6 @@ const autoSetup = function() {
|
|||||||
const mediaEl = mediaEls[i];
|
const mediaEl = mediaEls[i];
|
||||||
|
|
||||||
// Check if element exists, has getAttribute func.
|
// Check if element exists, has getAttribute func.
|
||||||
// IE seems to consider typeof el.getAttribute == 'object' instead of
|
|
||||||
// 'function' like expected, at least when loading the player immediately.
|
|
||||||
if (mediaEl && mediaEl.getAttribute) {
|
if (mediaEl && mediaEl.getAttribute) {
|
||||||
|
|
||||||
// Make sure this player hasn't already been set up.
|
// Make sure this player hasn't already been set up.
|
||||||
|
|||||||
@ -908,7 +908,7 @@ if (Dom.isReal()) {
|
|||||||
* - False if HTML5 media is not supported.
|
* - False if HTML5 media is not supported.
|
||||||
*/
|
*/
|
||||||
Html5.isSupported = function() {
|
Html5.isSupported = function() {
|
||||||
// IE9 with no Media Player is a LIAR! (#984)
|
// IE with no Media Player is a LIAR! (#984)
|
||||||
try {
|
try {
|
||||||
Html5.TEST_VID.volume = 0.5;
|
Html5.TEST_VID.volume = 0.5;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
@ -995,9 +995,6 @@ Html5.canControlPlaybackRate = function() {
|
|||||||
* - False otherwise
|
* - False otherwise
|
||||||
*/
|
*/
|
||||||
Html5.canOverrideAttributes = function() {
|
Html5.canOverrideAttributes = function() {
|
||||||
if (browser.IS_IE8) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
// if we cannot overwrite the src property, there is no support
|
// if we cannot overwrite the src property, there is no support
|
||||||
// iOS 7 safari for instance cannot do this.
|
// iOS 7 safari for instance cannot do this.
|
||||||
try {
|
try {
|
||||||
@ -1169,7 +1166,6 @@ Html5.prototype.featuresNativeAudioTracks = Html5.supportsNativeAudioTracks();
|
|||||||
// HTML5 Feature detection and Device Fixes --------------------------------- //
|
// HTML5 Feature detection and Device Fixes --------------------------------- //
|
||||||
const canPlayType = Html5.TEST_VID && Html5.TEST_VID.constructor.prototype.canPlayType;
|
const canPlayType = Html5.TEST_VID && Html5.TEST_VID.constructor.prototype.canPlayType;
|
||||||
const mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i;
|
const mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i;
|
||||||
const mp4RE = /^video\/mp4/i;
|
|
||||||
|
|
||||||
Html5.patchCanPlayType = function() {
|
Html5.patchCanPlayType = function() {
|
||||||
|
|
||||||
@ -1182,15 +1178,6 @@ Html5.patchCanPlayType = function() {
|
|||||||
}
|
}
|
||||||
return canPlayType.call(this, type);
|
return canPlayType.call(this, type);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Override Android 2.2 and less canPlayType method which is broken
|
|
||||||
} else if (browser.IS_OLD_ANDROID) {
|
|
||||||
Html5.TEST_VID.constructor.prototype.canPlayType = function(type) {
|
|
||||||
if (type && mp4RE.test(type)) {
|
|
||||||
return 'maybe';
|
|
||||||
}
|
|
||||||
return canPlayType.call(this, type);
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -1865,8 +1852,7 @@ Html5.nativeSourceHandler = {};
|
|||||||
* 'probably', 'maybe', or '' (empty string)
|
* 'probably', 'maybe', or '' (empty string)
|
||||||
*/
|
*/
|
||||||
Html5.nativeSourceHandler.canPlayType = function(type) {
|
Html5.nativeSourceHandler.canPlayType = function(type) {
|
||||||
// IE9 on Windows 7 without MediaPlayer throws an error here
|
// IE without MediaPlayer throws an error (#519)
|
||||||
// https://github.com/videojs/video.js/issues/519
|
|
||||||
try {
|
try {
|
||||||
return Html5.TEST_VID.canPlayType(type);
|
return Html5.TEST_VID.canPlayType(type);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|||||||
@ -2,8 +2,6 @@
|
|||||||
* @file audio-track-list.js
|
* @file audio-track-list.js
|
||||||
*/
|
*/
|
||||||
import TrackList from './track-list';
|
import TrackList from './track-list';
|
||||||
import * as browser from '../utils/browser.js';
|
|
||||||
import document from 'global/document';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Anywhere we call this function we diverge from the spec
|
* Anywhere we call this function we diverge from the spec
|
||||||
@ -42,8 +40,6 @@ class AudioTrackList extends TrackList {
|
|||||||
* A list of `AudioTrack` to instantiate the list with.
|
* A list of `AudioTrack` to instantiate the list with.
|
||||||
*/
|
*/
|
||||||
constructor(tracks = []) {
|
constructor(tracks = []) {
|
||||||
let list;
|
|
||||||
|
|
||||||
// make sure only 1 track is enabled
|
// make sure only 1 track is enabled
|
||||||
// sorted from last index to first index
|
// sorted from last index to first index
|
||||||
for (let i = tracks.length - 1; i >= 0; i--) {
|
for (let i = tracks.length - 1; i >= 0; i--) {
|
||||||
@ -53,26 +49,8 @@ class AudioTrackList extends TrackList {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// IE8 forces us to implement inheritance ourselves
|
super(tracks);
|
||||||
// as it does not support Object.defineProperty properly
|
this.changing_ = false;
|
||||||
if (browser.IS_IE8) {
|
|
||||||
list = document.createElement('custom');
|
|
||||||
for (const prop in TrackList.prototype) {
|
|
||||||
if (prop !== 'constructor') {
|
|
||||||
list[prop] = TrackList.prototype[prop];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (const prop in AudioTrackList.prototype) {
|
|
||||||
if (prop !== 'constructor') {
|
|
||||||
list[prop] = AudioTrackList.prototype[prop];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
list = super(tracks, list);
|
|
||||||
list.changing_ = false;
|
|
||||||
|
|
||||||
return list;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import {AudioTrackKind} from './track-enums';
|
import {AudioTrackKind} from './track-enums';
|
||||||
import Track from './track';
|
import Track from './track';
|
||||||
import merge from '../utils/merge-options';
|
import merge from '../utils/merge-options';
|
||||||
import * as browser from '../utils/browser.js';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A representation of a single `AudioTrack`. If it is part of an {@link AudioTrackList}
|
* A representation of a single `AudioTrack`. If it is part of an {@link AudioTrackList}
|
||||||
@ -38,18 +37,11 @@ class AudioTrack extends Track {
|
|||||||
const settings = merge(options, {
|
const settings = merge(options, {
|
||||||
kind: AudioTrackKind[options.kind] || ''
|
kind: AudioTrackKind[options.kind] || ''
|
||||||
});
|
});
|
||||||
// on IE8 this will be a document element
|
|
||||||
// for every other browser this will be a normal object
|
super(settings);
|
||||||
const track = super(settings);
|
|
||||||
let enabled = false;
|
let enabled = false;
|
||||||
|
|
||||||
if (browser.IS_IE8) {
|
|
||||||
for (const prop in AudioTrack.prototype) {
|
|
||||||
if (prop !== 'constructor') {
|
|
||||||
track[prop] = AudioTrack.prototype[prop];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
/**
|
||||||
* @memberof AudioTrack
|
* @memberof AudioTrack
|
||||||
* @member {boolean} enabled
|
* @member {boolean} enabled
|
||||||
@ -59,7 +51,7 @@ class AudioTrack extends Track {
|
|||||||
*
|
*
|
||||||
* @fires VideoTrack#selectedchange
|
* @fires VideoTrack#selectedchange
|
||||||
*/
|
*/
|
||||||
Object.defineProperty(track, 'enabled', {
|
Object.defineProperty(this, 'enabled', {
|
||||||
get() {
|
get() {
|
||||||
return enabled;
|
return enabled;
|
||||||
},
|
},
|
||||||
@ -88,11 +80,9 @@ class AudioTrack extends Track {
|
|||||||
// set selected to that true value otherwise
|
// set selected to that true value otherwise
|
||||||
// we keep it false
|
// we keep it false
|
||||||
if (settings.enabled) {
|
if (settings.enabled) {
|
||||||
track.enabled = settings.enabled;
|
this.enabled = settings.enabled;
|
||||||
}
|
}
|
||||||
track.loaded_ = true;
|
this.loaded_ = true;
|
||||||
|
|
||||||
return track;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -2,9 +2,6 @@
|
|||||||
* @file html-track-element-list.js
|
* @file html-track-element-list.js
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import * as browser from '../utils/browser.js';
|
|
||||||
import document from 'global/document';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The current list of {@link HtmlTrackElement}s.
|
* The current list of {@link HtmlTrackElement}s.
|
||||||
*/
|
*/
|
||||||
@ -17,19 +14,7 @@ class HtmlTrackElementList {
|
|||||||
* A list of `HtmlTrackElement` to instantiate the list with.
|
* A list of `HtmlTrackElement` to instantiate the list with.
|
||||||
*/
|
*/
|
||||||
constructor(trackElements = []) {
|
constructor(trackElements = []) {
|
||||||
let list = this; // eslint-disable-line
|
this.trackElements_ = [];
|
||||||
|
|
||||||
if (browser.IS_IE8) {
|
|
||||||
list = document.createElement('custom');
|
|
||||||
|
|
||||||
for (const prop in HtmlTrackElementList.prototype) {
|
|
||||||
if (prop !== 'constructor') {
|
|
||||||
list[prop] = HtmlTrackElementList.prototype[prop];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
list.trackElements_ = [];
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @memberof HtmlTrackElementList
|
* @memberof HtmlTrackElementList
|
||||||
@ -37,18 +22,14 @@ class HtmlTrackElementList {
|
|||||||
* The current number of `Track`s in the this Trackist.
|
* The current number of `Track`s in the this Trackist.
|
||||||
* @instance
|
* @instance
|
||||||
*/
|
*/
|
||||||
Object.defineProperty(list, 'length', {
|
Object.defineProperty(this, 'length', {
|
||||||
get() {
|
get() {
|
||||||
return this.trackElements_.length;
|
return this.trackElements_.length;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
for (let i = 0, length = trackElements.length; i < length; i++) {
|
for (let i = 0, length = trackElements.length; i < length; i++) {
|
||||||
list.addTrackElement_(trackElements[i]);
|
this.addTrackElement_(trackElements[i]);
|
||||||
}
|
|
||||||
|
|
||||||
if (browser.IS_IE8) {
|
|
||||||
return list;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -2,8 +2,6 @@
|
|||||||
* @file html-track-element.js
|
* @file html-track-element.js
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import * as browser from '../utils/browser.js';
|
|
||||||
import document from 'global/document';
|
|
||||||
import EventTarget from '../event-target';
|
import EventTarget from '../event-target';
|
||||||
import TextTrack from '../tracks/text-track';
|
import TextTrack from '../tracks/text-track';
|
||||||
|
|
||||||
@ -63,48 +61,40 @@ class HTMLTrackElement extends EventTarget {
|
|||||||
super();
|
super();
|
||||||
|
|
||||||
let readyState;
|
let readyState;
|
||||||
let trackElement = this; // eslint-disable-line
|
|
||||||
|
|
||||||
if (browser.IS_IE8) {
|
|
||||||
trackElement = document.createElement('custom');
|
|
||||||
|
|
||||||
for (const prop in HTMLTrackElement.prototype) {
|
|
||||||
if (prop !== 'constructor') {
|
|
||||||
trackElement[prop] = HTMLTrackElement.prototype[prop];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const track = new TextTrack(options);
|
const track = new TextTrack(options);
|
||||||
|
|
||||||
trackElement.kind = track.kind;
|
this.kind = track.kind;
|
||||||
trackElement.src = track.src;
|
this.src = track.src;
|
||||||
trackElement.srclang = track.language;
|
this.srclang = track.language;
|
||||||
trackElement.label = track.label;
|
this.label = track.label;
|
||||||
trackElement.default = track.default;
|
this.default = track.default;
|
||||||
|
|
||||||
/**
|
Object.defineProperties(this, {
|
||||||
* @memberof HTMLTrackElement
|
|
||||||
* @member {HTMLTrackElement~ReadyState} readyState
|
|
||||||
* The current ready state of the track element.
|
|
||||||
* @instance
|
|
||||||
*/
|
|
||||||
Object.defineProperty(trackElement, 'readyState', {
|
|
||||||
get() {
|
|
||||||
return readyState;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @memberof HTMLTrackElement
|
* @memberof HTMLTrackElement
|
||||||
* @member {TextTrack} track
|
* @member {HTMLTrackElement~ReadyState} readyState
|
||||||
* The underlying TextTrack object.
|
* The current ready state of the track element.
|
||||||
* @instance
|
* @instance
|
||||||
*
|
*/
|
||||||
*/
|
readyState: {
|
||||||
Object.defineProperty(trackElement, 'track', {
|
get() {
|
||||||
get() {
|
return readyState;
|
||||||
return track;
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @memberof HTMLTrackElement
|
||||||
|
* @member {TextTrack} track
|
||||||
|
* The underlying TextTrack object.
|
||||||
|
* @instance
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
track: {
|
||||||
|
get() {
|
||||||
|
return track;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -114,18 +104,14 @@ class HTMLTrackElement extends EventTarget {
|
|||||||
* @listens TextTrack#loadeddata
|
* @listens TextTrack#loadeddata
|
||||||
* @fires HTMLTrackElement#load
|
* @fires HTMLTrackElement#load
|
||||||
*/
|
*/
|
||||||
track.addEventListener('loadeddata', function() {
|
track.addEventListener('loadeddata', () => {
|
||||||
readyState = LOADED;
|
readyState = LOADED;
|
||||||
|
|
||||||
trackElement.trigger({
|
this.trigger({
|
||||||
type: 'load',
|
type: 'load',
|
||||||
target: trackElement
|
target: this
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
if (browser.IS_IE8) {
|
|
||||||
return trackElement;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +1,6 @@
|
|||||||
/**
|
/**
|
||||||
* @file text-track-cue-list.js
|
* @file text-track-cue-list.js
|
||||||
*/
|
*/
|
||||||
import * as browser from '../utils/browser.js';
|
|
||||||
import document from 'global/document';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @typedef {Object} TextTrackCueList~TextTrackCue
|
* @typedef {Object} TextTrackCueList~TextTrackCue
|
||||||
@ -36,19 +34,7 @@ class TextTrackCueList {
|
|||||||
* A list of cues to be initialized with
|
* A list of cues to be initialized with
|
||||||
*/
|
*/
|
||||||
constructor(cues) {
|
constructor(cues) {
|
||||||
let list = this; // eslint-disable-line
|
TextTrackCueList.prototype.setCues_.call(this, cues);
|
||||||
|
|
||||||
if (browser.IS_IE8) {
|
|
||||||
list = document.createElement('custom');
|
|
||||||
|
|
||||||
for (const prop in TextTrackCueList.prototype) {
|
|
||||||
if (prop !== 'constructor') {
|
|
||||||
list[prop] = TextTrackCueList.prototype[prop];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TextTrackCueList.prototype.setCues_.call(list, cues);
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @memberof TextTrackCueList
|
* @memberof TextTrackCueList
|
||||||
@ -56,15 +42,11 @@ class TextTrackCueList {
|
|||||||
* The current number of `TextTrackCue`s in the TextTrackCueList.
|
* The current number of `TextTrackCue`s in the TextTrackCueList.
|
||||||
* @instance
|
* @instance
|
||||||
*/
|
*/
|
||||||
Object.defineProperty(list, 'length', {
|
Object.defineProperty(this, 'length', {
|
||||||
get() {
|
get() {
|
||||||
return this.length_;
|
return this.length_;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (browser.IS_IE8) {
|
|
||||||
return list;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -3,8 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
import TrackList from './track-list';
|
import TrackList from './track-list';
|
||||||
import * as Fn from '../utils/fn.js';
|
import * as Fn from '../utils/fn.js';
|
||||||
import * as browser from '../utils/browser.js';
|
|
||||||
import document from 'global/document';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The current list of {@link TextTrack} for a media file.
|
* The current list of {@link TextTrack} for a media file.
|
||||||
@ -14,35 +12,6 @@ import document from 'global/document';
|
|||||||
*/
|
*/
|
||||||
class TextTrackList extends TrackList {
|
class TextTrackList extends TrackList {
|
||||||
|
|
||||||
/**
|
|
||||||
* Create an instance of this class.
|
|
||||||
*
|
|
||||||
* @param {TextTrack[]} [tracks=[]]
|
|
||||||
* A list of `TextTrack` to instantiate the list with.
|
|
||||||
*/
|
|
||||||
constructor(tracks = []) {
|
|
||||||
let list;
|
|
||||||
|
|
||||||
// IE8 forces us to implement inheritance ourselves
|
|
||||||
// as it does not support Object.defineProperty properly
|
|
||||||
if (browser.IS_IE8) {
|
|
||||||
list = document.createElement('custom');
|
|
||||||
for (const prop in TrackList.prototype) {
|
|
||||||
if (prop !== 'constructor') {
|
|
||||||
list[prop] = TrackList.prototype[prop];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (const prop in TextTrackList.prototype) {
|
|
||||||
if (prop !== 'constructor') {
|
|
||||||
list[prop] = TextTrackList.prototype[prop];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
list = super(tracks, list);
|
|
||||||
return list;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add a {@link TextTrack} to the `TextTrackList`
|
* Add a {@link TextTrack} to the `TextTrackList`
|
||||||
*
|
*
|
||||||
|
|||||||
@ -10,7 +10,6 @@ import Track from './track.js';
|
|||||||
import { isCrossOrigin } from '../utils/url.js';
|
import { isCrossOrigin } from '../utils/url.js';
|
||||||
import XHR from 'xhr';
|
import XHR from 'xhr';
|
||||||
import merge from '../utils/merge-options';
|
import merge from '../utils/merge-options';
|
||||||
import * as browser from '../utils/browser.js';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Takes a webvtt file contents and parses it into cues
|
* Takes a webvtt file contents and parses it into cues
|
||||||
@ -163,27 +162,17 @@ class TextTrack extends Track {
|
|||||||
if (settings.kind === 'metadata' || settings.kind === 'chapters') {
|
if (settings.kind === 'metadata' || settings.kind === 'chapters') {
|
||||||
mode = 'hidden';
|
mode = 'hidden';
|
||||||
}
|
}
|
||||||
// on IE8 this will be a document element
|
super(settings);
|
||||||
// for every other browser this will be a normal object
|
|
||||||
const tt = super(settings);
|
|
||||||
|
|
||||||
tt.tech_ = settings.tech;
|
this.tech_ = settings.tech;
|
||||||
|
|
||||||
if (browser.IS_IE8) {
|
this.cues_ = [];
|
||||||
for (const prop in TextTrack.prototype) {
|
this.activeCues_ = [];
|
||||||
if (prop !== 'constructor') {
|
|
||||||
tt[prop] = TextTrack.prototype[prop];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tt.cues_ = [];
|
const cues = new TextTrackCueList(this.cues_);
|
||||||
tt.activeCues_ = [];
|
const activeCues = new TextTrackCueList(this.activeCues_);
|
||||||
|
|
||||||
const cues = new TextTrackCueList(tt.cues_);
|
|
||||||
const activeCues = new TextTrackCueList(tt.activeCues_);
|
|
||||||
let changed = false;
|
let changed = false;
|
||||||
const timeupdateHandler = Fn.bind(tt, function() {
|
const timeupdateHandler = Fn.bind(this, function() {
|
||||||
|
|
||||||
// Accessing this.activeCues for the side-effects of updating itself
|
// Accessing this.activeCues for the side-effects of updating itself
|
||||||
// due to it's nature as a getter function. Do not remove or cues will
|
// due to it's nature as a getter function. Do not remove or cues will
|
||||||
@ -198,142 +187,142 @@ class TextTrack extends Track {
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (mode !== 'disabled') {
|
if (mode !== 'disabled') {
|
||||||
tt.tech_.ready(() => {
|
this.tech_.ready(() => {
|
||||||
tt.tech_.on('timeupdate', timeupdateHandler);
|
this.tech_.on('timeupdate', timeupdateHandler);
|
||||||
}, true);
|
}, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
Object.defineProperties(this, {
|
||||||
* @memberof TextTrack
|
/**
|
||||||
* @member {boolean} default
|
* @memberof TextTrack
|
||||||
* If this track was set to be on or off by default. Cannot be changed after
|
* @member {boolean} default
|
||||||
* creation.
|
* If this track was set to be on or off by default. Cannot be changed after
|
||||||
* @instance
|
* creation.
|
||||||
*
|
* @instance
|
||||||
* @readonly
|
*
|
||||||
*/
|
* @readonly
|
||||||
Object.defineProperty(tt, 'default', {
|
*/
|
||||||
get() {
|
default: {
|
||||||
return default_;
|
get() {
|
||||||
|
return default_;
|
||||||
|
},
|
||||||
|
set() {}
|
||||||
},
|
},
|
||||||
set() {}
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @memberof TextTrack
|
* @memberof TextTrack
|
||||||
* @member {string} mode
|
* @member {string} mode
|
||||||
* Set the mode of this TextTrack to a valid {@link TextTrack~Mode}. Will
|
* Set the mode of this TextTrack to a valid {@link TextTrack~Mode}. Will
|
||||||
* not be set if setting to an invalid mode.
|
* not be set if setting to an invalid mode.
|
||||||
* @instance
|
* @instance
|
||||||
*
|
*
|
||||||
* @fires TextTrack#modechange
|
* @fires TextTrack#modechange
|
||||||
*/
|
*/
|
||||||
Object.defineProperty(tt, 'mode', {
|
mode: {
|
||||||
get() {
|
get() {
|
||||||
return mode;
|
return mode;
|
||||||
|
},
|
||||||
|
set(newMode) {
|
||||||
|
if (!TextTrackMode[newMode]) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
mode = newMode;
|
||||||
|
if (mode === 'showing') {
|
||||||
|
|
||||||
|
this.tech_.ready(() => {
|
||||||
|
this.tech_.on('timeupdate', timeupdateHandler);
|
||||||
|
}, true);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* An event that fires when mode changes on this track. This allows
|
||||||
|
* the TextTrackList that holds this track to act accordingly.
|
||||||
|
*
|
||||||
|
* > Note: This is not part of the spec!
|
||||||
|
*
|
||||||
|
* @event TextTrack#modechange
|
||||||
|
* @type {EventTarget~Event}
|
||||||
|
*/
|
||||||
|
this.trigger('modechange');
|
||||||
|
|
||||||
|
}
|
||||||
},
|
},
|
||||||
set(newMode) {
|
|
||||||
if (!TextTrackMode[newMode]) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
mode = newMode;
|
|
||||||
if (mode === 'showing') {
|
|
||||||
|
|
||||||
this.tech_.ready(() => {
|
/**
|
||||||
this.tech_.on('timeupdate', timeupdateHandler);
|
* @memberof TextTrack
|
||||||
}, true);
|
* @member {TextTrackCueList} cues
|
||||||
}
|
* The text track cue list for this TextTrack.
|
||||||
/**
|
* @instance
|
||||||
* An event that fires when mode changes on this track. This allows
|
*/
|
||||||
* the TextTrackList that holds this track to act accordingly.
|
cues: {
|
||||||
*
|
get() {
|
||||||
* > Note: This is not part of the spec!
|
if (!this.loaded_) {
|
||||||
*
|
return null;
|
||||||
* @event TextTrack#modechange
|
}
|
||||||
* @type {EventTarget~Event}
|
|
||||||
*/
|
|
||||||
this.trigger('modechange');
|
|
||||||
|
|
||||||
|
return cues;
|
||||||
|
},
|
||||||
|
set() {}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @memberof TextTrack
|
||||||
|
* @member {TextTrackCueList} activeCues
|
||||||
|
* The list text track cues that are currently active for this TextTrack.
|
||||||
|
* @instance
|
||||||
|
*/
|
||||||
|
activeCues: {
|
||||||
|
get() {
|
||||||
|
if (!this.loaded_) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// nothing to do
|
||||||
|
if (this.cues.length === 0) {
|
||||||
|
return activeCues;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ct = this.tech_.currentTime();
|
||||||
|
const active = [];
|
||||||
|
|
||||||
|
for (let i = 0, l = this.cues.length; i < l; i++) {
|
||||||
|
const cue = this.cues[i];
|
||||||
|
|
||||||
|
if (cue.startTime <= ct && cue.endTime >= ct) {
|
||||||
|
active.push(cue);
|
||||||
|
} else if (cue.startTime === cue.endTime &&
|
||||||
|
cue.startTime <= ct &&
|
||||||
|
cue.startTime + 0.5 >= ct) {
|
||||||
|
active.push(cue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
changed = false;
|
||||||
|
|
||||||
|
if (active.length !== this.activeCues_.length) {
|
||||||
|
changed = true;
|
||||||
|
} else {
|
||||||
|
for (let i = 0; i < active.length; i++) {
|
||||||
|
if (this.activeCues_.indexOf(active[i]) === -1) {
|
||||||
|
changed = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.activeCues_ = active;
|
||||||
|
activeCues.setCues_(this.activeCues_);
|
||||||
|
|
||||||
|
return activeCues;
|
||||||
|
},
|
||||||
|
set() {}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
|
||||||
* @memberof TextTrack
|
|
||||||
* @member {TextTrackCueList} cues
|
|
||||||
* The text track cue list for this TextTrack.
|
|
||||||
* @instance
|
|
||||||
*/
|
|
||||||
Object.defineProperty(tt, 'cues', {
|
|
||||||
get() {
|
|
||||||
if (!this.loaded_) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return cues;
|
|
||||||
},
|
|
||||||
set() {}
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @memberof TextTrack
|
|
||||||
* @member {TextTrackCueList} activeCues
|
|
||||||
* The list text track cues that are currently active for this TextTrack.
|
|
||||||
* @instance
|
|
||||||
*/
|
|
||||||
Object.defineProperty(tt, 'activeCues', {
|
|
||||||
get() {
|
|
||||||
if (!this.loaded_) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// nothing to do
|
|
||||||
if (this.cues.length === 0) {
|
|
||||||
return activeCues;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ct = this.tech_.currentTime();
|
|
||||||
const active = [];
|
|
||||||
|
|
||||||
for (let i = 0, l = this.cues.length; i < l; i++) {
|
|
||||||
const cue = this.cues[i];
|
|
||||||
|
|
||||||
if (cue.startTime <= ct && cue.endTime >= ct) {
|
|
||||||
active.push(cue);
|
|
||||||
} else if (cue.startTime === cue.endTime &&
|
|
||||||
cue.startTime <= ct &&
|
|
||||||
cue.startTime + 0.5 >= ct) {
|
|
||||||
active.push(cue);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
changed = false;
|
|
||||||
|
|
||||||
if (active.length !== this.activeCues_.length) {
|
|
||||||
changed = true;
|
|
||||||
} else {
|
|
||||||
for (let i = 0; i < active.length; i++) {
|
|
||||||
if (this.activeCues_.indexOf(active[i]) === -1) {
|
|
||||||
changed = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.activeCues_ = active;
|
|
||||||
activeCues.setCues_(this.activeCues_);
|
|
||||||
|
|
||||||
return activeCues;
|
|
||||||
},
|
|
||||||
set() {}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (settings.src) {
|
if (settings.src) {
|
||||||
tt.src = settings.src;
|
this.src = settings.src;
|
||||||
loadTrack(settings.src, tt);
|
loadTrack(settings.src, this);
|
||||||
} else {
|
} else {
|
||||||
tt.loaded_ = true;
|
this.loaded_ = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
return tt;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -2,8 +2,6 @@
|
|||||||
* @file track-list.js
|
* @file track-list.js
|
||||||
*/
|
*/
|
||||||
import EventTarget from '../event-target';
|
import EventTarget from '../event-target';
|
||||||
import * as browser from '../utils/browser.js';
|
|
||||||
import document from 'global/document';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Common functionaliy between {@link TextTrackList}, {@link AudioTrackList}, and
|
* Common functionaliy between {@link TextTrackList}, {@link AudioTrackList}, and
|
||||||
@ -18,26 +16,12 @@ class TrackList extends EventTarget {
|
|||||||
* @param {Track[]} tracks
|
* @param {Track[]} tracks
|
||||||
* A list of tracks to initialize the list with.
|
* A list of tracks to initialize the list with.
|
||||||
*
|
*
|
||||||
* @param {Object} [list]
|
|
||||||
* The child object with inheritance done manually for ie8.
|
|
||||||
*
|
|
||||||
* @abstract
|
* @abstract
|
||||||
*/
|
*/
|
||||||
constructor(tracks = [], list = null) {
|
constructor(tracks = []) {
|
||||||
super();
|
super();
|
||||||
if (!list) {
|
|
||||||
list = this; // eslint-disable-line
|
|
||||||
if (browser.IS_IE8) {
|
|
||||||
list = document.createElement('custom');
|
|
||||||
for (const prop in TrackList.prototype) {
|
|
||||||
if (prop !== 'constructor') {
|
|
||||||
list[prop] = TrackList.prototype[prop];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
list.tracks_ = [];
|
this.tracks_ = [];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @memberof TrackList
|
* @memberof TrackList
|
||||||
@ -45,19 +29,15 @@ class TrackList extends EventTarget {
|
|||||||
* The current number of `Track`s in the this Trackist.
|
* The current number of `Track`s in the this Trackist.
|
||||||
* @instance
|
* @instance
|
||||||
*/
|
*/
|
||||||
Object.defineProperty(list, 'length', {
|
Object.defineProperty(this, 'length', {
|
||||||
get() {
|
get() {
|
||||||
return this.tracks_.length;
|
return this.tracks_.length;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
for (let i = 0; i < tracks.length; i++) {
|
for (let i = 0; i < tracks.length; i++) {
|
||||||
list.addTrack(tracks[i]);
|
this.addTrack(tracks[i]);
|
||||||
}
|
}
|
||||||
|
|
||||||
// must return the object, as for ie8 it will not be this
|
|
||||||
// but a reference to a document object
|
|
||||||
return list;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -1,8 +1,6 @@
|
|||||||
/**
|
/**
|
||||||
* @file track.js
|
* @file track.js
|
||||||
*/
|
*/
|
||||||
import * as browser from '../utils/browser.js';
|
|
||||||
import document from 'global/document';
|
|
||||||
import * as Guid from '../utils/guid.js';
|
import * as Guid from '../utils/guid.js';
|
||||||
import EventTarget from '../event-target';
|
import EventTarget from '../event-target';
|
||||||
|
|
||||||
@ -41,17 +39,6 @@ class Track extends EventTarget {
|
|||||||
constructor(options = {}) {
|
constructor(options = {}) {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
let track = this; // eslint-disable-line
|
|
||||||
|
|
||||||
if (browser.IS_IE8) {
|
|
||||||
track = document.createElement('custom');
|
|
||||||
for (const prop in Track.prototype) {
|
|
||||||
if (prop !== 'constructor') {
|
|
||||||
track[prop] = Track.prototype[prop];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const trackProps = {
|
const trackProps = {
|
||||||
id: options.id || 'vjs_track_' + Guid.newGUID(),
|
id: options.id || 'vjs_track_' + Guid.newGUID(),
|
||||||
kind: options.kind || '',
|
kind: options.kind || '',
|
||||||
@ -97,15 +84,13 @@ class Track extends EventTarget {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
for (const key in trackProps) {
|
for (const key in trackProps) {
|
||||||
Object.defineProperty(track, key, {
|
Object.defineProperty(this, key, {
|
||||||
get() {
|
get() {
|
||||||
return trackProps[key];
|
return trackProps[key];
|
||||||
},
|
},
|
||||||
set() {}
|
set() {}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return track;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -2,8 +2,6 @@
|
|||||||
* @file video-track-list.js
|
* @file video-track-list.js
|
||||||
*/
|
*/
|
||||||
import TrackList from './track-list';
|
import TrackList from './track-list';
|
||||||
import * as browser from '../utils/browser.js';
|
|
||||||
import document from 'global/document';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Un-select all other {@link VideoTrack}s that are selected.
|
* Un-select all other {@link VideoTrack}s that are selected.
|
||||||
@ -41,8 +39,6 @@ class VideoTrackList extends TrackList {
|
|||||||
* A list of `VideoTrack` to instantiate the list with.
|
* A list of `VideoTrack` to instantiate the list with.
|
||||||
*/
|
*/
|
||||||
constructor(tracks = []) {
|
constructor(tracks = []) {
|
||||||
let list;
|
|
||||||
|
|
||||||
// make sure only 1 track is enabled
|
// make sure only 1 track is enabled
|
||||||
// sorted from last index to first index
|
// sorted from last index to first index
|
||||||
for (let i = tracks.length - 1; i >= 0; i--) {
|
for (let i = tracks.length - 1; i >= 0; i--) {
|
||||||
@ -52,30 +48,14 @@ class VideoTrackList extends TrackList {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// IE8 forces us to implement inheritance ourselves
|
super(tracks);
|
||||||
// as it does not support Object.defineProperty properly
|
this.changing_ = false;
|
||||||
if (browser.IS_IE8) {
|
|
||||||
list = document.createElement('custom');
|
|
||||||
for (const prop in TrackList.prototype) {
|
|
||||||
if (prop !== 'constructor') {
|
|
||||||
list[prop] = TrackList.prototype[prop];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (const prop in VideoTrackList.prototype) {
|
|
||||||
if (prop !== 'constructor') {
|
|
||||||
list[prop] = VideoTrackList.prototype[prop];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
list = super(tracks, list);
|
|
||||||
list.changing_ = false;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @member {number} VideoTrackList#selectedIndex
|
* @member {number} VideoTrackList#selectedIndex
|
||||||
* The current index of the selected {@link VideoTrack`}.
|
* The current index of the selected {@link VideoTrack`}.
|
||||||
*/
|
*/
|
||||||
Object.defineProperty(list, 'selectedIndex', {
|
Object.defineProperty(this, 'selectedIndex', {
|
||||||
get() {
|
get() {
|
||||||
for (let i = 0; i < this.length; i++) {
|
for (let i = 0; i < this.length; i++) {
|
||||||
if (this[i].selected) {
|
if (this[i].selected) {
|
||||||
@ -86,8 +66,6 @@ class VideoTrackList extends TrackList {
|
|||||||
},
|
},
|
||||||
set() {}
|
set() {}
|
||||||
});
|
});
|
||||||
|
|
||||||
return list;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import {VideoTrackKind} from './track-enums';
|
import {VideoTrackKind} from './track-enums';
|
||||||
import Track from './track';
|
import Track from './track';
|
||||||
import merge from '../utils/merge-options';
|
import merge from '../utils/merge-options';
|
||||||
import * as browser from '../utils/browser.js';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A representation of a single `VideoTrack`.
|
* A representation of a single `VideoTrack`.
|
||||||
@ -37,18 +36,9 @@ class VideoTrack extends Track {
|
|||||||
kind: VideoTrackKind[options.kind] || ''
|
kind: VideoTrackKind[options.kind] || ''
|
||||||
});
|
});
|
||||||
|
|
||||||
// on IE8 this will be a document element
|
super(settings);
|
||||||
// for every other browser this will be a normal object
|
|
||||||
const track = super(settings);
|
|
||||||
let selected = false;
|
|
||||||
|
|
||||||
if (browser.IS_IE8) {
|
let selected = false;
|
||||||
for (const prop in VideoTrack.prototype) {
|
|
||||||
if (prop !== 'constructor') {
|
|
||||||
track[prop] = VideoTrack.prototype[prop];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @memberof VideoTrack
|
* @memberof VideoTrack
|
||||||
@ -59,7 +49,7 @@ class VideoTrack extends Track {
|
|||||||
*
|
*
|
||||||
* @fires VideoTrack#selectedchange
|
* @fires VideoTrack#selectedchange
|
||||||
*/
|
*/
|
||||||
Object.defineProperty(track, 'selected', {
|
Object.defineProperty(this, 'selected', {
|
||||||
get() {
|
get() {
|
||||||
return selected;
|
return selected;
|
||||||
},
|
},
|
||||||
@ -88,10 +78,8 @@ class VideoTrack extends Track {
|
|||||||
// set selected to that true value otherwise
|
// set selected to that true value otherwise
|
||||||
// we keep it false
|
// we keep it false
|
||||||
if (settings.selected) {
|
if (settings.selected) {
|
||||||
track.selected = settings.selected;
|
this.selected = settings.selected;
|
||||||
}
|
}
|
||||||
|
|
||||||
return track;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -55,8 +55,6 @@ export const ANDROID_VERSION = (function() {
|
|||||||
return null;
|
return null;
|
||||||
}());
|
}());
|
||||||
|
|
||||||
// Old Android is defined as Version older than 2.3, and requiring a webkit version of the android browser
|
|
||||||
export const IS_OLD_ANDROID = IS_ANDROID && (/webkit/i).test(USER_AGENT) && ANDROID_VERSION < 2.3;
|
|
||||||
export const IS_NATIVE_ANDROID = IS_ANDROID && ANDROID_VERSION < 5 && appleWebkitVersion < 537;
|
export const IS_NATIVE_ANDROID = IS_ANDROID && ANDROID_VERSION < 5 && appleWebkitVersion < 537;
|
||||||
|
|
||||||
export const IS_FIREFOX = (/Firefox/i).test(USER_AGENT);
|
export const IS_FIREFOX = (/Firefox/i).test(USER_AGENT);
|
||||||
@ -70,7 +68,6 @@ export const CHROME_VERSION = (function() {
|
|||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
}());
|
}());
|
||||||
export const IS_IE8 = (/MSIE\s8\.0/).test(USER_AGENT);
|
|
||||||
export const IE_VERSION = (function() {
|
export const IE_VERSION = (function() {
|
||||||
const result = (/MSIE\s(\d+)\.\d/).exec(USER_AGENT);
|
const result = (/MSIE\s(\d+)\.\d/).exec(USER_AGENT);
|
||||||
let version = result && parseFloat(result[1]);
|
let version = result && parseFloat(result[1]);
|
||||||
@ -90,7 +87,3 @@ export const TOUCH_ENABLED = Dom.isReal() && (
|
|||||||
'ontouchstart' in window ||
|
'ontouchstart' in window ||
|
||||||
window.DocumentTouch &&
|
window.DocumentTouch &&
|
||||||
window.document instanceof window.DocumentTouch);
|
window.document instanceof window.DocumentTouch);
|
||||||
|
|
||||||
export const BACKGROUND_SIZE_SUPPORTED = (
|
|
||||||
Dom.isReal() &&
|
|
||||||
'backgroundSize' in window.document.createElement('video').style);
|
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
import window from 'global/window';
|
import window from 'global/window';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A safe getComputedStyle with an IE8 fallback.
|
* A safe getComputedStyle.
|
||||||
*
|
*
|
||||||
* This is needed because in Firefox, if the player is loaded in an iframe with
|
* This is needed because in Firefox, if the player is loaded in an iframe with
|
||||||
* `display:none`, then `getComputedStyle` returns `null`, so, we do a null-check to
|
* `display:none`, then `getComputedStyle` returns `null`, so, we do a null-check to
|
||||||
@ -33,5 +33,5 @@ export default function computedStyle(el, prop) {
|
|||||||
return cs ? cs[prop] : '';
|
return cs ? cs[prop] : '';
|
||||||
}
|
}
|
||||||
|
|
||||||
return el.currentStyle[prop] || '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,7 +8,6 @@ import log from './log.js';
|
|||||||
import tsml from 'tsml';
|
import tsml from 'tsml';
|
||||||
import {isObject} from './obj';
|
import {isObject} from './obj';
|
||||||
import computedStyle from './computed-style';
|
import computedStyle from './computed-style';
|
||||||
import * as browser from './browser';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Detect if a value is a string with any non-whitespace characters.
|
* Detect if a value is a string with any non-whitespace characters.
|
||||||
@ -62,14 +61,8 @@ function classRegExp(className) {
|
|||||||
* @return {Boolean}
|
* @return {Boolean}
|
||||||
*/
|
*/
|
||||||
export function isReal() {
|
export function isReal() {
|
||||||
return (
|
|
||||||
|
|
||||||
// Both document and window will never be undefined thanks to `global`.
|
// Both document and window will never be undefined thanks to `global`.
|
||||||
document === window.document &&
|
return document === window.document;
|
||||||
|
|
||||||
// In IE < 9, DOM methods return "object" as their type, so all we can
|
|
||||||
// confidently check is that it exists.
|
|
||||||
typeof document.createElement !== 'undefined');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -326,7 +319,7 @@ export function removeClass(element, classToRemove) {
|
|||||||
*/
|
*/
|
||||||
export function toggleClass(element, classToToggle, predicate) {
|
export function toggleClass(element, classToToggle, predicate) {
|
||||||
|
|
||||||
// This CANNOT use `classList` internally because IE does not support the
|
// This CANNOT use `classList` internally because IE11 does not support the
|
||||||
// second parameter to the `classList.toggle()` method! Which is fine because
|
// second parameter to the `classList.toggle()` method! Which is fine because
|
||||||
// `classList` will be used by the add/remove functions.
|
// `classList` will be used by the add/remove functions.
|
||||||
const has = hasClass(element, classToToggle);
|
const has = hasClass(element, classToToggle);
|
||||||
@ -391,8 +384,8 @@ export function getAttributes(tag) {
|
|||||||
const obj = {};
|
const obj = {};
|
||||||
|
|
||||||
// known boolean attributes
|
// known boolean attributes
|
||||||
// we can check for matching boolean properties, but older browsers
|
// we can check for matching boolean properties, but not all browsers
|
||||||
// won't know about HTML5 boolean attributes that we still read from
|
// and not all tags know about these attributes, so, we still want to check them manually
|
||||||
const knownBooleans = ',' + 'autoplay,controls,playsinline,loop,muted,default,defaultMuted' + ',';
|
const knownBooleans = ',' + 'autoplay,controls,playsinline,loop,muted,default,defaultMuted' + ',';
|
||||||
|
|
||||||
if (tag && tag.attributes && tag.attributes.length > 0) {
|
if (tag && tag.attributes && tag.attributes.length > 0) {
|
||||||
@ -783,12 +776,6 @@ export function isSingleLeftClick(event) {
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (browser.IE_VERSION === 9) {
|
|
||||||
// Ignore IE9
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.button !== 0 || event.buttons !== 1) {
|
if (event.button !== 0 || event.buttons !== 1) {
|
||||||
// This is the reason we have those if else block above
|
// This is the reason we have those if else block above
|
||||||
// if any special case we can catch and let it slide
|
// if any special case we can catch and let it slide
|
||||||
|
|||||||
@ -3,8 +3,6 @@
|
|||||||
* @module log
|
* @module log
|
||||||
*/
|
*/
|
||||||
import window from 'global/window';
|
import window from 'global/window';
|
||||||
import {IE_VERSION} from './browser';
|
|
||||||
import {isObject} from './obj';
|
|
||||||
|
|
||||||
let log;
|
let log;
|
||||||
|
|
||||||
@ -23,12 +21,8 @@ let history = [];
|
|||||||
*
|
*
|
||||||
* @param {Array} args
|
* @param {Array} args
|
||||||
* The arguments to be passed to the matching console method.
|
* 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) => {
|
export const logByType = (type, args) => {
|
||||||
const lvl = log.levels[level];
|
const lvl = log.levels[level];
|
||||||
const lvlRegExp = new RegExp(`^(${lvl})$`);
|
const lvlRegExp = new RegExp(`^(${lvl})$`);
|
||||||
|
|
||||||
@ -69,31 +63,7 @@ export const logByType = (type, args, stringify = !!IE_VERSION && IE_VERSION < 1
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// IEs previous to 11 log objects uselessly as "[object Object]"; so, JSONify
|
fn[Array.isArray(args) ? 'apply' : 'call'](window.console, args);
|
||||||
// objects and arrays for those less-capable browsers.
|
|
||||||
if (stringify) {
|
|
||||||
args = args.map(a => {
|
|
||||||
if (isObject(a) || Array.isArray(a)) {
|
|
||||||
try {
|
|
||||||
return JSON.stringify(a);
|
|
||||||
} catch (x) {
|
|
||||||
return String(a);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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'](window.console, args);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -33,14 +33,6 @@ import xhr from 'xhr';
|
|||||||
import Tech from './tech/tech.js';
|
import Tech from './tech/tech.js';
|
||||||
import { use as middlewareUse, TERMINATOR } from './tech/middleware.js';
|
import { use as middlewareUse, TERMINATOR } from './tech/middleware.js';
|
||||||
|
|
||||||
// HTML5 Element Shim for IE8
|
|
||||||
if (typeof HTMLVideoElement === 'undefined' && Dom.isReal()) {
|
|
||||||
document.createElement('video');
|
|
||||||
document.createElement('audio');
|
|
||||||
document.createElement('track');
|
|
||||||
document.createElement('video-js');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Normalize an `id` value by trimming off a leading `#`
|
* Normalize an `id` value by trimming off a leading `#`
|
||||||
*
|
*
|
||||||
@ -381,22 +373,17 @@ videojs.use = middlewareUse;
|
|||||||
* @memberOf {videojs}
|
* @memberOf {videojs}
|
||||||
* @property {object} middleware.TERMINATOR
|
* @property {object} middleware.TERMINATOR
|
||||||
*/
|
*/
|
||||||
// Object.defineProperty is not available in IE8
|
Object.defineProperty(videojs, 'middleware', {
|
||||||
if (!browser.IS_IE8 && Object.defineProperty) {
|
value: {},
|
||||||
Object.defineProperty(videojs, 'middleware', {
|
writeable: false,
|
||||||
value: {},
|
enumerable: true
|
||||||
writeable: false,
|
});
|
||||||
enumerable: true
|
|
||||||
});
|
|
||||||
|
|
||||||
Object.defineProperty(videojs.middleware, 'TERMINATOR', {
|
Object.defineProperty(videojs.middleware, 'TERMINATOR', {
|
||||||
value: TERMINATOR,
|
value: TERMINATOR,
|
||||||
writeable: false,
|
writeable: false,
|
||||||
enumerable: true
|
enumerable: true
|
||||||
});
|
});
|
||||||
} else {
|
|
||||||
videojs.middleware = { TERMINATOR };
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A suite of browser and device tests from {@link browser}.
|
* A suite of browser and device tests from {@link browser}.
|
||||||
@ -820,7 +807,7 @@ videojs.VideoTrack = VideoTrack;
|
|||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A safe getComputedStyle with an IE8 fallback.
|
* A safe getComputedStyle.
|
||||||
*
|
*
|
||||||
* This is because in Firefox, if the player is loaded in an iframe with `display:none`,
|
* This is because in Firefox, if the player is loaded in an iframe with `display:none`,
|
||||||
* then `getComputedStyle` returns `null`, so, we do a null-check to make sure
|
* then `getComputedStyle` returns `null`, so, we do a null-check to make sure
|
||||||
|
|||||||
@ -9,7 +9,6 @@
|
|||||||
<body>
|
<body>
|
||||||
<div id="qunit"></div>
|
<div id="qunit"></div>
|
||||||
<script src="../node_modules/qunitjs/qunit/qunit.js"></script>
|
<script src="../node_modules/qunitjs/qunit/qunit.js"></script>
|
||||||
<script src="../build/temp/ie8/videojs-ie8.js"></script>
|
|
||||||
|
|
||||||
<!-- Execute the bundled tests first -->
|
<!-- Execute the bundled tests first -->
|
||||||
<script src="../build/temp/tests.js"></script>
|
<script src="../build/temp/tests.js"></script>
|
||||||
|
|||||||
@ -20,7 +20,6 @@ module.exports = function(config) {
|
|||||||
// Compling tests here
|
// Compling tests here
|
||||||
files: [
|
files: [
|
||||||
'../build/temp/video-js.css',
|
'../build/temp/video-js.css',
|
||||||
'../build/temp/ie8/videojs-ie8.js',
|
|
||||||
'../test/globals-shim.js',
|
'../test/globals-shim.js',
|
||||||
'../test/unit/**/*.js',
|
'../test/unit/**/*.js',
|
||||||
'../build/temp/browserify.js',
|
'../build/temp/browserify.js',
|
||||||
|
|||||||
@ -7,7 +7,6 @@ import Slider from '../../src/js/slider/slider.js';
|
|||||||
import FullscreenToggle from '../../src/js/control-bar/fullscreen-toggle.js';
|
import FullscreenToggle from '../../src/js/control-bar/fullscreen-toggle.js';
|
||||||
import TestHelpers from './test-helpers.js';
|
import TestHelpers from './test-helpers.js';
|
||||||
import document from 'global/document';
|
import document from 'global/document';
|
||||||
import Html5 from '../../src/js/tech/html5.js';
|
|
||||||
import sinon from 'sinon';
|
import sinon from 'sinon';
|
||||||
|
|
||||||
QUnit.module('Controls', {
|
QUnit.module('Controls', {
|
||||||
@ -111,107 +110,102 @@ QUnit.test('Fullscreen control text should be correct when fullscreenchange is t
|
|||||||
player.dispose();
|
player.dispose();
|
||||||
});
|
});
|
||||||
|
|
||||||
// only run these tests if Html5 is supported.
|
QUnit.test('Clicking MuteToggle when volume is above 0 should toggle muted property and not change volume', function(assert) {
|
||||||
// IE8 can't run the Html5 tech and to test this functionality otherwith the the tech faker,
|
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
||||||
// we'd need to implement volume functionality into tech faker
|
const muteToggle = new MuteToggle(player);
|
||||||
if (Html5.isSupported()) {
|
|
||||||
QUnit.test('Clicking MuteToggle when volume is above 0 should toggle muted property and not change volume', function(assert) {
|
|
||||||
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
|
||||||
const muteToggle = new MuteToggle(player);
|
|
||||||
|
|
||||||
assert.equal(player.volume(), 1, 'volume is above 0');
|
assert.equal(player.volume(), 1, 'volume is above 0');
|
||||||
assert.equal(player.muted(), false, 'player is not muted');
|
assert.equal(player.muted(), false, 'player is not muted');
|
||||||
|
|
||||||
muteToggle.handleClick();
|
muteToggle.handleClick();
|
||||||
|
|
||||||
assert.equal(player.volume(), 1, 'volume is same');
|
assert.equal(player.volume(), 1, 'volume is same');
|
||||||
assert.equal(player.muted(), true, 'player is muted');
|
assert.equal(player.muted(), true, 'player is muted');
|
||||||
|
|
||||||
player.dispose();
|
player.dispose();
|
||||||
});
|
});
|
||||||
|
|
||||||
QUnit.test('Clicking MuteToggle when volume is 0 and muted is false should set volume to lastVolume and keep muted false', function(assert) {
|
QUnit.test('Clicking MuteToggle when volume is 0 and muted is false should set volume to lastVolume and keep muted false', function(assert) {
|
||||||
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
||||||
const muteToggle = new MuteToggle(player);
|
const muteToggle = new MuteToggle(player);
|
||||||
|
|
||||||
player.volume(0);
|
player.volume(0);
|
||||||
assert.equal(player.lastVolume_(), 1, 'lastVolume is set');
|
assert.equal(player.lastVolume_(), 1, 'lastVolume is set');
|
||||||
assert.equal(player.muted(), false, 'player is muted');
|
assert.equal(player.muted(), false, 'player is muted');
|
||||||
|
|
||||||
muteToggle.handleClick();
|
muteToggle.handleClick();
|
||||||
|
|
||||||
assert.equal(player.volume(), 1, 'volume is set to lastVolume');
|
assert.equal(player.volume(), 1, 'volume is set to lastVolume');
|
||||||
assert.equal(player.muted(), false, 'muted remains false');
|
assert.equal(player.muted(), false, 'muted remains false');
|
||||||
|
|
||||||
player.dispose();
|
player.dispose();
|
||||||
});
|
});
|
||||||
|
|
||||||
QUnit.test('Clicking MuteToggle when volume is 0 and muted is true should set volume to lastVolume and sets muted to false', function(assert) {
|
QUnit.test('Clicking MuteToggle when volume is 0 and muted is true should set volume to lastVolume and sets muted to false', function(assert) {
|
||||||
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
||||||
const muteToggle = new MuteToggle(player);
|
const muteToggle = new MuteToggle(player);
|
||||||
|
|
||||||
player.volume(0);
|
player.volume(0);
|
||||||
player.muted(true);
|
player.muted(true);
|
||||||
player.lastVolume_(0.5);
|
player.lastVolume_(0.5);
|
||||||
|
|
||||||
muteToggle.handleClick();
|
muteToggle.handleClick();
|
||||||
|
|
||||||
assert.equal(player.volume(), 0.5, 'volume is set to lastVolume');
|
assert.equal(player.volume(), 0.5, 'volume is set to lastVolume');
|
||||||
assert.equal(player.muted(), false, 'muted is set to false');
|
assert.equal(player.muted(), false, 'muted is set to false');
|
||||||
|
|
||||||
player.dispose();
|
player.dispose();
|
||||||
});
|
});
|
||||||
|
|
||||||
QUnit.test('Clicking MuteToggle when volume is 0, lastVolume is less than 0.1, and muted is true sets volume to 0.1 and muted to false', function(assert) {
|
QUnit.test('Clicking MuteToggle when volume is 0, lastVolume is less than 0.1, and muted is true sets volume to 0.1 and muted to false', function(assert) {
|
||||||
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
||||||
const muteToggle = new MuteToggle(player);
|
const muteToggle = new MuteToggle(player);
|
||||||
|
|
||||||
player.volume(0);
|
player.volume(0);
|
||||||
player.muted(true);
|
player.muted(true);
|
||||||
player.lastVolume_(0.05);
|
player.lastVolume_(0.05);
|
||||||
|
|
||||||
muteToggle.handleClick();
|
muteToggle.handleClick();
|
||||||
|
|
||||||
// `Number.prototype.toFixed()` is used here to circumvent IE9 rounding issues
|
// `Number.prototype.toFixed()` is used here to circumvent rounding issues
|
||||||
assert.equal(player.volume().toFixed(1), (0.1).toFixed(1), 'since lastVolume is less than 0.1, volume is set to 0.1');
|
assert.equal(player.volume().toFixed(1), (0.1).toFixed(1), 'since lastVolume is less than 0.1, volume is set to 0.1');
|
||||||
assert.equal(player.muted(), false, 'muted is set to false');
|
assert.equal(player.muted(), false, 'muted is set to false');
|
||||||
|
|
||||||
player.dispose();
|
player.dispose();
|
||||||
});
|
});
|
||||||
|
|
||||||
QUnit.test('ARIA value of VolumeBar should start at 100', function(assert) {
|
QUnit.test('ARIA value of VolumeBar should start at 100', function(assert) {
|
||||||
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
||||||
const volumeBar = new VolumeBar(player);
|
const volumeBar = new VolumeBar(player);
|
||||||
|
|
||||||
this.clock.tick(1);
|
this.clock.tick(1);
|
||||||
|
|
||||||
assert.equal(volumeBar.el_.getAttribute('aria-valuenow'), 100, 'ARIA value of VolumeBar is 100');
|
assert.equal(volumeBar.el_.getAttribute('aria-valuenow'), 100, 'ARIA value of VolumeBar is 100');
|
||||||
|
|
||||||
player.dispose();
|
player.dispose();
|
||||||
});
|
});
|
||||||
|
|
||||||
QUnit.test('Muting with MuteToggle should set ARIA value of VolumeBar to 0', function(assert) {
|
QUnit.test('Muting with MuteToggle should set ARIA value of VolumeBar to 0', function(assert) {
|
||||||
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
||||||
const volumeBar = new VolumeBar(player);
|
const volumeBar = new VolumeBar(player);
|
||||||
const muteToggle = new MuteToggle(player);
|
const muteToggle = new MuteToggle(player);
|
||||||
|
|
||||||
this.clock.tick(1);
|
this.clock.tick(1);
|
||||||
|
|
||||||
assert.equal(player.volume(), 1, 'Volume is 1');
|
assert.equal(player.volume(), 1, 'Volume is 1');
|
||||||
assert.equal(player.muted(), false, 'Muted is false');
|
assert.equal(player.muted(), false, 'Muted is false');
|
||||||
assert.equal(volumeBar.el_.getAttribute('aria-valuenow'), 100, 'ARIA value of VolumeBar is 100');
|
assert.equal(volumeBar.el_.getAttribute('aria-valuenow'), 100, 'ARIA value of VolumeBar is 100');
|
||||||
|
|
||||||
muteToggle.handleClick();
|
muteToggle.handleClick();
|
||||||
|
|
||||||
// Because `volumechange` is triggered asynchronously, it doesn't end up
|
// Because `volumechange` is triggered asynchronously, it doesn't end up
|
||||||
// getting fired on `player` in the test environment, so we run it
|
// getting fired on `player` in the test environment, so we run it
|
||||||
// manually.
|
// manually.
|
||||||
player.trigger('volumechange');
|
player.trigger('volumechange');
|
||||||
|
|
||||||
assert.equal(player.volume(), 1, 'Volume remains 1');
|
assert.equal(player.volume(), 1, 'Volume remains 1');
|
||||||
assert.equal(player.muted(), true, 'Muted is true');
|
assert.equal(player.muted(), true, 'Muted is true');
|
||||||
assert.equal(volumeBar.el_.getAttribute('aria-valuenow'), 0, 'ARIA value of VolumeBar is 0');
|
assert.equal(volumeBar.el_.getAttribute('aria-valuenow'), 0, 'ARIA value of VolumeBar is 0');
|
||||||
|
|
||||||
player.dispose();
|
player.dispose();
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|||||||
@ -344,7 +344,7 @@ QUnit.test('should default to 16:9 when fluid', function(assert) {
|
|||||||
const player = TestHelpers.makePlayer({fluid: true});
|
const player = TestHelpers.makePlayer({fluid: true});
|
||||||
const ratio = player.currentHeight() / player.currentWidth();
|
const ratio = player.currentHeight() / player.currentWidth();
|
||||||
|
|
||||||
// IE8 rounds 0.5625 up to 0.563
|
// account for some rounding of 0.5625 up to 0.563
|
||||||
assert.ok(((ratio >= 0.562) && (ratio <= 0.563)), 'fluid player without dimensions defaults to 16:9');
|
assert.ok(((ratio >= 0.562) && (ratio <= 0.563)), 'fluid player without dimensions defaults to 16:9');
|
||||||
|
|
||||||
player.dispose();
|
player.dispose();
|
||||||
|
|||||||
@ -49,25 +49,6 @@ QUnit.test('should create and update a poster image', function(assert) {
|
|||||||
posterImage.dispose();
|
posterImage.dispose();
|
||||||
});
|
});
|
||||||
|
|
||||||
QUnit.test('should create and update a fallback image in older browsers', function(assert) {
|
|
||||||
browser.BACKGROUND_SIZE_SUPPORTED = false;
|
|
||||||
|
|
||||||
const posterImage = new PosterImage(this.mockPlayer);
|
|
||||||
|
|
||||||
assert.notEqual(posterImage.fallbackImg_.src.indexOf(this.poster1),
|
|
||||||
-1,
|
|
||||||
'Fallback image created');
|
|
||||||
|
|
||||||
// Update with a new poster source and check the new value
|
|
||||||
this.mockPlayer.poster_ = this.poster2;
|
|
||||||
this.mockPlayer.trigger('posterchange');
|
|
||||||
assert.notEqual(posterImage.fallbackImg_.src.indexOf(this.poster2),
|
|
||||||
-1,
|
|
||||||
'Fallback image updated');
|
|
||||||
|
|
||||||
posterImage.dispose();
|
|
||||||
});
|
|
||||||
|
|
||||||
QUnit.test('should remove itself from the document flow when there is no poster', function(assert) {
|
QUnit.test('should remove itself from the document flow when there is no poster', function(assert) {
|
||||||
const posterImage = new PosterImage(this.mockPlayer);
|
const posterImage = new PosterImage(this.mockPlayer);
|
||||||
|
|
||||||
|
|||||||
@ -1,102 +1,97 @@
|
|||||||
/* eslint-env qunit */
|
/* eslint-env qunit */
|
||||||
import ResizeManager from '../../src/js/resize-manager.js';
|
import ResizeManager from '../../src/js/resize-manager.js';
|
||||||
import TestHelpers from './test-helpers.js';
|
import TestHelpers from './test-helpers.js';
|
||||||
import * as browser from '../../src/js/utils/browser.js';
|
|
||||||
import sinon from 'sinon';
|
import sinon from 'sinon';
|
||||||
|
|
||||||
if (!browser.IS_IE8) {
|
QUnit.module('ResizeManager', {
|
||||||
|
beforeEach() {
|
||||||
|
this.clock = sinon.useFakeTimers();
|
||||||
|
this.player = TestHelpers.makePlayer();
|
||||||
|
},
|
||||||
|
afterEach() {
|
||||||
|
this.player.dispose();
|
||||||
|
this.clock.restore();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
QUnit.module('ResizeManager', {
|
QUnit.test('ResizeManager creates an iframe if ResizeObserver is not available', function(assert) {
|
||||||
beforeEach() {
|
const rm = new ResizeManager(this.player, {ResizeObserver: null});
|
||||||
this.clock = sinon.useFakeTimers();
|
|
||||||
this.player = TestHelpers.makePlayer();
|
|
||||||
},
|
|
||||||
afterEach() {
|
|
||||||
this.player.dispose();
|
|
||||||
this.clock.restore();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
QUnit.test('ResizeManager creates an iframe if ResizeObserver is not available', function(assert) {
|
assert.equal(rm.el().tagName.toLowerCase(), 'iframe', 'we got an iframe');
|
||||||
const rm = new ResizeManager(this.player, {ResizeObserver: null});
|
|
||||||
|
|
||||||
assert.equal(rm.el().tagName.toLowerCase(), 'iframe', 'we got an iframe');
|
rm.dispose();
|
||||||
|
});
|
||||||
|
|
||||||
rm.dispose();
|
QUnit.test('ResizeManager uses the ResizeObserver, if given', function(assert) {
|
||||||
});
|
let roCreated = false;
|
||||||
|
let observeCalled = false;
|
||||||
|
let unobserveCalled = false;
|
||||||
|
let disconnectCalled = false;
|
||||||
|
let sameEl = false;
|
||||||
|
|
||||||
QUnit.test('ResizeManager uses the ResizeObserver, if given', function(assert) {
|
class MyResizeObserver {
|
||||||
let roCreated = false;
|
constructor(fn) {
|
||||||
let observeCalled = false;
|
roCreated = true;
|
||||||
let unobserveCalled = false;
|
|
||||||
let disconnectCalled = false;
|
|
||||||
let sameEl = false;
|
|
||||||
|
|
||||||
class MyResizeObserver {
|
|
||||||
constructor(fn) {
|
|
||||||
roCreated = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
observe(el) {
|
|
||||||
observeCalled = true;
|
|
||||||
this.el = el;
|
|
||||||
}
|
|
||||||
|
|
||||||
unobserve(el) {
|
|
||||||
unobserveCalled = true;
|
|
||||||
sameEl = this.el === el;
|
|
||||||
}
|
|
||||||
|
|
||||||
disconnect() {
|
|
||||||
disconnectCalled = true;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const rm = new ResizeManager(this.player, {ResizeObserver: MyResizeObserver});
|
observe(el) {
|
||||||
|
observeCalled = true;
|
||||||
assert.ok(roCreated, 'we intantiated the RO that was passed');
|
this.el = el;
|
||||||
assert.ok(observeCalled, 'we observed the RO');
|
|
||||||
assert.equal(rm.resizeObserver_.el, this.player.el(), 'we observed the player el');
|
|
||||||
|
|
||||||
rm.dispose();
|
|
||||||
|
|
||||||
assert.ok(unobserveCalled, 'we unobserve when disposed');
|
|
||||||
assert.ok(sameEl, 'we unobserve the same el as we observed');
|
|
||||||
assert.ok(disconnectCalled, 'we disconnected when disposed');
|
|
||||||
});
|
|
||||||
|
|
||||||
QUnit.test('ResizeManager triggers `playerresize` when the observer method is called', function(assert) {
|
|
||||||
let observer;
|
|
||||||
|
|
||||||
class MyResizeObserver {
|
|
||||||
constructor(fn) {
|
|
||||||
observer = fn;
|
|
||||||
}
|
|
||||||
|
|
||||||
observe(el) {
|
|
||||||
this.el = el;
|
|
||||||
}
|
|
||||||
|
|
||||||
unobserve(el) {
|
|
||||||
}
|
|
||||||
|
|
||||||
disconnect() {
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let playerresizeCalled = 0;
|
unobserve(el) {
|
||||||
const rm = new ResizeManager(this.player, {ResizeObserver: MyResizeObserver});
|
unobserveCalled = true;
|
||||||
|
sameEl = this.el === el;
|
||||||
|
}
|
||||||
|
|
||||||
this.player.one('playerresize', function() {
|
disconnect() {
|
||||||
playerresizeCalled++;
|
disconnectCalled = true;
|
||||||
});
|
}
|
||||||
observer();
|
}
|
||||||
|
|
||||||
this.clock.tick(100);
|
const rm = new ResizeManager(this.player, {ResizeObserver: MyResizeObserver});
|
||||||
|
|
||||||
assert.equal(playerresizeCalled, 1, 'playerresize was triggered');
|
assert.ok(roCreated, 'we intantiated the RO that was passed');
|
||||||
|
assert.ok(observeCalled, 'we observed the RO');
|
||||||
|
assert.equal(rm.resizeObserver_.el, this.player.el(), 'we observed the player el');
|
||||||
|
|
||||||
rm.dispose();
|
rm.dispose();
|
||||||
|
|
||||||
|
assert.ok(unobserveCalled, 'we unobserve when disposed');
|
||||||
|
assert.ok(sameEl, 'we unobserve the same el as we observed');
|
||||||
|
assert.ok(disconnectCalled, 'we disconnected when disposed');
|
||||||
|
});
|
||||||
|
|
||||||
|
QUnit.test('ResizeManager triggers `playerresize` when the observer method is called', function(assert) {
|
||||||
|
let observer;
|
||||||
|
|
||||||
|
class MyResizeObserver {
|
||||||
|
constructor(fn) {
|
||||||
|
observer = fn;
|
||||||
|
}
|
||||||
|
|
||||||
|
observe(el) {
|
||||||
|
this.el = el;
|
||||||
|
}
|
||||||
|
|
||||||
|
unobserve(el) {
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnect() {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let playerresizeCalled = 0;
|
||||||
|
const rm = new ResizeManager(this.player, {ResizeObserver: MyResizeObserver});
|
||||||
|
|
||||||
|
this.player.one('playerresize', function() {
|
||||||
|
playerresizeCalled++;
|
||||||
});
|
});
|
||||||
|
observer();
|
||||||
|
|
||||||
}
|
this.clock.tick(100);
|
||||||
|
|
||||||
|
assert.equal(playerresizeCalled, 1, 'playerresize was triggered');
|
||||||
|
|
||||||
|
rm.dispose();
|
||||||
|
});
|
||||||
|
|||||||
@ -33,15 +33,7 @@ const TestHelpers = {
|
|||||||
return document.defaultView.getComputedStyle(el, null).getPropertyValue(rule);
|
return document.defaultView.getComputedStyle(el, null).getPropertyValue(rule);
|
||||||
}
|
}
|
||||||
|
|
||||||
// IE8
|
return '';
|
||||||
if (el.currentStyle) {
|
|
||||||
if (rule === 'width' || rule === 'height') {
|
|
||||||
// return clientWidth or clientHeight instead for better accuracy
|
|
||||||
rule = 'client' + rule.substr(0, 1).toUpperCase() + rule.substr(1);
|
|
||||||
return el[rule] + 'px';
|
|
||||||
}
|
|
||||||
return el.currentStyle[rule];
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
/* eslint-env qunit */
|
/* eslint-env qunit */
|
||||||
import TextTrackMenuItem from '../../../src/js/control-bar/text-track-controls/text-track-menu-item.js';
|
import TextTrackMenuItem from '../../../src/js/control-bar/text-track-controls/text-track-menu-item.js';
|
||||||
import TestHelpers from '../test-helpers.js';
|
import TestHelpers from '../test-helpers.js';
|
||||||
import * as browser from '../../../src/js/utils/browser.js';
|
|
||||||
import sinon from 'sinon';
|
import sinon from 'sinon';
|
||||||
|
|
||||||
QUnit.module('Text Track Controls', {
|
QUnit.module('Text Track Controls', {
|
||||||
@ -289,35 +288,31 @@ QUnit.test('enabling a captions track should disable the descriptions menu butto
|
|||||||
player.dispose();
|
player.dispose();
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!browser.IS_IE8) {
|
// This test tests a specific with iOS7 where
|
||||||
// This test doesn't work on IE8.
|
// the TextTrackList doesn't report track mode changes.
|
||||||
// However, this test tests a specific with iOS7 where
|
QUnit.test('menu items should polyfill mode change events', function(assert) {
|
||||||
// the TextTrackList doesn't report track mode changes.
|
const player = TestHelpers.makePlayer({});
|
||||||
// TODO: figure out why this test doens't work on IE8. https://github.com/videojs/video.js/issues/1861
|
let changes;
|
||||||
QUnit.test('menu items should polyfill mode change events', function(assert) {
|
|
||||||
const player = TestHelpers.makePlayer({});
|
|
||||||
let changes;
|
|
||||||
|
|
||||||
// emulate a TextTrackList that doesn't report track mode changes,
|
// emulate a TextTrackList that doesn't report track mode changes,
|
||||||
// like iOS7
|
// like iOS7
|
||||||
player.textTracks().onchange = undefined;
|
player.textTracks().onchange = undefined;
|
||||||
const trackMenuItem = new TextTrackMenuItem(player, {
|
const trackMenuItem = new TextTrackMenuItem(player, {
|
||||||
track
|
track
|
||||||
});
|
|
||||||
|
|
||||||
player.textTracks().on('change', function() {
|
|
||||||
changes++;
|
|
||||||
});
|
|
||||||
changes = 0;
|
|
||||||
trackMenuItem.trigger('tap');
|
|
||||||
assert.equal(changes, 1, 'taps trigger change events');
|
|
||||||
|
|
||||||
trackMenuItem.trigger('click');
|
|
||||||
assert.equal(changes, 2, 'clicks trigger change events');
|
|
||||||
|
|
||||||
player.dispose();
|
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
player.textTracks().on('change', function() {
|
||||||
|
changes++;
|
||||||
|
});
|
||||||
|
changes = 0;
|
||||||
|
trackMenuItem.trigger('tap');
|
||||||
|
assert.equal(changes, 1, 'taps trigger change events');
|
||||||
|
|
||||||
|
trackMenuItem.trigger('click');
|
||||||
|
assert.equal(changes, 2, 'clicks trigger change events');
|
||||||
|
|
||||||
|
player.dispose();
|
||||||
|
});
|
||||||
|
|
||||||
const chaptersTrack = {
|
const chaptersTrack = {
|
||||||
kind: 'chapters',
|
kind: 'chapters',
|
||||||
|
|||||||
@ -5,10 +5,8 @@ import TrackBaseline from './track-baseline';
|
|||||||
import TechFaker from '../tech/tech-faker';
|
import TechFaker from '../tech/tech-faker';
|
||||||
import TextTrack from '../../../src/js/tracks/text-track.js';
|
import TextTrack from '../../../src/js/tracks/text-track.js';
|
||||||
import TestHelpers from '../test-helpers.js';
|
import TestHelpers from '../test-helpers.js';
|
||||||
import proxyquireify from 'proxyquireify';
|
|
||||||
import sinon from 'sinon';
|
import sinon from 'sinon';
|
||||||
|
import log from '../../../src/js/utils/log.js';
|
||||||
const proxyquire = proxyquireify(require);
|
|
||||||
|
|
||||||
QUnit.module('Text Track', {
|
QUnit.module('Text Track', {
|
||||||
beforeEach() {
|
beforeEach() {
|
||||||
@ -331,6 +329,11 @@ QUnit.test('tracks are parsed if vttjs is loaded', function(assert) {
|
|||||||
const clock = sinon.useFakeTimers();
|
const clock = sinon.useFakeTimers();
|
||||||
const oldVTT = window.WebVTT;
|
const oldVTT = window.WebVTT;
|
||||||
let parserCreated = false;
|
let parserCreated = false;
|
||||||
|
const reqs = [];
|
||||||
|
|
||||||
|
window.xhr.onCreate = function(req) {
|
||||||
|
reqs.push(req);
|
||||||
|
};
|
||||||
|
|
||||||
window.WebVTT = () => {};
|
window.WebVTT = () => {};
|
||||||
window.WebVTT.StringDecoder = () => {};
|
window.WebVTT.StringDecoder = () => {};
|
||||||
@ -345,22 +348,14 @@ QUnit.test('tracks are parsed if vttjs is loaded', function(assert) {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
// use proxyquire to stub xhr module because IE8s XDomainRequest usage
|
|
||||||
let xhrHandler;
|
|
||||||
const TextTrack_ = proxyquire('../../../src/js/tracks/text-track.js', {
|
|
||||||
xhr(options, fn) {
|
|
||||||
xhrHandler = fn;
|
|
||||||
}
|
|
||||||
}).default;
|
|
||||||
|
|
||||||
/* eslint-disable no-unused-vars */
|
/* eslint-disable no-unused-vars */
|
||||||
const tt = new TextTrack_({
|
const tt = new TextTrack({
|
||||||
tech: this.tech,
|
tech: this.tech,
|
||||||
src: 'http://example.com'
|
src: 'http://example.com'
|
||||||
});
|
});
|
||||||
/* eslint-enable no-unused-vars */
|
/* eslint-enable no-unused-vars */
|
||||||
|
|
||||||
xhrHandler(null, {}, 'WEBVTT\n');
|
reqs.pop().respond(200, null, 'WEBVTT\n');
|
||||||
|
|
||||||
assert.ok(parserCreated, 'WebVTT is loaded, so we can just parse');
|
assert.ok(parserCreated, 'WebVTT is loaded, so we can just parse');
|
||||||
|
|
||||||
@ -372,14 +367,11 @@ QUnit.test('tracks are parsed once vttjs is loaded', function(assert) {
|
|||||||
const clock = sinon.useFakeTimers();
|
const clock = sinon.useFakeTimers();
|
||||||
const oldVTT = window.WebVTT;
|
const oldVTT = window.WebVTT;
|
||||||
let parserCreated = false;
|
let parserCreated = false;
|
||||||
|
const reqs = [];
|
||||||
|
|
||||||
// use proxyquire to stub xhr module because IE8s XDomainRequest usage
|
window.xhr.onCreate = function(req) {
|
||||||
let xhrHandler;
|
reqs.push(req);
|
||||||
const TextTrack_ = proxyquire('../../../src/js/tracks/text-track.js', {
|
};
|
||||||
xhr(options, fn) {
|
|
||||||
xhrHandler = fn;
|
|
||||||
}
|
|
||||||
}).default;
|
|
||||||
|
|
||||||
window.WebVTT = true;
|
window.WebVTT = true;
|
||||||
|
|
||||||
@ -389,13 +381,13 @@ QUnit.test('tracks are parsed once vttjs is loaded', function(assert) {
|
|||||||
testTech.currentTime = () => {};
|
testTech.currentTime = () => {};
|
||||||
|
|
||||||
/* eslint-disable no-unused-vars */
|
/* eslint-disable no-unused-vars */
|
||||||
const tt = new TextTrack_({
|
const tt = new TextTrack({
|
||||||
tech: testTech,
|
tech: testTech,
|
||||||
src: 'http://example.com'
|
src: 'http://example.com'
|
||||||
});
|
});
|
||||||
/* eslint-enable no-unused-vars */
|
/* eslint-enable no-unused-vars */
|
||||||
|
|
||||||
xhrHandler(null, {}, 'WEBVTT\n');
|
reqs.pop().respond(200, null, 'WEBVTT\n');
|
||||||
|
|
||||||
assert.ok(!parserCreated, 'WebVTT is not loaded, do not try to parse yet');
|
assert.ok(!parserCreated, 'WebVTT is not loaded, do not try to parse yet');
|
||||||
|
|
||||||
@ -426,23 +418,18 @@ QUnit.test('stops processing if vttjs loading errored out', function(assert) {
|
|||||||
const clock = sinon.useFakeTimers();
|
const clock = sinon.useFakeTimers();
|
||||||
const errorSpy = sinon.spy();
|
const errorSpy = sinon.spy();
|
||||||
const oldVTT = window.WebVTT;
|
const oldVTT = window.WebVTT;
|
||||||
|
const oldLogError = log.error;
|
||||||
const parserCreated = false;
|
const parserCreated = false;
|
||||||
|
const reqs = [];
|
||||||
|
|
||||||
|
window.xhr.onCreate = function(req) {
|
||||||
|
reqs.push(req);
|
||||||
|
};
|
||||||
|
|
||||||
|
log.error = errorSpy;
|
||||||
|
|
||||||
window.WebVTT = true;
|
window.WebVTT = true;
|
||||||
|
|
||||||
// use proxyquire to stub xhr module because IE8s XDomainRequest usage
|
|
||||||
let xhrHandler;
|
|
||||||
const TextTrack_ = proxyquire('../../../src/js/tracks/text-track.js', {
|
|
||||||
xhr(options, fn) {
|
|
||||||
xhrHandler = fn;
|
|
||||||
},
|
|
||||||
'../utils/log.js': {
|
|
||||||
default: {
|
|
||||||
error: errorSpy
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).default;
|
|
||||||
|
|
||||||
const testTech = new EventTarget();
|
const testTech = new EventTarget();
|
||||||
|
|
||||||
testTech.textTracks = () => {};
|
testTech.textTracks = () => {};
|
||||||
@ -452,13 +439,13 @@ QUnit.test('stops processing if vttjs loading errored out', function(assert) {
|
|||||||
testTech.off.withArgs('vttjsloaded');
|
testTech.off.withArgs('vttjsloaded');
|
||||||
|
|
||||||
/* eslint-disable no-unused-vars */
|
/* eslint-disable no-unused-vars */
|
||||||
const tt = new TextTrack_({
|
const tt = new TextTrack({
|
||||||
tech: testTech,
|
tech: testTech,
|
||||||
src: 'http://example.com'
|
src: 'http://example.com'
|
||||||
});
|
});
|
||||||
/* eslint-enable no-unused-vars */
|
/* eslint-enable no-unused-vars */
|
||||||
|
|
||||||
xhrHandler(null, {}, 'WEBVTT\n');
|
reqs.pop().respond(200, null, 'WEBVTT\n');
|
||||||
|
|
||||||
assert.ok(!parserCreated, 'WebVTT is not loaded, do not try to parse yet');
|
assert.ok(!parserCreated, 'WebVTT is not loaded, do not try to parse yet');
|
||||||
|
|
||||||
@ -475,4 +462,5 @@ QUnit.test('stops processing if vttjs loading errored out', function(assert) {
|
|||||||
|
|
||||||
clock.restore();
|
clock.restore();
|
||||||
window.WebVTT = oldVTT;
|
window.WebVTT = oldVTT;
|
||||||
|
log.error = oldLogError;
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
/* eslint-env qunit */
|
/* eslint-env qunit */
|
||||||
import * as browser from '../../../src/js/utils/browser.js';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Tests baseline functionality for all tracks
|
* Tests baseline functionality for all tracks
|
||||||
@ -35,10 +34,6 @@ const TrackBaseline = function(TrackClass, options) {
|
|||||||
QUnit.test('returns an instance of itself on non ie8 browsers', function(assert) {
|
QUnit.test('returns an instance of itself on non ie8 browsers', function(assert) {
|
||||||
const track = new TrackClass(options);
|
const track = new TrackClass(options);
|
||||||
|
|
||||||
if (browser.IS_IE8) {
|
|
||||||
assert.ok(track, 'returns an object on ie8');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
assert.ok(track instanceof TrackClass, 'returns an instance');
|
assert.ok(track instanceof TrackClass, 'returns an instance');
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
/* eslint-env qunit */
|
/* eslint-env qunit */
|
||||||
import window from 'global/window';
|
|
||||||
import document from 'global/document';
|
import document from 'global/document';
|
||||||
import sinon from 'sinon';
|
import sinon from 'sinon';
|
||||||
import * as Dom from '../../../src/js/utils/dom.js';
|
import * as Dom from '../../../src/js/utils/dom.js';
|
||||||
@ -546,30 +545,3 @@ QUnit.test('getBoundingClientRect() returns an object for elements that support
|
|||||||
assert.strictEqual(actual[k], expected[k], `the "${k}" returned by the Dom util matches what was returned by the mock element`);
|
assert.strictEqual(actual[k], expected[k], `the "${k}" returned by the Dom util matches what was returned by the mock element`);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
QUnit.test('getBoundingClientRect() shims only width and height for elements that do not return them', function(assert) {
|
|
||||||
const oldGCS = window.getComputedStyle;
|
|
||||||
|
|
||||||
// This is done so that we fall back to looking for the `currentStyle`
|
|
||||||
// property on the mock element.
|
|
||||||
window.getComputedStyle = null;
|
|
||||||
|
|
||||||
const mockEl = {
|
|
||||||
currentStyle: {
|
|
||||||
height: '123',
|
|
||||||
width: '456'
|
|
||||||
},
|
|
||||||
getBoundingClientRect: sinon.spy(() => {
|
|
||||||
return {};
|
|
||||||
}),
|
|
||||||
parentNode: true
|
|
||||||
};
|
|
||||||
|
|
||||||
const actual = Dom.getBoundingClientRect(mockEl);
|
|
||||||
|
|
||||||
assert.deepEqual(Object.keys(actual).sort(), ['height', 'width'], 'only "height" and "width" were shimmed');
|
|
||||||
assert.strictEqual(actual.height, 123, '"height" was shimmed because it was missing');
|
|
||||||
assert.strictEqual(actual.width, 456, '"width" was shimmed because it was missing');
|
|
||||||
|
|
||||||
window.getComputedStyle = oldGCS;
|
|
||||||
});
|
|
||||||
|
|||||||
@ -92,27 +92,6 @@ QUnit.test('logging functions should work', function(assert) {
|
|||||||
'history recorded the correct arguments');
|
'history recorded the correct arguments');
|
||||||
});
|
});
|
||||||
|
|
||||||
QUnit.test('in IE pre-11 (or when requested) objects and arrays are stringified', function(assert) {
|
|
||||||
|
|
||||||
// Need to reset history here because there are extra messages logged
|
|
||||||
// when running via Karma.
|
|
||||||
log.history.clear();
|
|
||||||
|
|
||||||
// Run a custom log call, explicitly requesting object/array stringification.
|
|
||||||
logByType('log', [
|
|
||||||
'test',
|
|
||||||
{foo: 'bar'},
|
|
||||||
[1, 2, 3],
|
|
||||||
0,
|
|
||||||
false,
|
|
||||||
null
|
|
||||||
], true);
|
|
||||||
|
|
||||||
assert.ok(window.console.log.called, 'log was called');
|
|
||||||
assert.deepEqual(window.console.log.firstCall.args,
|
|
||||||
['VIDEOJS: test {"foo":"bar"} [1,2,3] 0 false null']);
|
|
||||||
});
|
|
||||||
|
|
||||||
QUnit.test('setting the log level changes what is actually logged', function(assert) {
|
QUnit.test('setting the log level changes what is actually logged', function(assert) {
|
||||||
|
|
||||||
// Need to reset history here because there are extra messages logged
|
// Need to reset history here because there are extra messages logged
|
||||||
|
|||||||
@ -15,17 +15,6 @@ QUnit.module('video.js', {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
QUnit.test('should create a video tag and have access children in old IE', function(assert) {
|
|
||||||
const fixture = document.getElementById('qunit-fixture');
|
|
||||||
|
|
||||||
fixture.innerHTML += '<video id="test_vid_id"><source type="video/mp4"></video>';
|
|
||||||
|
|
||||||
const vid = document.getElementById('test_vid_id');
|
|
||||||
|
|
||||||
assert.ok(vid.childNodes.length === 1);
|
|
||||||
assert.ok(vid.childNodes[0].getAttribute('type') === 'video/mp4');
|
|
||||||
});
|
|
||||||
|
|
||||||
QUnit.test('should return a video player instance', function(assert) {
|
QUnit.test('should return a video player instance', function(assert) {
|
||||||
const fixture = document.getElementById('qunit-fixture');
|
const fixture = document.getElementById('qunit-fixture');
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user