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
@ -6,7 +6,7 @@ const filesize = require('filesize');
|
||||
const Table = require('cli-table');
|
||||
|
||||
const files = klawSync('dist/', {
|
||||
ignore: ['examples', 'lang', 'font', 'ie8', '*.zip', '*.gz'],
|
||||
ignore: ['examples', 'lang', 'font', '*.zip', '*.gz'],
|
||||
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' },
|
||||
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' },
|
||||
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' }
|
||||
@ -304,10 +303,6 @@ module.exports = function(grunt) {
|
||||
concat: {
|
||||
options: {
|
||||
separator: '\n'
|
||||
},
|
||||
ie8_addition: {
|
||||
src: ['build/temp/video-js.css', 'src/css/ie8.css'],
|
||||
dest: 'build/temp/video-js.css'
|
||||
}
|
||||
},
|
||||
concurrent: {
|
||||
@ -445,7 +440,6 @@ module.exports = function(grunt) {
|
||||
'cssmin',
|
||||
|
||||
'copy:fonts',
|
||||
'copy:ie8',
|
||||
'vjslanguages'
|
||||
]);
|
||||
|
||||
@ -457,7 +451,7 @@ module.exports = function(grunt) {
|
||||
'zip:dist'
|
||||
]);
|
||||
|
||||
grunt.registerTask('skin', ['sass', 'concat:ie8_addition']);
|
||||
grunt.registerTask('skin', ['sass']);
|
||||
|
||||
// Default task - build and test
|
||||
grunt.registerTask('default', ['test']);
|
||||
|
||||
@ -45,7 +45,6 @@ const primedBabel = babel({
|
||||
babelrc: false,
|
||||
exclude: 'node_modules/**',
|
||||
presets: [
|
||||
'es3',
|
||||
['es2015', {
|
||||
loose: true,
|
||||
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'});
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
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
|
||||
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.
|
||||
|
||||
36
package-lock.json
generated
36
package-lock.json
generated
@ -1057,24 +1057,6 @@
|
||||
"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": {
|
||||
"version": "6.26.0",
|
||||
"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-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": {
|
||||
"version": "6.26.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz",
|
||||
@ -3832,7 +3804,8 @@
|
||||
"es5-shim": {
|
||||
"version": "4.5.10",
|
||||
"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": {
|
||||
"version": "2.0.1",
|
||||
@ -6905,7 +6878,7 @@
|
||||
"husky": {
|
||||
"version": "0.14.3",
|
||||
"resolved": "https://registry.npmjs.org/husky/-/husky-0.14.3.tgz",
|
||||
"integrity": "sha1-xp7XTi0neXaaF7qDmbVM4LY8EsM=",
|
||||
"integrity": "sha512-e21wivqHpstpoiWA/Yi8eFti8E+sQDSS53cpJsPptPs295QTOQR0ZwnHo2TXy1XOpZFD9rPOd3NpmqTK6uMLJA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-ci": "1.0.10",
|
||||
@ -12115,7 +12088,7 @@
|
||||
"rollup-watch": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup-watch/-/rollup-watch-4.3.1.tgz",
|
||||
"integrity": "sha1-WqHq6reHrd82iQXRArOdb8XOSos=",
|
||||
"integrity": "sha512-6yjnIwfjpSrqA8IafyIu7fsEyeImNR4aDjA1bQ7KWeVuiA+Clfsx8+PGQkyABWIQzmauQ//tIJ5wAxLXsXs8qQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chokidar": "1.7.0",
|
||||
@ -14101,6 +14074,7 @@
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
|
||||
"integrity": "sha1-oj09hgitcZK2nGB3/E64SJmNNdk=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"es5-shim": "4.5.10"
|
||||
}
|
||||
|
||||
@ -53,7 +53,6 @@
|
||||
"safe-json-parse": "4.0.0",
|
||||
"tsml": "1.0.1",
|
||||
"videojs-font": "2.1.0",
|
||||
"videojs-ie8": "1.1.2",
|
||||
"videojs-vtt.js": "0.12.6",
|
||||
"xhr": "2.4.0"
|
||||
},
|
||||
@ -63,7 +62,6 @@
|
||||
"babel-plugin-external-helpers": "^6.22.0",
|
||||
"babel-plugin-transform-runtime": "^6.9.0",
|
||||
"babel-preset-es2015": "^6.14.0",
|
||||
"babel-preset-es3": "^1.0.1",
|
||||
"babel-register": "^6.9.0",
|
||||
"babelify": "^8.0.0",
|
||||
"bluebird": "^3.5.1",
|
||||
|
||||
@ -4,9 +4,6 @@
|
||||
<meta charset="utf-8" />
|
||||
<title>Video.js Sandbox</title>
|
||||
|
||||
<!-- Add ES5 shim and sham for IE8 -->
|
||||
<script src="../dist/ie8/videojs-ie8.js"></script>
|
||||
|
||||
<!-- Load the source files -->
|
||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||
<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">
|
||||
<source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4" type="video/mp4">
|
||||
<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="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.sv.vtt" srclang="sv" label="Swedish"></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><!-- Tracks need an ending tag thanks to IE9 -->
|
||||
<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="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 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 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>
|
||||
</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>
|
||||
|
||||
@ -4,9 +4,6 @@
|
||||
<meta charset="utf-8" />
|
||||
<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 -->
|
||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||
<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.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.sv.vtt" srclang="sv" label="Swedish"></track>
|
||||
<track kind="captions" src="../docs/examples/elephantsdream/captions.ru.vtt" srclang="ru" label="Russian"></track>
|
||||
<track kind="captions" src="../docs/examples/elephantsdream/captions.ja.vtt" srclang="ja" label="Japanese"></track>
|
||||
<track kind="captions" src="../docs/examples/elephantsdream/captions.ar.vtt" srclang="ar" label="Arabic"></track>
|
||||
<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 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 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>
|
||||
</video>
|
||||
|
||||
@ -4,9 +4,6 @@
|
||||
<meta charset="utf-8" />
|
||||
<title>Video.js Sandbox</title>
|
||||
|
||||
<!-- Add ES5 shim and sham for IE8 -->
|
||||
<script src="../dist/ie8/videojs-ie8.js"></script>
|
||||
|
||||
<!-- Load the source files -->
|
||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||
<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.webm" type="video/webm">
|
||||
<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>
|
||||
</video>
|
||||
|
||||
|
||||
@ -4,9 +4,6 @@
|
||||
<meta charset="utf-8" />
|
||||
<title>Video.js Sandbox</title>
|
||||
|
||||
<!-- Add ES5 shim and sham for IE8 -->
|
||||
<script src="../dist/ie8/videojs-ie8.js"></script>
|
||||
|
||||
<!-- Load the source files -->
|
||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||
<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.webm" type="video/webm">
|
||||
<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>
|
||||
</video>
|
||||
|
||||
|
||||
@ -5,9 +5,6 @@
|
||||
<meta charset="utf-8" />
|
||||
<title>VideoJS Languages Demo</title>
|
||||
|
||||
<!-- Add ES5 shim and sham for IE8 -->
|
||||
<script src="../dist/ie8/videojs-ie8.js"></script>
|
||||
|
||||
<!-- Load the source files -->
|
||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||
<script src="../dist/video.js"></script>
|
||||
|
||||
@ -4,9 +4,6 @@
|
||||
<meta charset="utf-8" />
|
||||
<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 -->
|
||||
<link href="../build/temp/video-js.css" rel="stylesheet" type="text/css">
|
||||
<script src="../dist/video.js"></script>
|
||||
|
||||
@ -4,9 +4,6 @@
|
||||
<meta charset="utf-8" />
|
||||
<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 -->
|
||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||
<script src="../dist/video.js"></script>
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
|
||||
overflow: visible; // IE8
|
||||
font-size: inherit; // IE in general. WTF.
|
||||
line-height: inherit;
|
||||
text-transform: none;
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
// IE 8 + 9 Support
|
||||
// no flex support
|
||||
.vjs-has-started.vjs-no-flex .vjs-control-bar {
|
||||
display: table;
|
||||
}
|
||||
|
||||
@ -30,7 +30,6 @@
|
||||
@include hide-visually;
|
||||
}
|
||||
|
||||
// IE 8 + 9 Support
|
||||
.vjs-no-flex .vjs-control {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
margin-top: -0.5em;
|
||||
position: absolute;
|
||||
text-shadow: 0.05em 0.05em 0.1em #000;
|
||||
text-align: center; // Needed for IE8
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
|
||||
@ -103,8 +103,6 @@ body.vjs-full-window {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
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 {
|
||||
position: fixed;
|
||||
@ -149,10 +147,8 @@ body.vjs-full-window {
|
||||
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
|
||||
// about what's required to play video.
|
||||
// about what's required to play video when JavaScript is disabled
|
||||
.vjs-no-js {
|
||||
padding: 20px;
|
||||
color: #fff;
|
||||
|
||||
@ -16,16 +16,6 @@
|
||||
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
|
||||
.vjs-has-started .vjs-poster {
|
||||
display: none;
|
||||
|
||||
@ -63,9 +63,6 @@
|
||||
padding: 0;
|
||||
// updated by javascript during playback
|
||||
width: 0;
|
||||
// Needed for IE6
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.video-js .vjs-play-progress {
|
||||
@ -83,18 +80,12 @@
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
// There are child elements of the load progress bar that represent the
|
||||
// specific time ranges that have been buffered.
|
||||
.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);
|
||||
}
|
||||
|
||||
|
||||
@ -18,8 +18,6 @@
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
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
|
||||
|
||||
@ -18,12 +18,6 @@
|
||||
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,
|
||||
.vjs-no-flex .vjs-duration {
|
||||
display: none;
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
.video-js .vjs-mute-control {
|
||||
cursor: pointer;
|
||||
@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 {
|
||||
@extend .vjs-icon-volume-high;
|
||||
@ -39,13 +34,6 @@
|
||||
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 {
|
||||
&:hover .vjs-volume-control,
|
||||
@ -64,14 +52,6 @@
|
||||
opacity: 1;
|
||||
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;
|
||||
@include transition($transition-property);
|
||||
}
|
||||
|
||||
@ -20,10 +20,6 @@
|
||||
|
||||
// This allows scrolling of content if need be.
|
||||
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.
|
||||
@ -31,8 +27,8 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// prevent menus from opening while scrubbing (FF, IE)
|
||||
.vjs-scrubbing .vjs-menu-button:hover .vjs-menu {
|
||||
// prevent menus from opening while scrubbing
|
||||
.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu {
|
||||
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
|
||||
// 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) {
|
||||
const rule = `offset${toTitleCase(widthOrHeight)}`;
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @file play-progress-bar.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 './time-tooltip';
|
||||
@ -71,8 +71,8 @@ PlayProgressBar.prototype.options_ = {
|
||||
children: []
|
||||
};
|
||||
|
||||
// Time tooltips should not be added to a player on mobile devices or IE8
|
||||
if ((!IE_VERSION || IE_VERSION > 8) && !IS_IOS && !IS_ANDROID) {
|
||||
// Time tooltips should not be added to a player on mobile devices
|
||||
if (!IS_IOS && !IS_ANDROID) {
|
||||
PlayProgressBar.prototype.options_.children.push('timeTooltip');
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
*/
|
||||
import Slider from '../../slider/slider.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 Fn from '../../utils/fn.js';
|
||||
import formatTime from '../../utils/format-time.js';
|
||||
@ -332,8 +332,8 @@ SeekBar.prototype.options_ = {
|
||||
barName: 'playProgressBar'
|
||||
};
|
||||
|
||||
// MouseTimeDisplay tooltips should not be added to a player on mobile devices or IE8
|
||||
if ((!IE_VERSION || IE_VERSION > 8) && !IS_IOS && !IS_ANDROID) {
|
||||
// MouseTimeDisplay tooltips should not be added to a player on mobile devices
|
||||
if (!IS_IOS && !IS_ANDROID) {
|
||||
SeekBar.prototype.options_.children.splice(1, 0, 'mouseTimeDisplay');
|
||||
}
|
||||
|
||||
|
||||
@ -51,7 +51,7 @@ class Menu extends Component {
|
||||
this.menuButton_.unpressButton();
|
||||
|
||||
// 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') {
|
||||
this.menuButton_.focus();
|
||||
}
|
||||
|
||||
@ -578,20 +578,10 @@ class Player extends Component {
|
||||
tag.removeAttribute('height');
|
||||
|
||||
Object.getOwnPropertyNames(attrs).forEach(function(attr) {
|
||||
// workaround so we don't totally break IE7
|
||||
// http://stackoverflow.com/questions/3653444/css-styles-not-applied-on-dynamic-elements-in-internet-explorer-7
|
||||
if (attr === 'class') {
|
||||
el.className += ' ' + attrs[attr];
|
||||
el.setAttribute(attr, attrs[attr]);
|
||||
|
||||
if (divEmbed) {
|
||||
tag.className += ' ' + attrs[attr];
|
||||
}
|
||||
} else {
|
||||
el.setAttribute(attr, attrs[attr]);
|
||||
|
||||
if (divEmbed) {
|
||||
tag.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.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');
|
||||
|
||||
for (let i = 0; i < links.length; i++) {
|
||||
@ -2884,7 +2875,7 @@ class Player extends Component {
|
||||
this.addClass('vjs-error');
|
||||
|
||||
// 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_);
|
||||
|
||||
/**
|
||||
@ -3396,7 +3387,7 @@ class Player extends Component {
|
||||
'webkitFlexBasis' in elem.style ||
|
||||
'mozFlexBasis' in elem.style ||
|
||||
'msFlexBasis' in elem.style ||
|
||||
// IE10-specific (2012 flex spec)
|
||||
// IE10-specific (2012 flex spec), available for completeness
|
||||
'msFlexOrder' in elem.style);
|
||||
}
|
||||
}
|
||||
@ -3506,7 +3497,8 @@ Player.prototype.options_ = {
|
||||
'bigPlayButton',
|
||||
'controlBar',
|
||||
'errorDisplay',
|
||||
'textTrackSettings'
|
||||
'textTrackSettings',
|
||||
'resizeManager'
|
||||
],
|
||||
|
||||
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.'
|
||||
};
|
||||
|
||||
if (!browser.IS_IE8) {
|
||||
Player.prototype.options_.children.push('resizeManager');
|
||||
}
|
||||
|
||||
[
|
||||
/**
|
||||
* 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 * as Fn from './utils/fn.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.
|
||||
@ -52,15 +51,6 @@ class PosterImage extends ClickableComponent {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -93,19 +83,15 @@ class PosterImage extends ClickableComponent {
|
||||
* The URL to the source for the `PosterImage`.
|
||||
*/
|
||||
setSrc(url) {
|
||||
if (this.fallbackImg_) {
|
||||
this.fallbackImg_.src = url;
|
||||
} else {
|
||||
let backgroundImage = '';
|
||||
let backgroundImage = '';
|
||||
|
||||
// Any falsey values should stay as an empty string, otherwise
|
||||
// this will throw an extra error
|
||||
if (url) {
|
||||
backgroundImage = `url("${url}")`;
|
||||
}
|
||||
|
||||
this.el_.style.backgroundImage = backgroundImage;
|
||||
// Any falsey values should stay as an empty string, otherwise
|
||||
// this will throw an extra error
|
||||
if (url) {
|
||||
backgroundImage = `url("${url}")`;
|
||||
}
|
||||
|
||||
this.el_.style.backgroundImage = backgroundImage;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -22,35 +22,10 @@ const autoSetup = function() {
|
||||
return;
|
||||
}
|
||||
|
||||
// One day, when we stop supporting IE8, go back to this, but in the meantime...*hack hack hack*
|
||||
// var vids = Array.prototype.slice.call(document.getElementsByTagName('video'));
|
||||
// var audios = Array.prototype.slice.call(document.getElementsByTagName('audio'));
|
||||
// var mediaEls = vids.concat(audios);
|
||||
|
||||
// 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]);
|
||||
}
|
||||
}
|
||||
const vids = Array.prototype.slice.call(document.getElementsByTagName('video'));
|
||||
const audios = Array.prototype.slice.call(document.getElementsByTagName('audio'));
|
||||
const divs = Array.prototype.slice.call(document.getElementsByTagName('video-js'));
|
||||
const mediaEls = vids.concat(audios, divs);
|
||||
|
||||
// Check if any media elements exist
|
||||
if (mediaEls && mediaEls.length > 0) {
|
||||
@ -59,8 +34,6 @@ const autoSetup = function() {
|
||||
const mediaEl = mediaEls[i];
|
||||
|
||||
// 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) {
|
||||
|
||||
// Make sure this player hasn't already been set up.
|
||||
|
||||
@ -908,7 +908,7 @@ if (Dom.isReal()) {
|
||||
* - False if HTML5 media is not supported.
|
||||
*/
|
||||
Html5.isSupported = function() {
|
||||
// IE9 with no Media Player is a LIAR! (#984)
|
||||
// IE with no Media Player is a LIAR! (#984)
|
||||
try {
|
||||
Html5.TEST_VID.volume = 0.5;
|
||||
} catch (e) {
|
||||
@ -995,9 +995,6 @@ Html5.canControlPlaybackRate = function() {
|
||||
* - False otherwise
|
||||
*/
|
||||
Html5.canOverrideAttributes = function() {
|
||||
if (browser.IS_IE8) {
|
||||
return false;
|
||||
}
|
||||
// if we cannot overwrite the src property, there is no support
|
||||
// iOS 7 safari for instance cannot do this.
|
||||
try {
|
||||
@ -1169,7 +1166,6 @@ Html5.prototype.featuresNativeAudioTracks = Html5.supportsNativeAudioTracks();
|
||||
// HTML5 Feature detection and Device Fixes --------------------------------- //
|
||||
const canPlayType = Html5.TEST_VID && Html5.TEST_VID.constructor.prototype.canPlayType;
|
||||
const mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i;
|
||||
const mp4RE = /^video\/mp4/i;
|
||||
|
||||
Html5.patchCanPlayType = function() {
|
||||
|
||||
@ -1182,15 +1178,6 @@ Html5.patchCanPlayType = function() {
|
||||
}
|
||||
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)
|
||||
*/
|
||||
Html5.nativeSourceHandler.canPlayType = function(type) {
|
||||
// IE9 on Windows 7 without MediaPlayer throws an error here
|
||||
// https://github.com/videojs/video.js/issues/519
|
||||
// IE without MediaPlayer throws an error (#519)
|
||||
try {
|
||||
return Html5.TEST_VID.canPlayType(type);
|
||||
} catch (e) {
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
* @file audio-track-list.js
|
||||
*/
|
||||
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
|
||||
@ -42,8 +40,6 @@ class AudioTrackList extends TrackList {
|
||||
* A list of `AudioTrack` to instantiate the list with.
|
||||
*/
|
||||
constructor(tracks = []) {
|
||||
let list;
|
||||
|
||||
// make sure only 1 track is enabled
|
||||
// sorted from last index to first index
|
||||
for (let i = tracks.length - 1; i >= 0; i--) {
|
||||
@ -53,26 +49,8 @@ class AudioTrackList extends TrackList {
|
||||
}
|
||||
}
|
||||
|
||||
// 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 AudioTrackList.prototype) {
|
||||
if (prop !== 'constructor') {
|
||||
list[prop] = AudioTrackList.prototype[prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
list = super(tracks, list);
|
||||
list.changing_ = false;
|
||||
|
||||
return list;
|
||||
super(tracks);
|
||||
this.changing_ = false;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import {AudioTrackKind} from './track-enums';
|
||||
import Track from './track';
|
||||
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}
|
||||
@ -38,18 +37,11 @@ class AudioTrack extends Track {
|
||||
const settings = merge(options, {
|
||||
kind: AudioTrackKind[options.kind] || ''
|
||||
});
|
||||
// on IE8 this will be a document element
|
||||
// for every other browser this will be a normal object
|
||||
const track = super(settings);
|
||||
|
||||
super(settings);
|
||||
|
||||
let enabled = false;
|
||||
|
||||
if (browser.IS_IE8) {
|
||||
for (const prop in AudioTrack.prototype) {
|
||||
if (prop !== 'constructor') {
|
||||
track[prop] = AudioTrack.prototype[prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @memberof AudioTrack
|
||||
* @member {boolean} enabled
|
||||
@ -59,7 +51,7 @@ class AudioTrack extends Track {
|
||||
*
|
||||
* @fires VideoTrack#selectedchange
|
||||
*/
|
||||
Object.defineProperty(track, 'enabled', {
|
||||
Object.defineProperty(this, 'enabled', {
|
||||
get() {
|
||||
return enabled;
|
||||
},
|
||||
@ -88,11 +80,9 @@ class AudioTrack extends Track {
|
||||
// set selected to that true value otherwise
|
||||
// we keep it false
|
||||
if (settings.enabled) {
|
||||
track.enabled = settings.enabled;
|
||||
this.enabled = settings.enabled;
|
||||
}
|
||||
track.loaded_ = true;
|
||||
|
||||
return track;
|
||||
this.loaded_ = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,9 +2,6 @@
|
||||
* @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.
|
||||
*/
|
||||
@ -17,19 +14,7 @@ class HtmlTrackElementList {
|
||||
* A list of `HtmlTrackElement` to instantiate the list with.
|
||||
*/
|
||||
constructor(trackElements = []) {
|
||||
let list = this; // eslint-disable-line
|
||||
|
||||
if (browser.IS_IE8) {
|
||||
list = document.createElement('custom');
|
||||
|
||||
for (const prop in HtmlTrackElementList.prototype) {
|
||||
if (prop !== 'constructor') {
|
||||
list[prop] = HtmlTrackElementList.prototype[prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
list.trackElements_ = [];
|
||||
this.trackElements_ = [];
|
||||
|
||||
/**
|
||||
* @memberof HtmlTrackElementList
|
||||
@ -37,18 +22,14 @@ class HtmlTrackElementList {
|
||||
* The current number of `Track`s in the this Trackist.
|
||||
* @instance
|
||||
*/
|
||||
Object.defineProperty(list, 'length', {
|
||||
Object.defineProperty(this, 'length', {
|
||||
get() {
|
||||
return this.trackElements_.length;
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = 0, length = trackElements.length; i < length; i++) {
|
||||
list.addTrackElement_(trackElements[i]);
|
||||
}
|
||||
|
||||
if (browser.IS_IE8) {
|
||||
return list;
|
||||
this.addTrackElement_(trackElements[i]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
* @file html-track-element.js
|
||||
*/
|
||||
|
||||
import * as browser from '../utils/browser.js';
|
||||
import document from 'global/document';
|
||||
import EventTarget from '../event-target';
|
||||
import TextTrack from '../tracks/text-track';
|
||||
|
||||
@ -63,48 +61,40 @@ class HTMLTrackElement extends EventTarget {
|
||||
super();
|
||||
|
||||
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);
|
||||
|
||||
trackElement.kind = track.kind;
|
||||
trackElement.src = track.src;
|
||||
trackElement.srclang = track.language;
|
||||
trackElement.label = track.label;
|
||||
trackElement.default = track.default;
|
||||
this.kind = track.kind;
|
||||
this.src = track.src;
|
||||
this.srclang = track.language;
|
||||
this.label = track.label;
|
||||
this.default = track.default;
|
||||
|
||||
/**
|
||||
* @memberof HTMLTrackElement
|
||||
* @member {HTMLTrackElement~ReadyState} readyState
|
||||
* The current ready state of the track element.
|
||||
* @instance
|
||||
*/
|
||||
Object.defineProperty(trackElement, 'readyState', {
|
||||
get() {
|
||||
return readyState;
|
||||
}
|
||||
});
|
||||
Object.defineProperties(this, {
|
||||
|
||||
/**
|
||||
* @memberof HTMLTrackElement
|
||||
* @member {TextTrack} track
|
||||
* The underlying TextTrack object.
|
||||
* @instance
|
||||
*
|
||||
*/
|
||||
Object.defineProperty(trackElement, 'track', {
|
||||
get() {
|
||||
return track;
|
||||
/**
|
||||
* @memberof HTMLTrackElement
|
||||
* @member {HTMLTrackElement~ReadyState} readyState
|
||||
* The current ready state of the track element.
|
||||
* @instance
|
||||
*/
|
||||
readyState: {
|
||||
get() {
|
||||
return readyState;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @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
|
||||
* @fires HTMLTrackElement#load
|
||||
*/
|
||||
track.addEventListener('loadeddata', function() {
|
||||
track.addEventListener('loadeddata', () => {
|
||||
readyState = LOADED;
|
||||
|
||||
trackElement.trigger({
|
||||
this.trigger({
|
||||
type: 'load',
|
||||
target: trackElement
|
||||
target: this
|
||||
});
|
||||
});
|
||||
|
||||
if (browser.IS_IE8) {
|
||||
return trackElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
/**
|
||||
* @file text-track-cue-list.js
|
||||
*/
|
||||
import * as browser from '../utils/browser.js';
|
||||
import document from 'global/document';
|
||||
|
||||
/**
|
||||
* @typedef {Object} TextTrackCueList~TextTrackCue
|
||||
@ -36,19 +34,7 @@ class TextTrackCueList {
|
||||
* A list of cues to be initialized with
|
||||
*/
|
||||
constructor(cues) {
|
||||
let list = this; // eslint-disable-line
|
||||
|
||||
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);
|
||||
TextTrackCueList.prototype.setCues_.call(this, cues);
|
||||
|
||||
/**
|
||||
* @memberof TextTrackCueList
|
||||
@ -56,15 +42,11 @@ class TextTrackCueList {
|
||||
* The current number of `TextTrackCue`s in the TextTrackCueList.
|
||||
* @instance
|
||||
*/
|
||||
Object.defineProperty(list, 'length', {
|
||||
Object.defineProperty(this, 'length', {
|
||||
get() {
|
||||
return this.length_;
|
||||
}
|
||||
});
|
||||
|
||||
if (browser.IS_IE8) {
|
||||
return list;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -3,8 +3,6 @@
|
||||
*/
|
||||
import TrackList from './track-list';
|
||||
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.
|
||||
@ -14,35 +12,6 @@ import document from 'global/document';
|
||||
*/
|
||||
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`
|
||||
*
|
||||
|
||||
@ -10,7 +10,6 @@ import Track from './track.js';
|
||||
import { isCrossOrigin } from '../utils/url.js';
|
||||
import XHR from 'xhr';
|
||||
import merge from '../utils/merge-options';
|
||||
import * as browser from '../utils/browser.js';
|
||||
|
||||
/**
|
||||
* 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') {
|
||||
mode = 'hidden';
|
||||
}
|
||||
// on IE8 this will be a document element
|
||||
// for every other browser this will be a normal object
|
||||
const tt = super(settings);
|
||||
super(settings);
|
||||
|
||||
tt.tech_ = settings.tech;
|
||||
this.tech_ = settings.tech;
|
||||
|
||||
if (browser.IS_IE8) {
|
||||
for (const prop in TextTrack.prototype) {
|
||||
if (prop !== 'constructor') {
|
||||
tt[prop] = TextTrack.prototype[prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
this.cues_ = [];
|
||||
this.activeCues_ = [];
|
||||
|
||||
tt.cues_ = [];
|
||||
tt.activeCues_ = [];
|
||||
|
||||
const cues = new TextTrackCueList(tt.cues_);
|
||||
const activeCues = new TextTrackCueList(tt.activeCues_);
|
||||
const cues = new TextTrackCueList(this.cues_);
|
||||
const activeCues = new TextTrackCueList(this.activeCues_);
|
||||
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
|
||||
// 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') {
|
||||
tt.tech_.ready(() => {
|
||||
tt.tech_.on('timeupdate', timeupdateHandler);
|
||||
this.tech_.ready(() => {
|
||||
this.tech_.on('timeupdate', timeupdateHandler);
|
||||
}, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* @memberof TextTrack
|
||||
* @member {boolean} default
|
||||
* If this track was set to be on or off by default. Cannot be changed after
|
||||
* creation.
|
||||
* @instance
|
||||
*
|
||||
* @readonly
|
||||
*/
|
||||
Object.defineProperty(tt, 'default', {
|
||||
get() {
|
||||
return default_;
|
||||
Object.defineProperties(this, {
|
||||
/**
|
||||
* @memberof TextTrack
|
||||
* @member {boolean} default
|
||||
* If this track was set to be on or off by default. Cannot be changed after
|
||||
* creation.
|
||||
* @instance
|
||||
*
|
||||
* @readonly
|
||||
*/
|
||||
default: {
|
||||
get() {
|
||||
return default_;
|
||||
},
|
||||
set() {}
|
||||
},
|
||||
set() {}
|
||||
});
|
||||
|
||||
/**
|
||||
* @memberof TextTrack
|
||||
* @member {string} mode
|
||||
* Set the mode of this TextTrack to a valid {@link TextTrack~Mode}. Will
|
||||
* not be set if setting to an invalid mode.
|
||||
* @instance
|
||||
*
|
||||
* @fires TextTrack#modechange
|
||||
*/
|
||||
Object.defineProperty(tt, 'mode', {
|
||||
get() {
|
||||
return mode;
|
||||
/**
|
||||
* @memberof TextTrack
|
||||
* @member {string} mode
|
||||
* Set the mode of this TextTrack to a valid {@link TextTrack~Mode}. Will
|
||||
* not be set if setting to an invalid mode.
|
||||
* @instance
|
||||
*
|
||||
* @fires TextTrack#modechange
|
||||
*/
|
||||
mode: {
|
||||
get() {
|
||||
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);
|
||||
}, 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');
|
||||
/**
|
||||
* @memberof TextTrack
|
||||
* @member {TextTrackCueList} cues
|
||||
* The text track cue list for this TextTrack.
|
||||
* @instance
|
||||
*/
|
||||
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
|
||||
*/
|
||||
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) {
|
||||
tt.src = settings.src;
|
||||
loadTrack(settings.src, tt);
|
||||
this.src = settings.src;
|
||||
loadTrack(settings.src, this);
|
||||
} else {
|
||||
tt.loaded_ = true;
|
||||
this.loaded_ = true;
|
||||
}
|
||||
|
||||
return tt;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
* @file track-list.js
|
||||
*/
|
||||
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
|
||||
@ -18,26 +16,12 @@ class TrackList extends EventTarget {
|
||||
* @param {Track[]} tracks
|
||||
* A list of tracks to initialize the list with.
|
||||
*
|
||||
* @param {Object} [list]
|
||||
* The child object with inheritance done manually for ie8.
|
||||
*
|
||||
* @abstract
|
||||
*/
|
||||
constructor(tracks = [], list = null) {
|
||||
constructor(tracks = []) {
|
||||
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
|
||||
@ -45,19 +29,15 @@ class TrackList extends EventTarget {
|
||||
* The current number of `Track`s in the this Trackist.
|
||||
* @instance
|
||||
*/
|
||||
Object.defineProperty(list, 'length', {
|
||||
Object.defineProperty(this, 'length', {
|
||||
get() {
|
||||
return this.tracks_.length;
|
||||
}
|
||||
});
|
||||
|
||||
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
|
||||
*/
|
||||
import * as browser from '../utils/browser.js';
|
||||
import document from 'global/document';
|
||||
import * as Guid from '../utils/guid.js';
|
||||
import EventTarget from '../event-target';
|
||||
|
||||
@ -41,17 +39,6 @@ class Track extends EventTarget {
|
||||
constructor(options = {}) {
|
||||
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 = {
|
||||
id: options.id || 'vjs_track_' + Guid.newGUID(),
|
||||
kind: options.kind || '',
|
||||
@ -97,15 +84,13 @@ class Track extends EventTarget {
|
||||
*/
|
||||
|
||||
for (const key in trackProps) {
|
||||
Object.defineProperty(track, key, {
|
||||
Object.defineProperty(this, key, {
|
||||
get() {
|
||||
return trackProps[key];
|
||||
},
|
||||
set() {}
|
||||
});
|
||||
}
|
||||
|
||||
return track;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
* @file video-track-list.js
|
||||
*/
|
||||
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.
|
||||
@ -41,8 +39,6 @@ class VideoTrackList extends TrackList {
|
||||
* A list of `VideoTrack` to instantiate the list with.
|
||||
*/
|
||||
constructor(tracks = []) {
|
||||
let list;
|
||||
|
||||
// make sure only 1 track is enabled
|
||||
// sorted from last index to first index
|
||||
for (let i = tracks.length - 1; i >= 0; i--) {
|
||||
@ -52,30 +48,14 @@ class VideoTrackList extends TrackList {
|
||||
}
|
||||
}
|
||||
|
||||
// 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 VideoTrackList.prototype) {
|
||||
if (prop !== 'constructor') {
|
||||
list[prop] = VideoTrackList.prototype[prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
list = super(tracks, list);
|
||||
list.changing_ = false;
|
||||
super(tracks);
|
||||
this.changing_ = false;
|
||||
|
||||
/**
|
||||
* @member {number} VideoTrackList#selectedIndex
|
||||
* The current index of the selected {@link VideoTrack`}.
|
||||
*/
|
||||
Object.defineProperty(list, 'selectedIndex', {
|
||||
Object.defineProperty(this, 'selectedIndex', {
|
||||
get() {
|
||||
for (let i = 0; i < this.length; i++) {
|
||||
if (this[i].selected) {
|
||||
@ -86,8 +66,6 @@ class VideoTrackList extends TrackList {
|
||||
},
|
||||
set() {}
|
||||
});
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import {VideoTrackKind} from './track-enums';
|
||||
import Track from './track';
|
||||
import merge from '../utils/merge-options';
|
||||
import * as browser from '../utils/browser.js';
|
||||
|
||||
/**
|
||||
* A representation of a single `VideoTrack`.
|
||||
@ -37,18 +36,9 @@ class VideoTrack extends Track {
|
||||
kind: VideoTrackKind[options.kind] || ''
|
||||
});
|
||||
|
||||
// on IE8 this will be a document element
|
||||
// for every other browser this will be a normal object
|
||||
const track = super(settings);
|
||||
let selected = false;
|
||||
super(settings);
|
||||
|
||||
if (browser.IS_IE8) {
|
||||
for (const prop in VideoTrack.prototype) {
|
||||
if (prop !== 'constructor') {
|
||||
track[prop] = VideoTrack.prototype[prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
let selected = false;
|
||||
|
||||
/**
|
||||
* @memberof VideoTrack
|
||||
@ -59,7 +49,7 @@ class VideoTrack extends Track {
|
||||
*
|
||||
* @fires VideoTrack#selectedchange
|
||||
*/
|
||||
Object.defineProperty(track, 'selected', {
|
||||
Object.defineProperty(this, 'selected', {
|
||||
get() {
|
||||
return selected;
|
||||
},
|
||||
@ -88,10 +78,8 @@ class VideoTrack extends Track {
|
||||
// set selected to that true value otherwise
|
||||
// we keep it false
|
||||
if (settings.selected) {
|
||||
track.selected = settings.selected;
|
||||
this.selected = settings.selected;
|
||||
}
|
||||
|
||||
return track;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -55,8 +55,6 @@ export const ANDROID_VERSION = (function() {
|
||||
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_FIREFOX = (/Firefox/i).test(USER_AGENT);
|
||||
@ -70,7 +68,6 @@ export const CHROME_VERSION = (function() {
|
||||
}
|
||||
return null;
|
||||
}());
|
||||
export const IS_IE8 = (/MSIE\s8\.0/).test(USER_AGENT);
|
||||
export const IE_VERSION = (function() {
|
||||
const result = (/MSIE\s(\d+)\.\d/).exec(USER_AGENT);
|
||||
let version = result && parseFloat(result[1]);
|
||||
@ -90,7 +87,3 @@ export const TOUCH_ENABLED = Dom.isReal() && (
|
||||
'ontouchstart' in window ||
|
||||
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';
|
||||
|
||||
/**
|
||||
* 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
|
||||
* `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 el.currentStyle[prop] || '';
|
||||
return '';
|
||||
}
|
||||
|
||||
@ -8,7 +8,6 @@ import log from './log.js';
|
||||
import tsml from 'tsml';
|
||||
import {isObject} from './obj';
|
||||
import computedStyle from './computed-style';
|
||||
import * as browser from './browser';
|
||||
|
||||
/**
|
||||
* Detect if a value is a string with any non-whitespace characters.
|
||||
@ -62,14 +61,8 @@ function classRegExp(className) {
|
||||
* @return {Boolean}
|
||||
*/
|
||||
export function isReal() {
|
||||
return (
|
||||
|
||||
// Both document and window will never be undefined thanks to `global`.
|
||||
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');
|
||||
return document === window.document;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -326,7 +319,7 @@ export function removeClass(element, classToRemove) {
|
||||
*/
|
||||
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
|
||||
// `classList` will be used by the add/remove functions.
|
||||
const has = hasClass(element, classToToggle);
|
||||
@ -391,8 +384,8 @@ export function getAttributes(tag) {
|
||||
const obj = {};
|
||||
|
||||
// known boolean attributes
|
||||
// we can check for matching boolean properties, but older browsers
|
||||
// won't know about HTML5 boolean attributes that we still read from
|
||||
// we can check for matching boolean properties, but not all browsers
|
||||
// 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' + ',';
|
||||
|
||||
if (tag && tag.attributes && tag.attributes.length > 0) {
|
||||
@ -783,12 +776,6 @@ export function isSingleLeftClick(event) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (browser.IE_VERSION === 9) {
|
||||
// Ignore IE9
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
if (event.button !== 0 || event.buttons !== 1) {
|
||||
// This is the reason we have those if else block above
|
||||
// if any special case we can catch and let it slide
|
||||
|
||||
@ -3,8 +3,6 @@
|
||||
* @module log
|
||||
*/
|
||||
import window from 'global/window';
|
||||
import {IE_VERSION} from './browser';
|
||||
import {isObject} from './obj';
|
||||
|
||||
let log;
|
||||
|
||||
@ -23,12 +21,8 @@ let history = [];
|
||||
*
|
||||
* @param {Array} args
|
||||
* The arguments to be passed to the matching console method.
|
||||
*
|
||||
* @param {boolean} [stringify]
|
||||
* By default, only old IEs should get console argument stringification,
|
||||
* but this is exposed as a parameter to facilitate testing.
|
||||
*/
|
||||
export const logByType = (type, args, stringify = !!IE_VERSION && IE_VERSION < 11) => {
|
||||
export const logByType = (type, args) => {
|
||||
const lvl = log.levels[level];
|
||||
const lvlRegExp = new RegExp(`^(${lvl})$`);
|
||||
|
||||
@ -69,31 +63,7 @@ export const logByType = (type, args, stringify = !!IE_VERSION && IE_VERSION < 1
|
||||
return;
|
||||
}
|
||||
|
||||
// IEs previous to 11 log objects uselessly as "[object Object]"; so, JSONify
|
||||
// objects and arrays for those less-capable browsers.
|
||||
if (stringify) {
|
||||
args = args.map(a => {
|
||||
if (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);
|
||||
}
|
||||
fn[Array.isArray(args) ? 'apply' : 'call'](window.console, args);
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -33,14 +33,6 @@ import xhr from 'xhr';
|
||||
import Tech from './tech/tech.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 `#`
|
||||
*
|
||||
@ -381,22 +373,17 @@ videojs.use = middlewareUse;
|
||||
* @memberOf {videojs}
|
||||
* @property {object} middleware.TERMINATOR
|
||||
*/
|
||||
// Object.defineProperty is not available in IE8
|
||||
if (!browser.IS_IE8 && Object.defineProperty) {
|
||||
Object.defineProperty(videojs, 'middleware', {
|
||||
value: {},
|
||||
writeable: false,
|
||||
enumerable: true
|
||||
});
|
||||
Object.defineProperty(videojs, 'middleware', {
|
||||
value: {},
|
||||
writeable: false,
|
||||
enumerable: true
|
||||
});
|
||||
|
||||
Object.defineProperty(videojs.middleware, 'TERMINATOR', {
|
||||
value: TERMINATOR,
|
||||
writeable: false,
|
||||
enumerable: true
|
||||
});
|
||||
} else {
|
||||
videojs.middleware = { TERMINATOR };
|
||||
}
|
||||
Object.defineProperty(videojs.middleware, 'TERMINATOR', {
|
||||
value: TERMINATOR,
|
||||
writeable: false,
|
||||
enumerable: true
|
||||
});
|
||||
|
||||
/**
|
||||
* 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`,
|
||||
* then `getComputedStyle` returns `null`, so, we do a null-check to make sure
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
<body>
|
||||
<div id="qunit"></div>
|
||||
<script src="../node_modules/qunitjs/qunit/qunit.js"></script>
|
||||
<script src="../build/temp/ie8/videojs-ie8.js"></script>
|
||||
|
||||
<!-- Execute the bundled tests first -->
|
||||
<script src="../build/temp/tests.js"></script>
|
||||
|
||||
@ -20,7 +20,6 @@ module.exports = function(config) {
|
||||
// Compling tests here
|
||||
files: [
|
||||
'../build/temp/video-js.css',
|
||||
'../build/temp/ie8/videojs-ie8.js',
|
||||
'../test/globals-shim.js',
|
||||
'../test/unit/**/*.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 TestHelpers from './test-helpers.js';
|
||||
import document from 'global/document';
|
||||
import Html5 from '../../src/js/tech/html5.js';
|
||||
import sinon from 'sinon';
|
||||
|
||||
QUnit.module('Controls', {
|
||||
@ -111,107 +110,102 @@ QUnit.test('Fullscreen control text should be correct when fullscreenchange is t
|
||||
player.dispose();
|
||||
});
|
||||
|
||||
// only run these tests if Html5 is supported.
|
||||
// IE8 can't run the Html5 tech and to test this functionality otherwith the the tech faker,
|
||||
// we'd need to implement volume functionality into tech faker
|
||||
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);
|
||||
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.muted(), false, 'player is not muted');
|
||||
assert.equal(player.volume(), 1, 'volume is above 0');
|
||||
assert.equal(player.muted(), false, 'player is not muted');
|
||||
|
||||
muteToggle.handleClick();
|
||||
muteToggle.handleClick();
|
||||
|
||||
assert.equal(player.volume(), 1, 'volume is same');
|
||||
assert.equal(player.muted(), true, 'player is muted');
|
||||
assert.equal(player.volume(), 1, 'volume is same');
|
||||
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) {
|
||||
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
||||
const muteToggle = new MuteToggle(player);
|
||||
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 muteToggle = new MuteToggle(player);
|
||||
|
||||
player.volume(0);
|
||||
assert.equal(player.lastVolume_(), 1, 'lastVolume is set');
|
||||
assert.equal(player.muted(), false, 'player is muted');
|
||||
player.volume(0);
|
||||
assert.equal(player.lastVolume_(), 1, 'lastVolume is set');
|
||||
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.muted(), false, 'muted remains false');
|
||||
assert.equal(player.volume(), 1, 'volume is set to lastVolume');
|
||||
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) {
|
||||
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
||||
const muteToggle = new MuteToggle(player);
|
||||
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 muteToggle = new MuteToggle(player);
|
||||
|
||||
player.volume(0);
|
||||
player.muted(true);
|
||||
player.lastVolume_(0.5);
|
||||
player.volume(0);
|
||||
player.muted(true);
|
||||
player.lastVolume_(0.5);
|
||||
|
||||
muteToggle.handleClick();
|
||||
muteToggle.handleClick();
|
||||
|
||||
assert.equal(player.volume(), 0.5, 'volume is set to lastVolume');
|
||||
assert.equal(player.muted(), false, 'muted is set to false');
|
||||
assert.equal(player.volume(), 0.5, 'volume is set to lastVolume');
|
||||
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) {
|
||||
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
||||
const muteToggle = new MuteToggle(player);
|
||||
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 muteToggle = new MuteToggle(player);
|
||||
|
||||
player.volume(0);
|
||||
player.muted(true);
|
||||
player.lastVolume_(0.05);
|
||||
player.volume(0);
|
||||
player.muted(true);
|
||||
player.lastVolume_(0.05);
|
||||
|
||||
muteToggle.handleClick();
|
||||
muteToggle.handleClick();
|
||||
|
||||
// `Number.prototype.toFixed()` is used here to circumvent IE9 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.muted(), false, 'muted is set to false');
|
||||
// `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.muted(), false, 'muted is set to false');
|
||||
|
||||
player.dispose();
|
||||
});
|
||||
player.dispose();
|
||||
});
|
||||
|
||||
QUnit.test('ARIA value of VolumeBar should start at 100', function(assert) {
|
||||
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
||||
const volumeBar = new VolumeBar(player);
|
||||
QUnit.test('ARIA value of VolumeBar should start at 100', function(assert) {
|
||||
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
||||
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) {
|
||||
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
||||
const volumeBar = new VolumeBar(player);
|
||||
const muteToggle = new MuteToggle(player);
|
||||
QUnit.test('Muting with MuteToggle should set ARIA value of VolumeBar to 0', function(assert) {
|
||||
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
|
||||
const volumeBar = new VolumeBar(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.muted(), false, 'Muted is false');
|
||||
assert.equal(volumeBar.el_.getAttribute('aria-valuenow'), 100, 'ARIA value of VolumeBar is 100');
|
||||
assert.equal(player.volume(), 1, 'Volume is 1');
|
||||
assert.equal(player.muted(), false, 'Muted is false');
|
||||
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
|
||||
// getting fired on `player` in the test environment, so we run it
|
||||
// manually.
|
||||
player.trigger('volumechange');
|
||||
// Because `volumechange` is triggered asynchronously, it doesn't end up
|
||||
// getting fired on `player` in the test environment, so we run it
|
||||
// manually.
|
||||
player.trigger('volumechange');
|
||||
|
||||
assert.equal(player.volume(), 1, 'Volume remains 1');
|
||||
assert.equal(player.muted(), true, 'Muted is true');
|
||||
assert.equal(volumeBar.el_.getAttribute('aria-valuenow'), 0, 'ARIA value of VolumeBar is 0');
|
||||
assert.equal(player.volume(), 1, 'Volume remains 1');
|
||||
assert.equal(player.muted(), true, 'Muted is true');
|
||||
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 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');
|
||||
|
||||
player.dispose();
|
||||
|
||||
@ -49,25 +49,6 @@ QUnit.test('should create and update a poster image', function(assert) {
|
||||
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) {
|
||||
const posterImage = new PosterImage(this.mockPlayer);
|
||||
|
||||
|
||||
@ -1,102 +1,97 @@
|
||||
/* eslint-env qunit */
|
||||
import ResizeManager from '../../src/js/resize-manager.js';
|
||||
import TestHelpers from './test-helpers.js';
|
||||
import * as browser from '../../src/js/utils/browser.js';
|
||||
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', {
|
||||
beforeEach() {
|
||||
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) {
|
||||
const rm = new ResizeManager(this.player, {ResizeObserver: null});
|
||||
|
||||
QUnit.test('ResizeManager creates an iframe if ResizeObserver is not available', function(assert) {
|
||||
const rm = new ResizeManager(this.player, {ResizeObserver: null});
|
||||
assert.equal(rm.el().tagName.toLowerCase(), 'iframe', 'we got an iframe');
|
||||
|
||||
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) {
|
||||
let roCreated = false;
|
||||
let observeCalled = false;
|
||||
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;
|
||||
}
|
||||
class MyResizeObserver {
|
||||
constructor(fn) {
|
||||
roCreated = true;
|
||||
}
|
||||
|
||||
const rm = new ResizeManager(this.player, {ResizeObserver: MyResizeObserver});
|
||||
|
||||
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();
|
||||
|
||||
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() {
|
||||
}
|
||||
observe(el) {
|
||||
observeCalled = true;
|
||||
this.el = el;
|
||||
}
|
||||
|
||||
let playerresizeCalled = 0;
|
||||
const rm = new ResizeManager(this.player, {ResizeObserver: MyResizeObserver});
|
||||
unobserve(el) {
|
||||
unobserveCalled = true;
|
||||
sameEl = this.el === el;
|
||||
}
|
||||
|
||||
this.player.one('playerresize', function() {
|
||||
playerresizeCalled++;
|
||||
});
|
||||
observer();
|
||||
disconnect() {
|
||||
disconnectCalled = true;
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
// IE8
|
||||
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];
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
/* eslint-env qunit */
|
||||
import TextTrackMenuItem from '../../../src/js/control-bar/text-track-controls/text-track-menu-item.js';
|
||||
import TestHelpers from '../test-helpers.js';
|
||||
import * as browser from '../../../src/js/utils/browser.js';
|
||||
import sinon from 'sinon';
|
||||
|
||||
QUnit.module('Text Track Controls', {
|
||||
@ -289,35 +288,31 @@ QUnit.test('enabling a captions track should disable the descriptions menu butto
|
||||
player.dispose();
|
||||
});
|
||||
|
||||
if (!browser.IS_IE8) {
|
||||
// This test doesn't work on IE8.
|
||||
// However, this test tests a specific with iOS7 where
|
||||
// the TextTrackList doesn't report track mode changes.
|
||||
// TODO: figure out why this test doens't work on IE8. https://github.com/videojs/video.js/issues/1861
|
||||
QUnit.test('menu items should polyfill mode change events', function(assert) {
|
||||
const player = TestHelpers.makePlayer({});
|
||||
let changes;
|
||||
// This test tests a specific with iOS7 where
|
||||
// the TextTrackList doesn't report track mode 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,
|
||||
// like iOS7
|
||||
player.textTracks().onchange = undefined;
|
||||
const trackMenuItem = new TextTrackMenuItem(player, {
|
||||
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();
|
||||
// emulate a TextTrackList that doesn't report track mode changes,
|
||||
// like iOS7
|
||||
player.textTracks().onchange = undefined;
|
||||
const trackMenuItem = new TextTrackMenuItem(player, {
|
||||
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();
|
||||
});
|
||||
|
||||
const chaptersTrack = {
|
||||
kind: 'chapters',
|
||||
|
||||
@ -5,10 +5,8 @@ import TrackBaseline from './track-baseline';
|
||||
import TechFaker from '../tech/tech-faker';
|
||||
import TextTrack from '../../../src/js/tracks/text-track.js';
|
||||
import TestHelpers from '../test-helpers.js';
|
||||
import proxyquireify from 'proxyquireify';
|
||||
import sinon from 'sinon';
|
||||
|
||||
const proxyquire = proxyquireify(require);
|
||||
import log from '../../../src/js/utils/log.js';
|
||||
|
||||
QUnit.module('Text Track', {
|
||||
beforeEach() {
|
||||
@ -331,6 +329,11 @@ QUnit.test('tracks are parsed if vttjs is loaded', function(assert) {
|
||||
const clock = sinon.useFakeTimers();
|
||||
const oldVTT = window.WebVTT;
|
||||
let parserCreated = false;
|
||||
const reqs = [];
|
||||
|
||||
window.xhr.onCreate = function(req) {
|
||||
reqs.push(req);
|
||||
};
|
||||
|
||||
window.WebVTT = () => {};
|
||||
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 */
|
||||
const tt = new TextTrack_({
|
||||
const tt = new TextTrack({
|
||||
tech: this.tech,
|
||||
src: 'http://example.com'
|
||||
});
|
||||
/* 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');
|
||||
|
||||
@ -372,14 +367,11 @@ QUnit.test('tracks are parsed once vttjs is loaded', function(assert) {
|
||||
const clock = sinon.useFakeTimers();
|
||||
const oldVTT = window.WebVTT;
|
||||
let parserCreated = false;
|
||||
const reqs = [];
|
||||
|
||||
// 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;
|
||||
window.xhr.onCreate = function(req) {
|
||||
reqs.push(req);
|
||||
};
|
||||
|
||||
window.WebVTT = true;
|
||||
|
||||
@ -389,13 +381,13 @@ QUnit.test('tracks are parsed once vttjs is loaded', function(assert) {
|
||||
testTech.currentTime = () => {};
|
||||
|
||||
/* eslint-disable no-unused-vars */
|
||||
const tt = new TextTrack_({
|
||||
const tt = new TextTrack({
|
||||
tech: testTech,
|
||||
src: 'http://example.com'
|
||||
});
|
||||
/* 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');
|
||||
|
||||
@ -426,23 +418,18 @@ QUnit.test('stops processing if vttjs loading errored out', function(assert) {
|
||||
const clock = sinon.useFakeTimers();
|
||||
const errorSpy = sinon.spy();
|
||||
const oldVTT = window.WebVTT;
|
||||
const oldLogError = log.error;
|
||||
const parserCreated = false;
|
||||
const reqs = [];
|
||||
|
||||
window.xhr.onCreate = function(req) {
|
||||
reqs.push(req);
|
||||
};
|
||||
|
||||
log.error = errorSpy;
|
||||
|
||||
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();
|
||||
|
||||
testTech.textTracks = () => {};
|
||||
@ -452,13 +439,13 @@ QUnit.test('stops processing if vttjs loading errored out', function(assert) {
|
||||
testTech.off.withArgs('vttjsloaded');
|
||||
|
||||
/* eslint-disable no-unused-vars */
|
||||
const tt = new TextTrack_({
|
||||
const tt = new TextTrack({
|
||||
tech: testTech,
|
||||
src: 'http://example.com'
|
||||
});
|
||||
/* 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');
|
||||
|
||||
@ -475,4 +462,5 @@ QUnit.test('stops processing if vttjs loading errored out', function(assert) {
|
||||
|
||||
clock.restore();
|
||||
window.WebVTT = oldVTT;
|
||||
log.error = oldLogError;
|
||||
});
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
/* eslint-env qunit */
|
||||
import * as browser from '../../../src/js/utils/browser.js';
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
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');
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
/* eslint-env qunit */
|
||||
import window from 'global/window';
|
||||
import document from 'global/document';
|
||||
import sinon from 'sinon';
|
||||
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`);
|
||||
});
|
||||
});
|
||||
|
||||
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');
|
||||
});
|
||||
|
||||
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) {
|
||||
|
||||
// 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) {
|
||||
const fixture = document.getElementById('qunit-fixture');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user