├── .gitignore ├── dist ├── demo │ ├── img │ │ └── logo.png │ ├── fonts │ │ ├── Lato-Bold.ttf │ │ ├── Lato-Regular.ttf │ │ ├── FranceTVBrownWeb-Bold.9814320e86d62675f34408c8f33f6a7b.ttf │ │ ├── FranceTVBrownWeb-Bold.bf112cd84605ada2d625444abb8247dd.eot │ │ ├── FranceTVBrownWeb-Bold.dd40b835b9a60b3bc92e8055172e68b4.woff │ │ ├── FranceTVBrownWeb-Bold.eadbb8d0a8c064375d225a5702a02c57.woff2 │ │ ├── FranceTVBrownWeb-Light.0e78986466082ee906a58bac87d7c18f.woff │ │ ├── FranceTVBrownWeb-Light.70aff65f8a07af368b8baf1a5f2a10cf.eot │ │ ├── FranceTVBrownWeb-Light.818a554d97c2a6fd77cf041ee16bfd46.ttf │ │ └── FranceTVBrownWeb-Light.aa5780f736f1ad20b99cb25b62561b2b.woff2 │ ├── tracks │ │ ├── JamyPlayer.stl │ │ ├── chapters.vtt │ │ └── JamyPlayer.srt │ ├── stylesheets │ │ ├── demo-red.js │ │ ├── demo-blue.js │ │ ├── demo-green.js │ │ ├── demo-green.css │ │ ├── demo-blue.css │ │ └── demo-red.css │ ├── transcripts │ │ ├── JamyPlayer.txt │ │ └── JamyPlayer.htm │ ├── index-red.html │ ├── index-green.html │ └── index.html └── MFP │ ├── fonts │ ├── icomoon.eot │ ├── icomoon.ttf │ └── icomoon.woff │ ├── trackreader │ ├── stl.js │ ├── stl.css │ └── loadTrackType-srt.js │ ├── stylesheets │ ├── screen.js │ ├── player-blue.js │ ├── player-green.js │ ├── player-red.js │ ├── player-red.css │ ├── player-blue.css │ └── player-green.css │ ├── lang │ ├── en.js │ └── fr.js │ ├── video-players │ ├── loadVideoPlayer-error.js │ ├── loadVideoPlayer-html5.js │ └── loadVideoPlayer-vimeo.js │ └── infos │ ├── en.html │ └── fr.html ├── src-demo ├── img │ └── logo.png ├── fonts │ ├── Lato-Bold.ttf │ ├── Lato-Regular.ttf │ ├── FranceTVBrownWeb-Bold.9814320e86d62675f34408c8f33f6a7b.ttf │ ├── FranceTVBrownWeb-Bold.bf112cd84605ada2d625444abb8247dd.eot │ ├── FranceTVBrownWeb-Bold.dd40b835b9a60b3bc92e8055172e68b4.woff │ ├── FranceTVBrownWeb-Light.70aff65f8a07af368b8baf1a5f2a10cf.eot │ ├── FranceTVBrownWeb-Light.818a554d97c2a6fd77cf041ee16bfd46.ttf │ ├── FranceTVBrownWeb-Bold.eadbb8d0a8c064375d225a5702a02c57.woff2 │ ├── FranceTVBrownWeb-Light.0e78986466082ee906a58bac87d7c18f.woff │ └── FranceTVBrownWeb-Light.aa5780f736f1ad20b99cb25b62561b2b.woff2 ├── tracks │ ├── JamyPlayer.stl │ ├── chapters.vtt │ └── JamyPlayer.srt ├── transcripts │ ├── JamyPlayer.txt │ └── JamyPlayer.htm ├── README.md ├── html │ ├── index-red.html │ ├── index-green.html │ └── index.html └── sass │ └── demo-green.scss ├── src ├── fonts │ ├── icomoon.eot │ ├── icomoon.ttf │ └── icomoon.woff ├── js │ ├── mfp.js │ ├── lang │ │ ├── en.js │ │ └── fr.js │ ├── lib │ │ ├── MFP_Cue.js │ │ ├── MFP_Menu.js │ │ └── MFP_Track.js │ ├── trackreader │ │ ├── loadTrackType-srt.js │ │ └── stl.scss │ └── video-players │ │ ├── loadVideoType-error.js │ │ ├── loadVideoType-html5.js │ │ └── loadVideoType-vimeo.js ├── infos │ ├── en.html │ └── fr.html └── sass │ ├── player-red.scss │ ├── player-green.scss │ └── player-blue.scss ├── .browserslistrc ├── .eslintrc ├── LICENSE ├── webpack ├── webpack.config.prod.js ├── webpack.config.dev.js └── webpack.common.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /dist/demo/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/dist/demo/img/logo.png -------------------------------------------------------------------------------- /src-demo/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/src-demo/img/logo.png -------------------------------------------------------------------------------- /src/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/src/fonts/icomoon.eot -------------------------------------------------------------------------------- /src/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/src/fonts/icomoon.ttf -------------------------------------------------------------------------------- /src/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/src/fonts/icomoon.woff -------------------------------------------------------------------------------- /dist/MFP/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/dist/MFP/fonts/icomoon.eot -------------------------------------------------------------------------------- /dist/MFP/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/dist/MFP/fonts/icomoon.ttf -------------------------------------------------------------------------------- /dist/MFP/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/dist/MFP/fonts/icomoon.woff -------------------------------------------------------------------------------- /dist/demo/fonts/Lato-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/dist/demo/fonts/Lato-Bold.ttf -------------------------------------------------------------------------------- /src-demo/fonts/Lato-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/src-demo/fonts/Lato-Bold.ttf -------------------------------------------------------------------------------- /dist/demo/fonts/Lato-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/dist/demo/fonts/Lato-Regular.ttf -------------------------------------------------------------------------------- /dist/demo/tracks/JamyPlayer.stl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/dist/demo/tracks/JamyPlayer.stl -------------------------------------------------------------------------------- /src-demo/fonts/Lato-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/src-demo/fonts/Lato-Regular.ttf -------------------------------------------------------------------------------- /src-demo/tracks/JamyPlayer.stl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/src-demo/tracks/JamyPlayer.stl -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | [production staging] 2 | >5% 3 | last 2 versions 4 | Firefox ESR 5 | not ie < 11 6 | 7 | [development] 8 | last 1 chrome version 9 | last 1 firefox version 10 | last 1 edge version 11 | -------------------------------------------------------------------------------- /dist/demo/fonts/FranceTVBrownWeb-Bold.9814320e86d62675f34408c8f33f6a7b.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/dist/demo/fonts/FranceTVBrownWeb-Bold.9814320e86d62675f34408c8f33f6a7b.ttf -------------------------------------------------------------------------------- /dist/demo/fonts/FranceTVBrownWeb-Bold.bf112cd84605ada2d625444abb8247dd.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/dist/demo/fonts/FranceTVBrownWeb-Bold.bf112cd84605ada2d625444abb8247dd.eot -------------------------------------------------------------------------------- /src-demo/fonts/FranceTVBrownWeb-Bold.9814320e86d62675f34408c8f33f6a7b.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/src-demo/fonts/FranceTVBrownWeb-Bold.9814320e86d62675f34408c8f33f6a7b.ttf -------------------------------------------------------------------------------- /src-demo/fonts/FranceTVBrownWeb-Bold.bf112cd84605ada2d625444abb8247dd.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/src-demo/fonts/FranceTVBrownWeb-Bold.bf112cd84605ada2d625444abb8247dd.eot -------------------------------------------------------------------------------- /src-demo/fonts/FranceTVBrownWeb-Bold.dd40b835b9a60b3bc92e8055172e68b4.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/src-demo/fonts/FranceTVBrownWeb-Bold.dd40b835b9a60b3bc92e8055172e68b4.woff -------------------------------------------------------------------------------- /src-demo/fonts/FranceTVBrownWeb-Light.70aff65f8a07af368b8baf1a5f2a10cf.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/src-demo/fonts/FranceTVBrownWeb-Light.70aff65f8a07af368b8baf1a5f2a10cf.eot -------------------------------------------------------------------------------- /src-demo/fonts/FranceTVBrownWeb-Light.818a554d97c2a6fd77cf041ee16bfd46.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/src-demo/fonts/FranceTVBrownWeb-Light.818a554d97c2a6fd77cf041ee16bfd46.ttf -------------------------------------------------------------------------------- /dist/demo/fonts/FranceTVBrownWeb-Bold.dd40b835b9a60b3bc92e8055172e68b4.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/dist/demo/fonts/FranceTVBrownWeb-Bold.dd40b835b9a60b3bc92e8055172e68b4.woff -------------------------------------------------------------------------------- /dist/demo/fonts/FranceTVBrownWeb-Bold.eadbb8d0a8c064375d225a5702a02c57.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/dist/demo/fonts/FranceTVBrownWeb-Bold.eadbb8d0a8c064375d225a5702a02c57.woff2 -------------------------------------------------------------------------------- /dist/demo/fonts/FranceTVBrownWeb-Light.0e78986466082ee906a58bac87d7c18f.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/dist/demo/fonts/FranceTVBrownWeb-Light.0e78986466082ee906a58bac87d7c18f.woff -------------------------------------------------------------------------------- /dist/demo/fonts/FranceTVBrownWeb-Light.70aff65f8a07af368b8baf1a5f2a10cf.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/dist/demo/fonts/FranceTVBrownWeb-Light.70aff65f8a07af368b8baf1a5f2a10cf.eot -------------------------------------------------------------------------------- /dist/demo/fonts/FranceTVBrownWeb-Light.818a554d97c2a6fd77cf041ee16bfd46.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/dist/demo/fonts/FranceTVBrownWeb-Light.818a554d97c2a6fd77cf041ee16bfd46.ttf -------------------------------------------------------------------------------- /dist/demo/fonts/FranceTVBrownWeb-Light.aa5780f736f1ad20b99cb25b62561b2b.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/dist/demo/fonts/FranceTVBrownWeb-Light.aa5780f736f1ad20b99cb25b62561b2b.woff2 -------------------------------------------------------------------------------- /src-demo/fonts/FranceTVBrownWeb-Bold.eadbb8d0a8c064375d225a5702a02c57.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/src-demo/fonts/FranceTVBrownWeb-Bold.eadbb8d0a8c064375d225a5702a02c57.woff2 -------------------------------------------------------------------------------- /src-demo/fonts/FranceTVBrownWeb-Light.0e78986466082ee906a58bac87d7c18f.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/src-demo/fonts/FranceTVBrownWeb-Light.0e78986466082ee906a58bac87d7c18f.woff -------------------------------------------------------------------------------- /src-demo/fonts/FranceTVBrownWeb-Light.aa5780f736f1ad20b99cb25b62561b2b.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mfpaccessibilite/MFP_AccessPlayer/HEAD/src-demo/fonts/FranceTVBrownWeb-Light.aa5780f736f1ad20b99cb25b62561b2b.woff2 -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "node": true 5 | }, 6 | "parserOptions": { 7 | "ecmaVersion": 6, 8 | "sourceType": "module" 9 | }, 10 | "rules": { 11 | "semi": 2 12 | } 13 | } -------------------------------------------------------------------------------- /dist/demo/tracks/chapters.vtt: -------------------------------------------------------------------------------- 1 | WEBVTT 2 | 3 | 1 4 | 00:00:00.000 --> 00:00:34.700 5 | Chapitre 1 6 | 7 | 2 8 | 00:00:34.700 --> 00:01:08.600 9 | Chapitre 2 10 | 11 | 3 12 | 00:01:08.600 --> 00:01:42.100 13 | Chapitre 3 14 | 15 | 4 16 | 00:01:42.100 --> 00:02:16.100 17 | Chapitre 4 18 | 19 | 5 20 | 00:02:16.100 --> 00:02:51,680 21 | Chapitre 5 22 | -------------------------------------------------------------------------------- /src-demo/tracks/chapters.vtt: -------------------------------------------------------------------------------- 1 | WEBVTT 2 | 3 | 1 4 | 00:00:00.000 --> 00:00:34.700 5 | Chapitre 1 6 | 7 | 2 8 | 00:00:34.700 --> 00:01:08.600 9 | Chapitre 2 10 | 11 | 3 12 | 00:01:08.600 --> 00:01:42.100 13 | Chapitre 3 14 | 15 | 4 16 | 00:01:42.100 --> 00:02:16.100 17 | Chapitre 4 18 | 19 | 5 20 | 00:02:16.100 --> 00:02:51,680 21 | Chapitre 5 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright © 2017 MFP Multimedia France Productions 2 | 3 | This program is free software: you can redistribute it and/or modify 4 | it under the terms of the GNU General Public License as published by 5 | the Free Software Foundation, either version 3 of the License, or 6 | (at your option) any later version. 7 | 8 | This program is distributed in the hope that it will be useful, 9 | but WITHOUT ANY WARRANTY; without even the implied warranty of 10 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 | GNU General Public License for more details. 12 | 13 | You should have received a copy of the GNU General Public License 14 | along with this program in the COPYING file. If not, see . 15 | -------------------------------------------------------------------------------- /webpack/webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | const Path = require('path'); 2 | const Webpack = require('webpack'); 3 | const { merge } = require('webpack-merge'); 4 | const common = require('./webpack.common.js'); 5 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 6 | 7 | module.exports = merge(common, { 8 | mode: 'production', 9 | //devtool: 'source-map', 10 | stats: 'errors-only', 11 | bail: true, 12 | plugins: [ 13 | new CleanWebpackPlugin({ 14 | cleanAfterEveryBuildPatterns: ['transcripts'], 15 | }), 16 | new Webpack.DefinePlugin({ 17 | 'process.env.NODE_ENV': JSON.stringify('production') 18 | }), 19 | new Webpack.optimize.ModuleConcatenationPlugin() 20 | ], 21 | module: { 22 | rules: [ 23 | { 24 | test: /\.(js)$/, 25 | exclude: /node_modules/, 26 | use: 'babel-loader' 27 | } 28 | ] 29 | } 30 | }); 31 | -------------------------------------------------------------------------------- /dist/MFP/trackreader/stl.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=19)}({19:function(e,t,r){"use strict";r.r(t)}}); -------------------------------------------------------------------------------- /dist/MFP/stylesheets/screen.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=10)}({10:function(e,t,r){"use strict";r.r(t)}}); -------------------------------------------------------------------------------- /dist/demo/stylesheets/demo-red.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=13)}({13:function(e,t,r){"use strict";r.r(t)}}); -------------------------------------------------------------------------------- /dist/MFP/stylesheets/player-blue.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=14)}({14:function(e,t,r){"use strict";r.r(t)}}); -------------------------------------------------------------------------------- /dist/MFP/stylesheets/player-green.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=15)}({15:function(e,t,r){"use strict";r.r(t)}}); -------------------------------------------------------------------------------- /dist/MFP/stylesheets/player-red.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=16)}({16:function(e,t,r){"use strict";r.r(t)}}); -------------------------------------------------------------------------------- /dist/demo/stylesheets/demo-blue.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=11)}({11:function(e,t,r){"use strict";r.r(t)}}); -------------------------------------------------------------------------------- /dist/demo/stylesheets/demo-green.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=12)}({12:function(e,t,r){"use strict";r.r(t)}}); -------------------------------------------------------------------------------- /webpack/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | const Path = require('path'); 2 | const Webpack = require('webpack'); 3 | const { merge } = require('webpack-merge'); 4 | const common = require('./webpack.common.js'); 5 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 6 | 7 | module.exports = merge(common, { 8 | mode: 'development', 9 | devtool: 'cheap-eval-source-map', 10 | output: { 11 | chunkFilename: 'js/[name].chunk.js' 12 | }, 13 | devServer: { 14 | host: '0.0.0.0', 15 | //open: 'firefox', 16 | openPage: 'demo/index.html', 17 | inline: true 18 | }, 19 | plugins: [ 20 | new CleanWebpackPlugin(), 21 | new Webpack.DefinePlugin({ 22 | 'process.env.NODE_ENV': JSON.stringify('development') 23 | }) 24 | ], 25 | module: { 26 | rules: [ 27 | { 28 | test: /\.(js)$/, 29 | include: Path.resolve(__dirname, '../src'), 30 | enforce: 'pre', 31 | loader: 'eslint-loader', 32 | options: { 33 | emitWarning: true, 34 | } 35 | }, 36 | { 37 | test: /\.(js)$/, 38 | include: Path.resolve(__dirname, '../src'), 39 | loader: 'babel-loader' 40 | } 41 | ] 42 | } 43 | }); 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MFP", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "mfp.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack --config webpack/webpack.config.prod.js ", 9 | "start": "webpack serve --open --config webpack/webpack.config.dev.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@babel/core": "^7.14.2", 16 | "@babel/plugin-proposal-class-properties": "^7.13.0", 17 | "@babel/plugin-syntax-dynamic-import": "^7.8.3", 18 | "@babel/preset-env": "^7.14.2", 19 | "babel-loader": "^8.2.2", 20 | "clean-webpack-plugin": "^3.0.0", 21 | "copy-webpack-plugin": "^5.1.2", 22 | "css-loader": "^5.2.4", 23 | "eslint": "^7.26.0", 24 | "eslint-loader": "^4.0.2", 25 | "file-loader": "^6.2.0", 26 | "html-webpack-plugin": "^4.5.2", 27 | "mini-css-extract-plugin": "^1.6.0", 28 | "node-sass": "^6.0.0", 29 | "sass-loader": "^10.2.0", 30 | "style-loader": "^2.0.0", 31 | "url-loader": "^4.1.1", 32 | "webpack": "^4.29.0", 33 | "webpack-cli": "^4.7.0", 34 | "webpack-dev-server": "^3.11.2", 35 | "webpack-merge": "^5.7.3" 36 | }, 37 | "dependencies": { 38 | "@babel/polyfill": "^7.12.1", 39 | "core-js": "^3.12.1", 40 | "lodash": "^4.17.21", 41 | "md5": "^2.3.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src-demo/transcripts/JamyPlayer.txt: -------------------------------------------------------------------------------- 1 | -Ici, à Hawaii, on a un volcan exceptionnel, qu'on peut observer directement d'une manière vraiment... idéale. 2 | 3 | Là, on est à quelques centaines de mètres d'une grande coulée. 4 | 5 | ... 6 | 7 | -On a un champ de lave incandescente sous les pieds. 8 | 9 | -On va tenter de voir si on arrive, avec la caméra thermique, à avoir des informations sur le trajet de la lave en dessous de la surface. 10 | 11 | Ce qu'on voit sous nos pieds, c'est la coulée active. 12 | 13 | Ce que tu vois sur l'écran de la caméra thermique, ce sont les zones les plus claires, les plus chaudes. Donc, ce sont souvent les zones où il y a la lave qui sort en surface. 14 | 15 | Ce qu'on voit, c'est ce système de tunnels souterrains de lave. 16 | 17 | La lave, dès sa sortie de l'évent, emprunte ce grand tunnel de lave. 18 | 19 | Là, on voit très bien une espèce de langue... une langue bien rouge. 20 | 21 | A chaque nouvelle coulée, une espèce de carapace se forme assez rapidement, quand la lave entre en contact avec l'air. 22 | 23 | Cette carapace va protéger thermiquement le reste de la lave qui s'écoule et qui va essayer de s'écouler en dessous de cette carapace et former ces tunnels de lave. 24 | 25 | -C'est fantastique. 26 | 27 | Là, on fait du rase-mottes, c'est génial. Génial ! 28 | 29 | On y est, on arrive à l'endroit d'où la lave jaillit. 30 | 31 | Jamais je n'aurais imaginé voir une telle chose. 32 | 33 | -------------------------------------------------------------------------------- /dist/demo/transcripts/JamyPlayer.txt: -------------------------------------------------------------------------------- 1 | -Ici, à Hawaii, on a un volcan exceptionnel, qu'on peut observer directement d'une manière vraiment... idéale. 2 | 3 | Là, on est à quelques centaines de mètres d'une grande coulée. 4 | 5 | ... 6 | 7 | -On a un champ de lave incandescente sous les pieds. 8 | 9 | -On va tenter de voir si on arrive, avec la caméra thermique, à avoir des informations sur le trajet de la lave en dessous de la surface. 10 | 11 | Ce qu'on voit sous nos pieds, c'est la coulée active. 12 | 13 | Ce que tu vois sur l'écran de la caméra thermique, ce sont les zones les plus claires, les plus chaudes. Donc, ce sont souvent les zones où il y a la lave qui sort en surface. 14 | 15 | Ce qu'on voit, c'est ce système de tunnels souterrains de lave. 16 | 17 | La lave, dès sa sortie de l'évent, emprunte ce grand tunnel de lave. 18 | 19 | Là, on voit très bien une espèce de langue... une langue bien rouge. 20 | 21 | A chaque nouvelle coulée, une espèce de carapace se forme assez rapidement, quand la lave entre en contact avec l'air. 22 | 23 | Cette carapace va protéger thermiquement le reste de la lave qui s'écoule et qui va essayer de s'écouler en dessous de cette carapace et former ces tunnels de lave. 24 | 25 | -C'est fantastique. 26 | 27 | Là, on fait du rase-mottes, c'est génial. Génial ! 28 | 29 | On y est, on arrive à l'endroit d'où la lave jaillit. 30 | 31 | Jamais je n'aurais imaginé voir une telle chose. 32 | 33 | -------------------------------------------------------------------------------- /src/js/mfp.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MFP AccessPlayer v.2.0.0 3 | * http://smartplayer.mfpst.com 4 | * 5 | * Copyright MFP Multimedia France Productions 6 | * Released under GPL 3 licence 7 | * backgroundImage: "key" 8 | * Date : 2019-07-18T02:10Z 9 | */ 10 | import MFP from './lib/MFP'; 11 | 12 | (function(){ 13 | var scriptEls = document.getElementsByTagName('script'); 14 | var thisScriptEl = scriptEls[scriptEls.length - 1]; 15 | var scriptPath = thisScriptEl.src; 16 | var mfpPath = scriptPath.substr(0, scriptPath.lastIndexOf('/') + 1); 17 | var MFPDebug = false; 18 | 19 | // including css 20 | window.mfpPath = mfpPath; 21 | window.MFP = MFP; 22 | window.MFPDebug = MFPDebug; 23 | 24 | $('head').append(''); 25 | var videos = $('*[data-mfp]'); 26 | for(var i=0; ithis.endTime)){ 69 | if(this.showing){ 70 | this.dispatchEvent('exit', this); 71 | this.showing = false; 72 | } 73 | }else{ 74 | if(!this.showing){ 75 | this.dispatchEvent('enter', this); 76 | this.showing = true; 77 | } 78 | } 79 | } 80 | 81 | } 82 | -------------------------------------------------------------------------------- /dist/MFP/lang/fr.js: -------------------------------------------------------------------------------- 1 | var lang = { 2 | video_player : 'video player', 3 | play : 'Lecture', 4 | pause : "Pause", 5 | soundOff : "Couper le son", 6 | soundOn : "Activer le son", 7 | volume : "Volume", 8 | expand : "Activer le Plein écran", 9 | compress : "Quitter le plein écran", 10 | searchBar : "Barre de progression (durée)", 11 | on : 'de', 12 | hour : 'heure', 13 | hours : 'heures', 14 | minute : 'minute', 15 | minutes : 'minutes', 16 | second : 'seconde', 17 | seconds: 'secondes', 18 | playBackrate : 'Vitesse de lecture', 19 | close : 'Fermer', 20 | subtitles : 'Sous-titres', 21 | nosubtitles : 'Aucun sous-titres', 22 | preferences : 'Personnalisation des sous-titres', 23 | fontSize : 'Taille du texte', 24 | fontFamily : 'Type de police', 25 | ffSerifMono : 'Serif Monospaced', 26 | ffSerifProp : 'Serif Proportionnel', 27 | ffSansSerifMono : 'Sans-Serif Monospace', 28 | ffSansSerifProp : 'Sans-Serif Proportionnel', 29 | ffCursive : 'Cursive', 30 | ffSmallCaps : 'Petites majuscules', 31 | fontColor : 'Couleur du texte', 32 | white : 'blanc', 33 | yellow : 'jaune', 34 | green : 'vert', 35 | cyan : 'cyan', 36 | blue : 'bleu', 37 | magenta : 'magenta', 38 | red : 'rouge', 39 | black : 'noir', 40 | fontShadowColor: 'Couleur ombre du texte', 41 | fontShadowSize: 'Taille ombre du texte', 42 | none: 'aucune', 43 | small: 'petite', 44 | medium: 'moyenne', 45 | large: 'large', 46 | backgroundColor: 'Couleur de fond', 47 | backgroundOpacity: 'Opacité du fond', 48 | chapters: 'Chapitres', 49 | videos: 'Vidéos alternatives', 50 | highdef: 'Haute définition', 51 | lowdef: 'Basse définition', 52 | audiodesc: 'Audio-description', 53 | signed: 'Langue des signes', 54 | transcripts: 'Versions textes de la vidéo', 55 | transcript: '(nouvelle fenêtre) Version texte de la vidéo', 56 | activateLiveTranscript: 'Activer le transcript temps réel', 57 | desactivateLiveTranscript: 'Désactiver le transcript temps réel', 58 | informations:'Informations', 59 | activate:'Activer', 60 | desactivate:'Désactiver', 61 | nosupport:'Désolé, le format %s n\'est pas supporté', 62 | selectTranscript:'Selectionnez le transcript live à afficher', 63 | buffering:'Chargement en cours...' 64 | }; 65 | -------------------------------------------------------------------------------- /src/js/lang/fr.js: -------------------------------------------------------------------------------- 1 | var lang = { 2 | video_player : 'video player', 3 | play : 'Lecture', 4 | pause : "Pause", 5 | soundOff : "Couper le son", 6 | soundOn : "Activer le son", 7 | volume : "Volume", 8 | expand : "Activer le Plein écran", 9 | compress : "Quitter le plein écran", 10 | searchBar : "Barre de progression (durée)", 11 | on : 'de', 12 | hour : 'heure', 13 | hours : 'heures', 14 | minute : 'minute', 15 | minutes : 'minutes', 16 | second : 'seconde', 17 | seconds: 'secondes', 18 | playBackrate : 'Vitesse de lecture', 19 | close : 'Fermer', 20 | subtitles : 'Sous-titres', 21 | nosubtitles : 'Aucun sous-titres', 22 | preferences : 'Personnalisation des sous-titres', 23 | fontSize : 'Taille du texte', 24 | fontFamily : 'Type de police', 25 | ffSerifMono : 'Serif Monospaced', 26 | ffSerifProp : 'Serif Proportionnel', 27 | ffSansSerifMono : 'Sans-Serif Monospace', 28 | ffSansSerifProp : 'Sans-Serif Proportionnel', 29 | ffCursive : 'Cursive', 30 | ffSmallCaps : 'Petites majuscules', 31 | fontColor : 'Couleur du texte', 32 | white : 'blanc', 33 | yellow : 'jaune', 34 | green : 'vert', 35 | cyan : 'cyan', 36 | blue : 'bleu', 37 | magenta : 'magenta', 38 | red : 'rouge', 39 | black : 'noir', 40 | fontShadowColor: 'Couleur ombre du texte', 41 | fontShadowSize: 'Taille ombre du texte', 42 | none: 'aucune', 43 | small: 'petite', 44 | medium: 'moyenne', 45 | large: 'large', 46 | backgroundColor: 'Couleur de fond', 47 | backgroundOpacity: 'Opacité du fond', 48 | chapters: 'Chapitres', 49 | videos: 'Vidéos alternatives', 50 | highdef: 'Haute définition', 51 | lowdef: 'Basse définition', 52 | audiodesc: 'Audio-description', 53 | signed: 'Langue des signes', 54 | transcripts: 'Versions textes de la vidéo', 55 | transcript: '(nouvelle fenêtre) Version texte de la vidéo', 56 | activateLiveTranscript: 'Activer le transcript temps réel', 57 | desactivateLiveTranscript: 'Désactiver le transcript temps réel', 58 | informations:'Informations', 59 | activate:'Activer', 60 | desactivate:'Désactiver', 61 | nosupport:'Désolé, le format %s n\'est pas supporté', 62 | selectTranscript:'Selectionnez le transcript live à afficher', 63 | buffering:'Chargement en cours...' 64 | }; 65 | -------------------------------------------------------------------------------- /dist/MFP/video-players/loadVideoPlayer-error.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function r(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(n,i,function(t){return e[t]}.bind(null,i));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=22)}({22:function(e,t){class r{constructor(e,t,r){this.video=e,this.options=t,this.container=r,this.volume=1,this.currentTime=0,this.duration=0}destroy(){}init(){return new Promise((e,t)=>{const r=$(this.container).find(".video-container")[0],n=$(r).height(),i=`\n
\n

${this.video.msg}

\n
\n `;$(r).html(i),e()})}canChangeSpeedRate(){return new Promise((e,t)=>{e(!1)})}getPosibleSpeedRates(){return new Promise((e,t)=>{e([])})}webkitEnterFullscreen(){return!1}on(e,t){return t()}off(e,t=null){return!1}play(){return!1}pause(){return!1}getDuration(){return new Promise((e,t)=>{e(this.duration)})}getCurrentTime(){return new Promise((e,t)=>{e(this.currentTime)})}setCurrentTime(e){this.currentTime=e}getBuffered(){return new Promise((e,t)=>{e(this.buffered)})}getTextTracks(){return new Promise((e,t)=>{e(this.textTracks)})}getCurrentSrc(){return new Promise((e,t)=>{e(this.currentSrc)})}setSrc(e){this.src=e}getPaused(){return new Promise((e,t)=>{e(this.paused)})}setControls(e){this.controls=e}setTabIndex(e){this.tabindex=e}getPlaybackRate(){return new Promise((e,t)=>{e(1)})}setPlaybackRate(e){this.playbackRate=e}getVolume(){return new Promise((e,t)=>{e(this.volume)})}setVolume(e){this.volume=e}}MFP.prototype.loadVideoError=function(e){return new Promise((t,n)=>{const i=new r(e,this.options,this.container);i.init().then(()=>{t(i)})})}}}); -------------------------------------------------------------------------------- /dist/MFP/trackreader/stl.css: -------------------------------------------------------------------------------- 1 | .mfp-wrapper.track-stl video::cue{font-family:Arial, Roboto, 'Arial Unicode Ms', Arial, Helvetica, Verdana, 'PT Sans Caption', sans-serif;color:white;background-color:transparent !important;font-size:50%}.mfp-wrapper.track-stl .mfp-subtitles{font-family:Arial, Roboto, 'Arial Unicode Ms', Helvetica, Verdana, 'PT Sans Caption', sans-serif;color:white;background-color:transparent !important;font-size:50%}.mfp-subtitles .mfp-lh{font-size:200%}::cue(c.mfp-lh){font-size:200%}.mfp-subtitles .mfp-lh .mfp-lh{font-size:100%}::cue(c.mfp-lh c.mfp-lh){font-size:100%}.mfp-subtitles .mfp-ac-black{color:black;text-shadow:-1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF}::cue(c.mfp-ac-black){color:black;text-shadow:-1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF}.mfp-subtitles .mfp-ac-red{color:red;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}::cue(c.mfp-ac-red){color:red;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}.mfp-subtitles .mfp-ac-green{color:green;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}::cue(c.mfp-ac-green){color:green;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}.mfp-subtitles .mfp-ac-yellow{color:yellow;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}::cue(c.mfp-ac-yellow){color:yellow;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}.mfp-subtitles .mfp-ac-blue{color:blue;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}::cue(c.mfp-ac-blue){color:blue;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}.mfp-subtitles .mfp-ac-magenta{color:magenta;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}::cue(c.mfp-ac-magenta){color:magenta;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}.mgp-subtitles .mfp-ac-cyan{color:cyan;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}::cue(c.mfp-ac-cyan){color:cyan;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}.mfp-subtitles .mfp-ac-white{color:white;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}::cue(c.mfp-ac-white){color:white;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}.mfp-subtitles .mfp-bgc-black{background-color:black}::cue(c.mfp-bgc-black){background-color:black}.mfp-subtitles .mfp-bgc-red{background-color:red}::cue(c.mfp-bgc-red){background-color:red}.mfp-subtitles .mfp-bgc-green{background-color:green}::cue(c.mfp-bgc-green){background-color:green}.mfp-subtitles .mfp-bgc-yellow{background-color:yellow}::cue(c.mfp-bgc-yellow){background-color:yellow}.mfp-subtitles .mfp-bgc-blue{background-color:blue}::cue(c.mfp-bgc-blue){background-color:blue}.mfp-subtitles .mfp-bgc-magenta{background-color:magenta}::cue(c.mfp-bgc-magenta){background-color:magenta}.mfp-subtitles .mfp-bgc-cyan{background-color:cyan}::cue(c.mfp-bgc-cyan){background-color:cyan}.mfp-subtitles .mfp-bgc-white{background-color:white}::cue(c.mfp-bgc-white){background-color:white} 2 | 3 | -------------------------------------------------------------------------------- /src-demo/tracks/JamyPlayer.srt: -------------------------------------------------------------------------------- 1 | 1 2 | 00:00:02,840 --> 00:00:06,400 3 | -Ici, à Hawaii, 4 | on a un volcan exceptionnel, 5 | 6 | 2 7 | 00:00:06,720 --> 00:00:09,120 8 | qu'on peut observer directement 9 | 10 | 3 11 | 00:00:09,440 --> 00:00:12,880 12 | d'une manière vraiment... idéale. 13 | 14 | 4 15 | 00:00:16,400 --> 00:00:20,640 16 | Là, on est à quelques centaines 17 | de mètres d'une grande coulée. 18 | 19 | 5 20 | 00:00:20,960 --> 00:00:48,520 21 | ... 22 | 23 | 6 24 | 00:00:48,840 --> 00:00:50,480 25 | -On a un champ 26 | 27 | 7 28 | 00:00:50,800 --> 00:00:54,440 29 | de lave incandescente 30 | sous les pieds. 31 | 32 | 8 33 | 00:00:54,760 --> 00:00:59,120 34 | -On va tenter de voir si on arrive, 35 | avec la caméra thermique, 36 | 37 | 9 38 | 00:00:59,440 --> 00:01:03,600 39 | à avoir des informations 40 | sur le trajet de la lave 41 | 42 | 10 43 | 00:01:03,920 --> 00:01:06,680 44 | en dessous de la surface. 45 | 46 | 11 47 | 00:01:09,640 --> 00:01:13,200 48 | Ce qu'on voit sous nos pieds, 49 | c'est la coulée active. 50 | 51 | 12 52 | 00:01:13,520 --> 00:01:14,560 53 | Ce que tu vois 54 | 55 | 13 56 | 00:01:14,880 --> 00:01:19,880 57 | sur l'écran de la caméra thermique, 58 | ce sont les zones les plus claires, 59 | 60 | 14 61 | 00:01:20,200 --> 00:01:25,480 62 | les plus chaudes. Donc, ce sont 63 | souvent les zones où il y a la lave 64 | 65 | 15 66 | 00:01:25,800 --> 00:01:28,040 67 | qui sort en surface. 68 | 69 | 16 70 | 00:01:40,720 --> 00:01:45,840 71 | Ce qu'on voit, c'est ce système 72 | de tunnels souterrains de lave. 73 | 74 | 17 75 | 00:01:46,160 --> 00:01:51,000 76 | La lave, dès sa sortie de l'évent, 77 | emprunte ce grand tunnel de lave. 78 | 79 | 18 80 | 00:01:52,680 --> 00:01:56,440 81 | Là, on voit très bien 82 | une espèce de langue... 83 | 84 | 19 85 | 00:01:56,760 --> 00:01:59,080 86 | une langue bien rouge. 87 | 88 | 20 89 | 00:02:10,760 --> 00:02:14,680 90 | A chaque nouvelle coulée, 91 | une espèce de carapace se forme 92 | 93 | 21 94 | 00:02:15,000 --> 00:02:19,160 95 | assez rapidement, quand la lave 96 | entre en contact avec l'air. 97 | 98 | 22 99 | 00:02:19,480 --> 00:02:20,600 100 | Cette carapace 101 | 102 | 23 103 | 00:02:20,920 --> 00:02:25,560 104 | va protéger thermiquement 105 | le reste de la lave qui s'écoule 106 | 107 | 24 108 | 00:02:25,880 --> 00:02:30,120 109 | et qui va essayer de s'écouler 110 | en dessous de cette carapace 111 | 112 | 25 113 | 00:02:30,440 --> 00:02:33,080 114 | et former ces tunnels de lave. 115 | 116 | 26 117 | 00:02:33,400 --> 00:02:36,720 118 | -C'est fantastique. 119 | Là, on fait du rase-mottes, 120 | 121 | 27 122 | 00:02:37,040 --> 00:02:39,080 123 | c'est génial. Génial ! 124 | 125 | 28 126 | 00:02:39,400 --> 00:02:40,360 127 | On y est, 128 | 129 | 29 130 | 00:02:40,680 --> 00:02:44,720 131 | on arrive 132 | à l'endroit d'où la lave jaillit. 133 | 134 | 30 135 | 00:02:45,560 --> 00:02:49,680 136 | Jamais je n'aurais imaginé 137 | voir une telle chose. 138 | 139 | -------------------------------------------------------------------------------- /dist/MFP/video-players/loadVideoPlayer-html5.js: -------------------------------------------------------------------------------- 1 | !function(e){var r={};function t(n){if(r[n])return r[n].exports;var i=r[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,t),i.l=!0,i.exports}t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:n})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,r){if(1&r&&(e=t(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(t.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var i in e)t.d(n,i,function(r){return e[r]}.bind(null,i));return n},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p="",t(t.s=20)}({20:function(e,r){class t{constructor(e,r){this.video=e,this.container=r,this.seeking=!1}destroy(){}init(){return new Promise((e,r)=>{this.video.fullscreen&&this.webkitEnterFullscreen();const t=`\n `;$(this.container).find(".video-container").html(t),this.videoPlayer=$(this.container).find("video")[0],e()})}canChangeSpeedRate(){return new Promise((e,r)=>{e(!0)})}getPosibleSpeedRates(){return new Promise((e,r)=>{e([.25,.5,1,1.5,2])})}webkitExitFullscreen(){this.fullScreen=!1,$(this.container).removeClass("vimeo-fullscreen")}webkitEnterFullscreen(){$(this.container).addClass("vimeo-fullscreen"),this.fullScreen=!0}on(e,r){return"playbackratechange"==e&&(e="ratechange"),$(this.videoPlayer).on(e,r)}off(e,r=null){return"playbackratechange"==e&&(e="ratechange"),$(this.videoPlayer).off(e,r)}play(){return this.videoPlayer.play()}pause(){return this.videoPlayer.pause()}getDuration(){return new Promise((e,r)=>{e(this.videoPlayer.duration)})}getCurrentTime(){return new Promise((e,r)=>{e(this.videoPlayer.currentTime)})}setCurrentTime(e){return new Promise((r,t)=>{this.videoPlayer.currentTime=e,r(this.videoPlayer.currentTime)})}getBuffered(){return new Promise((e,r)=>{e(this.videoPlayer.buffered)})}getTextTracks(){return new Promise((e,r)=>{e(this.videoPlayer.textTracks)})}getCurrentSrc(){return new Promise((e,r)=>{e(this.videoPlayer.currentSrc)})}setSrc(e){this.videoPlayer.src=e}getPaused(){return new Promise((e,r)=>{e(this.videoPlayer.paused)})}setControls(e){this.videoPlayer.controls=e}setTabIndex(e){this.videoPlayer.tabindex=e}setPlaybackRate(e){return new Promise((r,t)=>{this.videoPlayer.playbackRate=e,r(e)})}getPlaybackRate(){return new Promise((e,r)=>{e(this.videoPlayer.playbackRate)})}getVolume(){return new Promise((e,r)=>{e(this.videoPlayer.volume)})}setVolume(e){return new Promise((r,t)=>{this.videoPlayer.volume=e,r(this.videoPlayer.volume)})}setMuted(e){return new Promise((r,t)=>{this.videoPlayer.muted=e,r()})}}MFP.prototype.loadVideoHtml5=function(e){return new Promise((r,n)=>{"object"!=typeof e&&(e={src:e}),e.fullscreen=this.notSupportedStandarFullScreen;const i=new t(e,this.container);i.init().then(()=>{r(i)})})}}}); -------------------------------------------------------------------------------- /dist/demo/tracks/JamyPlayer.srt: -------------------------------------------------------------------------------- 1 | 1 2 | 00:00:02,840 --> 00:00:06,400 3 | -Ici, à Hawaii, 4 | on a un volcan exceptionnel, 5 | 6 | 2 7 | 00:00:06,720 --> 00:00:09,120 8 | qu'on peut observer directement 9 | 10 | 3 11 | 00:00:09,440 --> 00:00:12,880 12 | d'une manière vraiment... idéale. 13 | 14 | 4 15 | 00:00:16,400 --> 00:00:20,640 16 | Là, on est à quelques centaines 17 | de mètres d'une grande coulée. 18 | 19 | 5 20 | 00:00:20,960 --> 00:00:48,520 21 | ... 22 | 23 | 6 24 | 00:00:48,840 --> 00:00:50,480 25 | -On a un champ 26 | 27 | 7 28 | 00:00:50,800 --> 00:00:54,440 29 | de lave incandescente 30 | sous les pieds. 31 | 32 | 8 33 | 00:00:54,760 --> 00:00:59,120 34 | -On va tenter de voir si on arrive, 35 | avec la caméra thermique, 36 | 37 | 9 38 | 00:00:59,440 --> 00:01:03,600 39 | à avoir des informations 40 | sur le trajet de la lave 41 | 42 | 10 43 | 00:01:03,920 --> 00:01:06,680 44 | en dessous de la surface. 45 | 46 | 11 47 | 00:01:09,640 --> 00:01:13,200 48 | Ce qu'on voit sous nos pieds, 49 | c'est la coulée active. 50 | 51 | 12 52 | 00:01:13,520 --> 00:01:14,560 53 | Ce que tu vois 54 | 55 | 13 56 | 00:01:14,880 --> 00:01:19,880 57 | sur l'écran de la caméra thermique, 58 | ce sont les zones les plus claires, 59 | 60 | 14 61 | 00:01:20,200 --> 00:01:25,480 62 | les plus chaudes. Donc, ce sont 63 | souvent les zones où il y a la lave 64 | 65 | 15 66 | 00:01:25,800 --> 00:01:28,040 67 | qui sort en surface. 68 | 69 | 16 70 | 00:01:40,720 --> 00:01:45,840 71 | Ce qu'on voit, c'est ce système 72 | de tunnels souterrains de lave. 73 | 74 | 17 75 | 00:01:46,160 --> 00:01:51,000 76 | La lave, dès sa sortie de l'évent, 77 | emprunte ce grand tunnel de lave. 78 | 79 | 18 80 | 00:01:52,680 --> 00:01:56,440 81 | Là, on voit très bien 82 | une espèce de langue... 83 | 84 | 19 85 | 00:01:56,760 --> 00:01:59,080 86 | une langue bien rouge. 87 | 88 | 20 89 | 00:02:10,760 --> 00:02:14,680 90 | A chaque nouvelle coulée, 91 | une espèce de carapace se forme 92 | 93 | 21 94 | 00:02:15,000 --> 00:02:19,160 95 | assez rapidement, quand la lave 96 | entre en contact avec l'air. 97 | 98 | 22 99 | 00:02:19,480 --> 00:02:20,600 100 | Cette carapace 101 | 102 | 23 103 | 00:02:20,920 --> 00:02:25,560 104 | va protéger thermiquement 105 | le reste de la lave qui s'écoule 106 | 107 | 24 108 | 00:02:25,880 --> 00:02:30,120 109 | et qui va essayer de s'écouler 110 | en dessous de cette carapace 111 | 112 | 25 113 | 00:02:30,440 --> 00:02:33,080 114 | et former ces tunnels de lave. 115 | 116 | 26 117 | 00:02:33,400 --> 00:02:36,720 118 | -C'est fantastique. 119 | Là, on fait du rase-mottes, 120 | 121 | 27 122 | 00:02:37,040 --> 00:02:39,080 123 | c'est génial. Génial ! 124 | 125 | 28 126 | 00:02:39,400 --> 00:02:40,360 127 | On y est, 128 | 129 | 29 130 | 00:02:40,680 --> 00:02:44,720 131 | on arrive 132 | à l'endroit d'où la lave jaillit. 133 | 134 | 30 135 | 00:02:45,560 --> 00:02:49,680 136 | Jamais je n'aurais imaginé 137 | voir une telle chose. 138 | 139 | -------------------------------------------------------------------------------- /src/js/trackreader/loadTrackType-srt.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MFP AccessPlayer v.2.0.0 3 | * http://smartplayer.mfpst.com 4 | * 5 | * Copyright MFP Multimedia France Productions 6 | * Released under GPL 3 licence 7 | * backgroundImage: "key" 8 | * Date : 2019-07-18T02:10Z 9 | */ 10 | 11 | import MFP_Cue from '../lib/MFP_Cue'; 12 | 13 | MFP.prototype.loadTrackTypeSRT=function(player, filepath, track){ 14 | 15 | var parser={ 16 | player:null, 17 | track:null, 18 | render:function(filepath){ 19 | var parser = this; 20 | var xhr = new XMLHttpRequest(); 21 | xhr.open('GET', filepath, true); 22 | xhr.responseType = ''; 23 | xhr.onload = function(e) { 24 | if (xhr.status != 200) { 25 | // error loading: 26 | parser.track.mode=disabled; 27 | parser.player.subtitles.splice($(parser.track).data('pos'),1); 28 | parser.player.initSubtitlesMenu(); 29 | } 30 | else{ 31 | parser.track.mode='hidden'; 32 | //parser.track.readyState=2; 33 | function strip(s) { 34 | return s.replace(/^\s+|\s+$/g,""); 35 | } 36 | var data=xhr.response; 37 | var srt = data.replace(/\r\n|\r|\n/g, '\n'); 38 | 39 | srt = strip(srt); 40 | 41 | var srt_ = srt.split('\n\n'); 42 | 43 | var cont = 0; 44 | 45 | for(let s in srt_) { 46 | let st = srt_[s].split('\n'); 47 | 48 | if(st.length >=2) { 49 | let n = st[0]; 50 | 51 | let i = strip(st[1].split(' --> ')[0]); 52 | let o = strip(st[1].split(' --> ')[1]); 53 | let t = st[2]; 54 | var tcit = (parseInt(i.substring(0,2))*60*60)+(parseInt(i.substring(3,5))*60)+parseInt(i.substring(6,8))+(parseInt(i.substring(9,12))/1000); 55 | var tcot = (parseInt(o.substring(0,2))*60*60)+(parseInt(o.substring(3,5))*60)+parseInt(o.substring(6,8))+(parseInt(o.substring(9,12))/1000); 56 | if(st.length > 2) { 57 | for(let j=3; jAide sur l'utilisation du lecteur MFP AccessPlayer 2 |
Liste des boutons d'action
3 |
    4 |
  • Lecture : lance la lecture de la vidéo.
    • 5 |
  • Pause : met la vidéo en pause.
    • 6 |
  • Couper le son et Activer le son : coupe et active le son.
    • 7 |
  • Passer en basse définition : actuellement en haute définition, permet de passer en basse définition pour un affichage plus rapide lors d'une connexion réseau de qualité insuffisante.
    • 8 |
  •  : actuellement en basse définition, passer en haute définition pour une meilleure qualité de l'image. Nécessite une connexion réseau de qualité suffisante.
    • 9 |
  • Activer/Désactiver l'audiodescription : permeter d'activier ou de désactiver une version audiodécrite de la vidéo.
    • 10 |
  • Activer/Désactiver la langue des signes : permet d'activer/désactiver une version de la vidéo incluant une traduction en langue des signes.
    • 11 |
  • Sous-titres : Choix du sous-titre.
    • 12 |
  • Chapitres : Choix du chapitre de la vidéo.
    • 13 |
  • Transcripts : Propose les versions textes de la vidéo en téléchargement.
    • 14 |
  • Activer/Désactiver le transcript temps réel : Active ou desactive le transcript temps réel.
    • 15 |
  • Informations : Affiche cette fenêtre d'informations.
    • 16 |
  • Plein écran : Passe la lecture de la vidéo en plein écran.
    • 17 |
  • Quitter le plein écran : Quitte la lecture de la vidéo en plein écran.
    • 18 |
19 | 20 |
Navigation clavier
21 |
    22 |
  • Vous pouvez passer d'un bouton à l'autre avec la touche TAB (Alt+TAB sur Safari). L'appui sur la touche Entrée active le bouton.
    • 23 |
  • Dans les menus de séléction, vous pouvez changer d'option à l'aide des flêches de direction.
    • 24 |
  • Lors de la séléction du curseur de recherche vidéo, vous pouvez avancer et reculer de 5 secondes à l'aide des flèches de direction.
    • 25 |
  • Lors de la séléction du curseur de son, vous pouvez baisser ou augmenter le son à l'aide des flèches de direction.
    • 26 |
27 | 28 | Crédits France TV Access : Dépôt Github du lecteur vidéo MFP AccessPlayer, sous licence GPL 3. 29 | -------------------------------------------------------------------------------- /src/infos/fr.html: -------------------------------------------------------------------------------- 1 |

Aide sur l'utilisation du lecteur MFP AccessPlayer

2 |
Liste des boutons d'action
3 |
    4 |
  • Lecture : lance la lecture de la vidéo.
    • 5 |
  • Pause : met la vidéo en pause.
    • 6 |
  • Couper le son et Activer le son : coupe et active le son.
    • 7 |
  • Passer en basse définition : actuellement en haute définition, permet de passer en basse définition pour un affichage plus rapide lors d'une connexion réseau de qualité insuffisante.
    • 8 |
  •  : actuellement en basse définition, passer en haute définition pour une meilleure qualité de l'image. Nécessite une connexion réseau de qualité suffisante.
    • 9 |
  • Activer/Désactiver l'audiodescription : permeter d'activier ou de désactiver une version audiodécrite de la vidéo.
    • 10 |
  • Activer/Désactiver la langue des signes : permet d'activer/désactiver une version de la vidéo incluant une traduction en langue des signes.
    • 11 |
  • Sous-titres : Choix du sous-titre.
    • 12 |
  • Chapitres : Choix du chapitre de la vidéo.
    • 13 |
  • Transcripts : Propose les versions textes de la vidéo en téléchargement.
    • 14 |
  • Activer/Désactiver le transcript temps réel : Active ou desactive le transcript temps réel.
    • 15 |
  • Informations : Affiche cette fenêtre d'informations.
    • 16 |
  • Plein écran : Passe la lecture de la vidéo en plein écran.
    • 17 |
  • Quitter le plein écran : Quitte la lecture de la vidéo en plein écran.
    • 18 |
19 | 20 |
Navigation clavier
21 |
    22 |
  • Vous pouvez passer d'un bouton à l'autre avec la touche TAB (Alt+TAB sur Safari). L'appui sur la touche Entrée active le bouton.
    • 23 |
  • Dans les menus de séléction, vous pouvez changer d'option à l'aide des flêches de direction.
    • 24 |
  • Lors de la séléction du curseur de recherche vidéo, vous pouvez avancer et reculer de 5 secondes à l'aide des flèches de direction.
    • 25 |
  • Lors de la séléction du curseur de son, vous pouvez baisser ou augmenter le son à l'aide des flèches de direction.
    • 26 |
27 | 28 | Crédits France TV Access : Dépôt Github du lecteur vidéo MFP AccessPlayer, sous licence GPL 3. 29 | -------------------------------------------------------------------------------- /dist/MFP/infos/en.html: -------------------------------------------------------------------------------- 1 |

Aide sur l'utilisation du lecteur MFP AccessPlayer

2 |
Liste des boutons d'action
3 |
    4 |
  • Lecture : lance la lecture de la vidéo.
    • 5 |
  • Pause : met la vidéo en pause.
    • 6 |
  • Couper le son et Activer le son : coupe et active le son.
    • 7 |
  • Passer en basse définition : actuellement en haute définition, permet de passer en basse définition pour un affichage plus rapide lors d'une connexion réseau de qualité insuffisante.
    • 8 |
  •  : actuellement en basse définition, passer en haute définition pour une meilleure qualité de l'image. Nécessite une connexion réseau de qualité suffisante.
    • 9 |
  • Activer/Désactiver l'audiodescription : permeter d'activier ou de désactiver une version audiodécrite de la vidéo.
    • 10 |
  • Activer/Désactiver la langue des signes : permet d'activer/désactiver une version de la vidéo incluant une traduction en langue des signes.
    • 11 |
  • Sous-titres : Choix du sous-titre.
    • 12 |
  • Chapitres : Choix du chapitre de la vidéo.
    • 13 |
  • Transcripts : Propose les versions textes de la vidéo en téléchargement.
    • 14 |
  • Activer/Désactiver le transcript temps réel : Active ou desactive le transcript temps réel.
    • 15 |
  • Informations : Affiche cette fenêtre d'informations.
    • 16 |
  • Plein écran : Passe la lecture de la vidéo en plein écran.
    • 17 |
  • Quitter le plein écran : Quitte la lecture de la vidéo en plein écran.
    • 18 |
19 | 20 |
Navigation clavier
21 |
    22 |
  • Vous pouvez passer d'un bouton à l'autre avec la touche TAB (Alt+TAB sur Safari). L'appui sur la touche Entrée active le bouton.
    • 23 |
  • Dans les menus de séléction, vous pouvez changer d'option à l'aide des flêches de direction.
    • 24 |
  • Lors de la séléction du curseur de recherche vidéo, vous pouvez avancer et reculer de 5 secondes à l'aide des flèches de direction.
    • 25 |
  • Lors de la séléction du curseur de son, vous pouvez baisser ou augmenter le son à l'aide des flèches de direction.
    • 26 |
27 | 28 | Crédits France TV Access : Dépôt Github du lecteur vidéo MFP AccessPlayer, sous licence GPL 3. 29 | -------------------------------------------------------------------------------- /dist/MFP/infos/fr.html: -------------------------------------------------------------------------------- 1 |

Aide sur l'utilisation du lecteur MFP AccessPlayer

2 |
Liste des boutons d'action
3 |
    4 |
  • Lecture : lance la lecture de la vidéo.
    • 5 |
  • Pause : met la vidéo en pause.
    • 6 |
  • Couper le son et Activer le son : coupe et active le son.
    • 7 |
  • Passer en basse définition : actuellement en haute définition, permet de passer en basse définition pour un affichage plus rapide lors d'une connexion réseau de qualité insuffisante.
    • 8 |
  •  : actuellement en basse définition, passer en haute définition pour une meilleure qualité de l'image. Nécessite une connexion réseau de qualité suffisante.
    • 9 |
  • Activer/Désactiver l'audiodescription : permeter d'activier ou de désactiver une version audiodécrite de la vidéo.
    • 10 |
  • Activer/Désactiver la langue des signes : permet d'activer/désactiver une version de la vidéo incluant une traduction en langue des signes.
    • 11 |
  • Sous-titres : Choix du sous-titre.
    • 12 |
  • Chapitres : Choix du chapitre de la vidéo.
    • 13 |
  • Transcripts : Propose les versions textes de la vidéo en téléchargement.
    • 14 |
  • Activer/Désactiver le transcript temps réel : Active ou desactive le transcript temps réel.
    • 15 |
  • Informations : Affiche cette fenêtre d'informations.
    • 16 |
  • Plein écran : Passe la lecture de la vidéo en plein écran.
    • 17 |
  • Quitter le plein écran : Quitte la lecture de la vidéo en plein écran.
    • 18 |
19 | 20 |
Navigation clavier
21 |
    22 |
  • Vous pouvez passer d'un bouton à l'autre avec la touche TAB (Alt+TAB sur Safari). L'appui sur la touche Entrée active le bouton.
    • 23 |
  • Dans les menus de séléction, vous pouvez changer d'option à l'aide des flêches de direction.
    • 24 |
  • Lors de la séléction du curseur de recherche vidéo, vous pouvez avancer et reculer de 5 secondes à l'aide des flèches de direction.
    • 25 |
  • Lors de la séléction du curseur de son, vous pouvez baisser ou augmenter le son à l'aide des flèches de direction.
    • 26 |
27 | 28 | Crédits France TV Access : Dépôt Github du lecteur vidéo MFP AccessPlayer, sous licence GPL 3. 29 | -------------------------------------------------------------------------------- /src/js/lib/MFP_Menu.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MFP AccessPlayer v.2.0.0 3 | * http://smartplayer.mfpst.com 4 | * 5 | * Copyright MFP Multimedia France Productions 6 | * Released under GPL 3 licence 7 | * backgroundImage: "key" 8 | * Date : 2019-07-18T02:10Z 9 | */ 10 | 11 | export default class MFP_Menu { 12 | 13 | constructor(){ 14 | var element = arguments[0]; 15 | if(arguments.length > 1){ 16 | var options = arguments[1]; 17 | } 18 | else{ 19 | var options = {}; 20 | } 21 | this.element = $(element); 22 | this.options = options; 23 | this.default_options = { 24 | select:function(elmt){} 25 | }; 26 | $.extend( {}, this.default_options, this.options ); 27 | } 28 | 29 | init(){ 30 | this.prepareContent(); 31 | } 32 | 33 | prepareContent(){ 34 | this.element.attr('role','menu').addClass('mfp_list').attr('tabindex','0'); 35 | 36 | this.element.on('focus',function(){ 37 | if($(this).find('li.selected, a.selected').length>0){ 38 | $(this).find('li.selected, a.selected').focus(); 39 | } 40 | else{ 41 | $(this).find('li:first-child, a:first-child').focus(); 42 | } 43 | }); 44 | 45 | this.element.find('li, a').attr('role','menuitem').attr('tabindex','0'); 46 | this.element.find('li, a').on('focus',function(e){ 47 | $(this).addClass('focus'); 48 | }); 49 | this.element.find('li, a').on('blur',function(e){ 50 | $(this).removeClass('focus'); 51 | }); 52 | this.element.find('li, a').click(function(e){ 53 | var that = e.currentTarget; 54 | if(!$(that).hasClass('mfp-link')){ 55 | $(that).parent().find('li, a').removeAttr('aria-selected'); 56 | $(that).parent().find('li, a').removeClass('selected'); 57 | $(that).addClass('selected'); 58 | $(that).attr('aria-selected','true'); 59 | } 60 | this.options.select(that); 61 | }.bind(this)); 62 | this.element.find('li, a').on('keydown',function(e){ 63 | var that = e.currentTarget; 64 | if(e.which==38){ //up 65 | if($(that).prev().length>0){ 66 | $(that).prev().focus(); 67 | } 68 | else{ 69 | $(that).parent().find('li:last-child, a:last-child').focus(); 70 | } 71 | 72 | } 73 | else if(e.which==40){ //down 74 | if($(that).next().length>0){ 75 | $(that).next().focus(); 76 | } 77 | else{ 78 | $(that).parent().find('li:first-child, a:first-child').focus(); 79 | } 80 | } 81 | else if(e.which == 9){ // tab 82 | e.preventDefault(); 83 | $(that).parent().parent().find('.ui-dialog-titlebar button').focus(); 84 | } 85 | else if(e.which == 13){ // enter 86 | if(!$(e.currentTarget).hasClass('mfp-link')){ 87 | e.preventDefault(); 88 | $(that).parent().find('li, a').removeAttr('aria-selected'); 89 | $(that).parent().find('li, a').removeClass('selected'); 90 | $(that).addClass('selected'); 91 | $(that).attr('aria-selected','true'); 92 | this.options.select(that); 93 | } 94 | 95 | } 96 | 97 | }.bind(this)); 98 | } 99 | 100 | }; 101 | -------------------------------------------------------------------------------- /dist/MFP/stylesheets/player-red.css: -------------------------------------------------------------------------------- 1 | .mfp-wrapper.red_theme{background-color:#000}.mfp-wrapper.red_theme .control-bar{background-color:#000}.mfp-wrapper.red_theme .control-bar .ui-state-default:focus,.mfp-wrapper.red_theme .control-bar .ui-widget-content .ui-state-default:focus{outline-color:#CD440A}.mfp-wrapper.red_theme .control-bar .progress-buffer{top:-5px;left:0;right:0;width:100%;background-color:#CCC}.mfp-wrapper.red_theme .control-bar .progress-buffer .buffer{background-color:#FCC8B4}.mfp-wrapper.red_theme .control-bar .progress-bar{border-radius:0;margin-left:0;margin-right:0;margin-top:-13px;width:calc(100% - 1.2em);border:none}.mfp-wrapper.red_theme .control-bar .progress-bar .ui-widget-header{background-color:#CD440A;border-radius:0}.mfp-wrapper.red_theme .control-bar .progress-bar .ui-slider-handle{cursor:pointer;border-radius:15px;margin-left:0;top:-0.39em}.mfp-wrapper.red_theme .control-bar .left-part button{color:#btn-active}.mfp-wrapper.red_theme .control-bar .left-part button:focus{outline-color:#CD440A;color:#e54c0b}.mfp-wrapper.red_theme .control-bar .left-part button:hover,.mfp-wrapper.red_theme .control-bar .left-part button.play:hover,.mfp-wrapper.red_theme .control-bar .left-part button.pause:hover{color:#e54c0b}.mfp-wrapper.red_theme .control-bar .left-part button.play,.mfp-wrapper.red_theme .control-bar .left-part button.pause{font-size:42px;line-height:1.07}.mfp-wrapper.red_theme .control-bar .left-part .soundPart button.sound{font-size:30px;line-height:1.07;display:inline-block;width:39px;text-align:left}.mfp-wrapper.red_theme .control-bar .left-part .soundPart button.sound:hover,.mfp-wrapper.red_theme .control-bar .left-part .soundPart button.sound:focus{color:#e54c0b}.mfp-wrapper.red_theme .control-bar .left-part .soundPart .sound-range{border-color:#CD440A;background-color:rgba(33,32,32,0.9)}.mfp-wrapper.red_theme .control-bar .left-part .soundPart .sound-range .ui-widget-header{background-color:#CD440A;left:-1px}.mfp-wrapper.red_theme .control-bar .left-part .soundPart .sound-range .ui-slider-handle{height:1.2em;border-radius:15px;top:-0.39em}.mfp-wrapper.red_theme .control-bar .left-part .timer{color:#fff}.mfp-wrapper.red_theme .control-bar select:focus{outline-color:#CD440A}.mfp-wrapper.red_theme .control-bar .right-part select.speed{background-color:#333;width:75px}.mfp-wrapper.red_theme .control-bar .right-part button{font-size:32px;line-height:34.24px;color:#fff}.mfp-wrapper.red_theme .control-bar .right-part button:focus,.mfp-wrapper.red_theme .control-bar .right-part button:hover{color:#e54c0b}.mfp-wrapper.red_theme .control-bar .right-part button:focus{outline-color:#CD440A}.mfp-wrapper.red_theme .control-bar .right-part button.off{color:#888}.mfp-wrapper.red_theme .control-bar .right-part button.expand{color:#fff}.mfp-wrapper.red_theme .control-bar .right-part button.expand:hover{color:#e54c0b}.mfp-wrapper.red_theme .control-bar .right-part .ui-widget-content{border-color:#CD440A;background:rgba(33,32,32,0.9);color:#fff}.mfp-wrapper.red_theme .control-bar .right-part .ui-widget-content .ui-dialog-titlebar{background:#E04a0B;color:#000;border-color:#CD440A}.mfp-wrapper.red_theme .control-bar .right-part .ui-widget-content .ui-dialog-titlebar button.ui-button{border-radius:15px;border-color:#000}.mfp-wrapper.red_theme .control-bar .right-part .ui-widget-content .ui-dialog-titlebar button.ui-button:focus{outline-color:#000}.mfp-wrapper.red_theme .menu{padding:0.5em}.mfp-wrapper.red_theme .menu li:hover,.mfp-wrapper.red_theme .menu li:focus{background:rgba(56,56,56,0.9)}.mfp-wrapper.red_theme .menu li.selected{background:rgba(73,73,73,0.9)}.mfp-wrapper.red_theme .menu h1,.mfp-wrapper.red_theme .menu h2,.mfp-wrapper.red_theme .menu h3{color:#e54c0b}.mfp-wrapper.red_theme .menu a{color:#e54c0b} 2 | 3 | -------------------------------------------------------------------------------- /dist/MFP/stylesheets/player-blue.css: -------------------------------------------------------------------------------- 1 | .mfp-wrapper.blue_theme{background-color:#000}.mfp-wrapper.blue_theme .control-bar{background-color:#000}.mfp-wrapper.blue_theme .control-bar .ui-state-default:focus,.mfp-wrapper.blue_theme .control-bar .ui-widget-content .ui-state-default:focus{outline-color:#0094C8}.mfp-wrapper.blue_theme .control-bar .progress-buffer{top:-5px;left:0;right:0;width:100%;background-color:#CCC}.mfp-wrapper.blue_theme .control-bar .progress-buffer .buffer{background-color:#BBEEFE}.mfp-wrapper.blue_theme .control-bar .progress-bar{border-radius:0;margin-left:0;margin-right:0;margin-top:-13px;width:calc(100% - 1.2em);border:none}.mfp-wrapper.blue_theme .control-bar .progress-bar .ui-widget-header{background-color:#0094C8;border-radius:0}.mfp-wrapper.blue_theme .control-bar .progress-bar .ui-slider-handle{cursor:pointer;border-radius:15px;margin-left:0;top:-0.39em}.mfp-wrapper.blue_theme .control-bar .left-part button{color:#btn-active}.mfp-wrapper.blue_theme .control-bar .left-part button:focus{outline-color:#0094C8;color:#0094C8}.mfp-wrapper.blue_theme .control-bar .left-part button:hover,.mfp-wrapper.blue_theme .control-bar .left-part button.play:hover,.mfp-wrapper.blue_theme .control-bar .left-part button.pause:hover{color:#0094C8}.mfp-wrapper.blue_theme .control-bar .left-part button.play,.mfp-wrapper.blue_theme .control-bar .left-part button.pause{font-size:42px;line-height:1.07}.mfp-wrapper.blue_theme .control-bar .left-part .soundPart button.sound{font-size:30px;line-height:1.07;display:inline-block;width:39px;text-align:left}.mfp-wrapper.blue_theme .control-bar .left-part .soundPart button.sound:hover,.mfp-wrapper.blue_theme .control-bar .left-part .soundPart button.sound:focus{color:#0094C8}.mfp-wrapper.blue_theme .control-bar .left-part .soundPart .sound-range{border-color:#0094C8;background-color:rgba(33,32,32,0.9)}.mfp-wrapper.blue_theme .control-bar .left-part .soundPart .sound-range .ui-widget-header{background-color:#0094C8;left:-1px}.mfp-wrapper.blue_theme .control-bar .left-part .soundPart .sound-range .ui-slider-handle{height:1.2em;border-radius:15px;top:-0.39em}.mfp-wrapper.blue_theme .control-bar .left-part .timer{color:#fff}.mfp-wrapper.blue_theme .control-bar select:focus{outline-color:#0094C8}.mfp-wrapper.blue_theme .control-bar .right-part select.speed{background-color:#333;width:75px}.mfp-wrapper.blue_theme .control-bar .right-part button{font-size:32px;line-height:34.24px;color:#fff}.mfp-wrapper.blue_theme .control-bar .right-part button:focus,.mfp-wrapper.blue_theme .control-bar .right-part button:hover{color:#0094C8}.mfp-wrapper.blue_theme .control-bar .right-part button:focus{outline-color:#0094C8}.mfp-wrapper.blue_theme .control-bar .right-part button.off{color:#888}.mfp-wrapper.blue_theme .control-bar .right-part button.expand{color:#fff}.mfp-wrapper.blue_theme .control-bar .right-part button.expand:hover{color:#0094C8}.mfp-wrapper.blue_theme .control-bar .right-part .ui-widget-content{border-color:#16380a;background:rgba(33,32,32,0.9);color:#fff}.mfp-wrapper.blue_theme .control-bar .right-part .ui-widget-content .ui-dialog-titlebar{background:#0094C8;color:#000;border-color:#16380a}.mfp-wrapper.blue_theme .control-bar .right-part .ui-widget-content .ui-dialog-titlebar button.ui-button{border-radius:15px;border-color:#000}.mfp-wrapper.blue_theme .control-bar .right-part .ui-widget-content .ui-dialog-titlebar button.ui-button:focus{outline-color:#000}.mfp-wrapper.blue_theme .menu{padding:0.5em}.mfp-wrapper.blue_theme .menu li:hover,.mfp-wrapper.blue_theme .menu li:focus{background:rgba(56,56,56,0.9)}.mfp-wrapper.blue_theme .menu li.selected{background:rgba(73,73,73,0.9)}.mfp-wrapper.blue_theme .menu h1,.mfp-wrapper.blue_theme .menu h2,.mfp-wrapper.blue_theme .menu h3{color:#0094C8}.mfp-wrapper.blue_theme .menu a{color:#0094C8} 2 | 3 | -------------------------------------------------------------------------------- /src/js/lib/MFP_Track.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MFP AccessPlayer v.2.0.0 3 | * http://smartplayer.mfpst.com 4 | * 5 | * Copyright MFP Multimedia France Productions 6 | * Released under GPL 3 licence 7 | * backgroundImage: "key" 8 | * Date : 2019-07-18T02:10Z 9 | */ 10 | 11 | const md5 = require('md5'); 12 | import MFP_Cue from './MFP_Cue'; 13 | 14 | export default class MFP_Track{ 15 | 16 | constructor(track){ 17 | this.trackElement = track; 18 | this.trackElement.track.mode = 'hidden'; 19 | track = track.track; 20 | this.cues = []; 21 | this.activeCues = []; 22 | this.mode = track.mode; 23 | this.kind = track.kind; 24 | this.subid = track.subid; 25 | this.label = track.label; 26 | this.language = track.language; 27 | this.src = $(this.trackElement).attr('src'); 28 | var filename = this.src; 29 | this.ext = filename.split('.').pop().toLowerCase(); 30 | this.eventListeners = []; 31 | } 32 | 33 | on(eventName, callback){ 34 | let random = Date.now() + '-' + Math.random()+'-'+Math.random(); 35 | let id = md5(random); 36 | this.eventListeners.push({ 37 | eventName, 38 | callback, 39 | id 40 | }); 41 | } 42 | 43 | off(id){ 44 | let aux = []; 45 | for(let eventListener in this.eventListeners){ 46 | if(eventListener.id!==id){ 47 | aux.push(eventListener); 48 | } 49 | } 50 | this.eventListeners = aux; 51 | return true; 52 | } 53 | 54 | dispatchEvent(eventName, params){ 55 | for(let eventListener of this.eventListeners){ 56 | if(eventListener.eventName===eventName){ 57 | eventListener.callback(params); 58 | } 59 | } 60 | } 61 | 62 | load(){ 63 | if(this.ext!=='vtt'){ 64 | this.dispatchEvent('error', this); 65 | }else{ 66 | if(this.trackElement.readyState==2){ 67 | this.loadCues(); 68 | }else if(this.trackElement.readyState==3){ 69 | this.dispatchEvent('error', this); 70 | }else{ 71 | this.trackElement.addEventListener('load', this.loadCues.bind(this)); 72 | this.trackElement.addEventListener('error', ()=>{ 73 | this.dispatchEvent('error', this); 74 | }); 75 | } 76 | } 77 | } 78 | 79 | loadCues(){ 80 | let trackCues = this.trackElement.track.cues; 81 | for(let trackCue of trackCues){ 82 | let cue = new MFP_Cue(trackCue.startTime, trackCue.endTime, trackCue.text); 83 | cue.setTrack(this); 84 | this.cues.push(cue); 85 | } 86 | this.dispatchEvent('load', this); 87 | } 88 | 89 | addCue(cue){ 90 | cue.setTrack(this); 91 | this.cues.push(cue); 92 | } 93 | 94 | activeCues(){ 95 | 96 | } 97 | 98 | setVideoPlayer(player){ 99 | this.player = player; 100 | this.player.on('timeupdate', (e) => { 101 | this.check(); 102 | }); 103 | } 104 | 105 | check(){ 106 | //if(this.mode2==='showing'){ 107 | this.player.getCurrentTime().then((currentTime)=>{ 108 | for(let cue of this.cues){ 109 | cue.check(currentTime); 110 | } 111 | }); 112 | //} 113 | return; 114 | } 115 | 116 | bindEvents(){ 117 | this.player.on('progress', (time)=>{ 118 | this.check(time); 119 | }); 120 | } 121 | 122 | } 123 | -------------------------------------------------------------------------------- /dist/MFP/stylesheets/player-green.css: -------------------------------------------------------------------------------- 1 | .mfp-wrapper.green_theme{background-color:#000}.mfp-wrapper.green_theme .control-bar{background-color:#000}.mfp-wrapper.green_theme .control-bar .ui-state-default:focus,.mfp-wrapper.green_theme .control-bar .ui-widget-content .ui-state-default:focus{outline-color:#3E8526}.mfp-wrapper.green_theme .control-bar .progress-buffer{top:-5px;left:0;right:0;width:100%;background-color:#CCC}.mfp-wrapper.green_theme .control-bar .progress-buffer .buffer{background-color:#C6EEB7}.mfp-wrapper.green_theme .control-bar .progress-bar{border-radius:0;margin-left:0;margin-right:0;margin-top:-13px;width:calc(100% - 1.2em);border:none}.mfp-wrapper.green_theme .control-bar .progress-bar .ui-widget-header{background-color:#3E8526;border-radius:0}.mfp-wrapper.green_theme .control-bar .progress-bar .ui-slider-handle{cursor:pointer;border-radius:15px;margin-left:0;top:-0.39em}.mfp-wrapper.green_theme .control-bar .left-part button{color:#btn-active}.mfp-wrapper.green_theme .control-bar .left-part button:focus{outline-color:#3E8526;color:#3E8526}.mfp-wrapper.green_theme .control-bar .left-part button:hover,.mfp-wrapper.green_theme .control-bar .left-part button.play:hover,.mfp-wrapper.green_theme .control-bar .left-part button.pause:hover{color:#3E8526}.mfp-wrapper.green_theme .control-bar .left-part button.play,.mfp-wrapper.green_theme .control-bar .left-part button.pause{font-size:42px;line-height:1.07}.mfp-wrapper.green_theme .control-bar .left-part .soundPart button.sound{font-size:30px;line-height:1.07;display:inline-block;width:39px;text-align:left}.mfp-wrapper.green_theme .control-bar .left-part .soundPart button.sound:hover,.mfp-wrapper.green_theme .control-bar .left-part .soundPart button.sound:focus{color:#3E8526}.mfp-wrapper.green_theme .control-bar .left-part .soundPart .sound-range{border-color:#3E8526;background-color:rgba(33,32,32,0.9)}.mfp-wrapper.green_theme .control-bar .left-part .soundPart .sound-range .ui-widget-header{background-color:#3E8526;left:-1px}.mfp-wrapper.green_theme .control-bar .left-part .soundPart .sound-range .ui-slider-handle{height:1.2em;border-radius:15px;top:-0.39em}.mfp-wrapper.green_theme .control-bar .left-part .timer{color:#fff}.mfp-wrapper.green_theme .control-bar select:focus{outline-color:#3E8526}.mfp-wrapper.green_theme .control-bar .right-part select.speed{background-color:#333;width:75px}.mfp-wrapper.green_theme .control-bar .right-part button{font-size:32px;line-height:34.24px;color:#fff}.mfp-wrapper.green_theme .control-bar .right-part button:focus,.mfp-wrapper.green_theme .control-bar .right-part button:hover{color:#3E8526}.mfp-wrapper.green_theme .control-bar .right-part button:focus{outline-color:#3E8526}.mfp-wrapper.green_theme .control-bar .right-part button.off{color:#888}.mfp-wrapper.green_theme .control-bar .right-part button.expand{color:#fff}.mfp-wrapper.green_theme .control-bar .right-part button.expand:hover{color:#3E8526}.mfp-wrapper.green_theme .control-bar .right-part .ui-widget-content{border-color:#3E8526;background:rgba(33,32,32,0.9);color:#fff}.mfp-wrapper.green_theme .control-bar .right-part .ui-widget-content .ui-dialog-titlebar{background:#3E8526;color:#000;border-color:#3E8526}.mfp-wrapper.green_theme .control-bar .right-part .ui-widget-content .ui-dialog-titlebar button.ui-button{border-radius:15px;border-color:#000}.mfp-wrapper.green_theme .control-bar .right-part .ui-widget-content .ui-dialog-titlebar button.ui-button:focus{outline-color:#000}.mfp-wrapper.green_theme .menu{padding:0.5em}.mfp-wrapper.green_theme .menu li:hover,.mfp-wrapper.green_theme .menu li:focus{background:rgba(56,56,56,0.9)}.mfp-wrapper.green_theme .menu li.selected{background:rgba(73,73,73,0.9)}.mfp-wrapper.green_theme .menu h1,.mfp-wrapper.green_theme .menu h2,.mfp-wrapper.green_theme .menu h3{color:#3E8526}.mfp-wrapper.green_theme .menu a{color:#3E8526} 2 | 3 | -------------------------------------------------------------------------------- /dist/demo/transcripts/JamyPlayer.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | monde de Jamy Des volcans et des hommes 5 | 6 | 7 | 8 |

Le monde de Jamy - Des volcans et des hommes

9 | 10 |

Thomas et Jamy sont dans un hélicoptère et survolent un volcan.

11 | 12 |

Thomas

13 |

Ici, à Hawaii, on a un volcan exceptionnel, qu'on peut observer directement d'une manière vraiment... idéale.

14 | 15 |

Voix off

16 |

Une fumée grise s’élève dans le ciel au-dessus de la cime des arbres.

17 | 18 |

Thomas

19 |

Là, on est à quelques centaines de mètres d'une grande coulée.

20 | 21 |

Voix off

22 |

Au sommet du volcan, les arbres calcinés au passage de la coulée
23 | dégagent des fumerolles blanches. Des braises rougeoient ça et là.
24 | L’hélicoptère survole à basse altitude une immense étendue carbonisée.
25 | La surface est recouverte d’une croute sombre de roches volcaniques.
26 | Quelques troncs d’arbres roussis se dressent au milieu des braises et
27 | des roches fumantes.

28 | 29 |

Jamy

30 |

On a un champ de lave incandescente sous les pieds.

31 | 32 |

Thomas

33 |

On va tenter de voir si on arrive, avec la caméra thermique,
34 | à avoir des informations sur le trajet de la lave en dessous de la surface.

35 | 36 |

Voix off

37 |

Sur l’écran de la caméra, une grande zone apparaît en rouge;
38 | la surface est constellée de braises. Plus loin, une vaste étendue apparaît
39 | en bleu parsemée de plusieurs petits points rouges reliés par des galeries sinueuses.

40 | 41 |

Thomas

42 |

Ce qu'on voit sous nos pieds, c'est la coulée active.

43 | 44 |

Ce que tu vois sur l'écran de la caméra thermique,
45 | ce sont les zones les plus claires, les plus chaudes.
46 | Donc, ce sont souvent les zones où il y a la lave qui sort en surface.

47 | 48 |

Voix off

49 |

Sur l’écran de la caméra…

50 | 51 |

Thomas

52 |

Ce qu'on voit, c'est ce système de tunnels souterrains de lave.

53 | 54 |

La lave, dès sa sortie de l'évent, emprunte ce grand tunnel de lave.

55 | 56 |

Jamy

57 |

Là, on voit très bien une espèce de langue...

58 |

une langue bien rouge.

59 | 60 |

Voix off

61 |

L’hélicoptère est juste au-dessus de la langue de roches 62 | incandescentes.
63 | Thomas est assis dans l’appareil le pied dans le vide,
64 | un casque sur les oreilles il continue de filmer.

65 | 66 |

Thomas

67 |

A chaque nouvelle coulée, une espèce de carapace se forme assez rapidement,
68 | quand la lave entre en contact avec l'air.

69 | 70 |

Cette carapace va protéger thermiquement le reste de la lave qui 71 | s'écoule
72 | et qui va essayer de s'écouler en dessous de cette carapace et former ces tunnels de lave.

73 | 74 |

Jamy

75 |

-C'est fantastique.
76 | 77 | Là, on fait du rase-mottes, c'est génial. Génial !
78 | 79 | On y est, on arrive à l'endroit d'où la lave jaillit.
80 | 81 | Jamais je n'aurais imaginé voir une telle chose.

82 | 83 |

Pour en savoir plus

84 |

Nous contacter !

85 | 86 | 87 | -------------------------------------------------------------------------------- /src-demo/transcripts/JamyPlayer.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | monde de Jamy Des volcans et des hommes 5 | 6 | 7 | 8 |

Le monde de Jamy - Des volcans et des hommes

9 | 10 |

Thomas et Jamy sont dans un hélicoptère et survolent un volcan.

11 | 12 |

Thomas

13 |

Ici, à Hawaii, on a un volcan exceptionnel, qu'on peut observer directement d'une manière vraiment... idéale.

14 | 15 |

Voix off

16 |

Une fumée grise s’élève dans le ciel au-dessus de la cime des arbres.

17 | 18 |

Thomas

19 |

Là, on est à quelques centaines de mètres d'une grande coulée.

20 | 21 |

Voix off

22 |

Au sommet du volcan, les arbres calcinés au passage de la coulée
23 | dégagent des fumerolles blanches. Des braises rougeoient ça et là.
24 | L’hélicoptère survole à basse altitude une immense étendue carbonisée.
25 | La surface est recouverte d’une croute sombre de roches volcaniques.
26 | Quelques troncs d’arbres roussis se dressent au milieu des braises et
27 | des roches fumantes.

28 | 29 |

Jamy

30 |

On a un champ de lave incandescente sous les pieds.

31 | 32 |

Thomas

33 |

On va tenter de voir si on arrive, avec la caméra thermique,
34 | à avoir des informations sur le trajet de la lave en dessous de la surface.

35 | 36 |

Voix off

37 |

Sur l’écran de la caméra, une grande zone apparaît en rouge;
38 | la surface est constellée de braises. Plus loin, une vaste étendue apparaît
39 | en bleu parsemée de plusieurs petits points rouges reliés par des galeries sinueuses.

40 | 41 |

Thomas

42 |

Ce qu'on voit sous nos pieds, c'est la coulée active.

43 | 44 |

Ce que tu vois sur l'écran de la caméra thermique,
45 | ce sont les zones les plus claires, les plus chaudes.
46 | Donc, ce sont souvent les zones où il y a la lave qui sort en surface.

47 | 48 |

Voix off

49 |

Sur l’écran de la caméra…

50 | 51 |

Thomas

52 |

Ce qu'on voit, c'est ce système de tunnels souterrains de lave.

53 | 54 |

La lave, dès sa sortie de l'évent, emprunte ce grand tunnel de lave.

55 | 56 |

Jamy

57 |

Là, on voit très bien une espèce de langue...

58 |

une langue bien rouge.

59 | 60 |

Voix off

61 |

L’hélicoptère est juste au-dessus de la langue de roches 62 | incandescentes.
63 | Thomas est assis dans l’appareil le pied dans le vide,
64 | un casque sur les oreilles il continue de filmer.

65 | 66 |

Thomas

67 |

A chaque nouvelle coulée, une espèce de carapace se forme assez rapidement,
68 | quand la lave entre en contact avec l'air.

69 | 70 |

Cette carapace va protéger thermiquement le reste de la lave qui 71 | s'écoule
72 | et qui va essayer de s'écouler en dessous de cette carapace et former ces tunnels de lave.

73 | 74 |

Jamy

75 |

-C'est fantastique.
76 | 77 | Là, on fait du rase-mottes, c'est génial. Génial !
78 | 79 | On y est, on arrive à l'endroit d'où la lave jaillit.
80 | 81 | Jamais je n'aurais imaginé voir une telle chose.

82 | 83 |

Pour en savoir plus

84 |

Nous contacter !

85 | 86 | 87 | -------------------------------------------------------------------------------- /src/js/video-players/loadVideoType-error.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MFP AccessPlayer v.2.0.0 3 | * http://smartplayer.mfpst.com 4 | * 5 | * Copyright MFP Multimedia France Productions 6 | * Released under GPL 3 licence 7 | * backgroundImage: "key" 8 | * Date : 2019-07-18T02:10Z 9 | */ 10 | 11 | class VideoError{ 12 | 13 | constructor(video, options, element){ 14 | this.video = video; 15 | this.options = options; 16 | this.container = element; 17 | this.volume = 1; 18 | this.currentTime = 0; 19 | this.duration = 0; 20 | } 21 | 22 | destroy(){} 23 | 24 | init(){ 25 | return new Promise((resolve, reject) => { 26 | const videoContainer = $(this.container).find('.video-container')[0]; 27 | const currentHeight = $(videoContainer).height(); 28 | const msgPadding = currentHeight/3; 29 | const tpl = ` 30 |
31 |

${this.video.msg}

32 |
33 | `; 34 | $(videoContainer).html(tpl); 35 | resolve(); 36 | }); 37 | } 38 | 39 | canChangeSpeedRate(){ 40 | return new Promise((resolve, reject)=>{ 41 | resolve(false); 42 | }); 43 | } 44 | 45 | getPosibleSpeedRates(){ 46 | return new Promise((resolve, reject)=>{ 47 | resolve([]); 48 | }); 49 | } 50 | 51 | webkitEnterFullscreen(){ 52 | return false; 53 | } 54 | 55 | on(event, callback){ 56 | return callback(); 57 | } 58 | 59 | off(event, callback=null){ 60 | return false; 61 | } 62 | 63 | play(){ 64 | return false; 65 | } 66 | 67 | pause(){ 68 | return false; 69 | } 70 | 71 | getDuration(){ 72 | return new Promise((resolve, reject)=>{ 73 | resolve(this.duration); 74 | }); 75 | } 76 | 77 | getCurrentTime(){ 78 | return new Promise((resolve, reject)=>{ 79 | resolve(this.currentTime); 80 | }); 81 | } 82 | 83 | setCurrentTime(time){ 84 | this.currentTime = time; 85 | } 86 | 87 | getBuffered(){ 88 | return new Promise((resolve, reject)=>{ 89 | resolve(this.buffered); 90 | }); 91 | } 92 | 93 | getTextTracks(){ 94 | return new Promise((resolve, reject)=>{ 95 | resolve(this.textTracks); 96 | }); 97 | } 98 | 99 | getCurrentSrc(){ 100 | return new Promise((resolve, reject)=>{ 101 | resolve(this.currentSrc); 102 | }); 103 | } 104 | 105 | setSrc(src){ 106 | this.src = src; 107 | } 108 | 109 | getPaused(){ 110 | return new Promise((resolve, reject)=>{ 111 | resolve(this.paused); 112 | }); 113 | } 114 | 115 | setControls(status){ 116 | this.controls = status; 117 | } 118 | 119 | setTabIndex(index){ 120 | this.tabindex = index; 121 | } 122 | getPlaybackRate(){ 123 | return new Promise((resolve, reject)=>{ 124 | resolve(1); 125 | }); 126 | } 127 | setPlaybackRate(rate){ 128 | this.playbackRate = rate; 129 | } 130 | 131 | getVolume(){ 132 | return new Promise((resolve, reject)=>{ 133 | resolve(this.volume); 134 | }); 135 | } 136 | 137 | setVolume(volume){ 138 | this.volume = volume; 139 | } 140 | } 141 | 142 | 143 | MFP.prototype.loadVideoError = function(video){ 144 | return new Promise((resolve, reject) => { 145 | const videoPlayer = new VideoError(video, this.options, this.container); 146 | videoPlayer.init().then(()=>{ 147 | resolve(videoPlayer); 148 | }); 149 | }); 150 | }; 151 | -------------------------------------------------------------------------------- /dist/demo/stylesheets/demo-green.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:'Lato';src:url(../../demo/fonts/Lato-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:'Lato-bold';src:url(../../demo/fonts/Lato-Bold.ttf) format("truetype");font-weight:700;font-style:bold}html,body{margin:0;font-family:Lato}ul.nav{list-style:none;margin:0}a.evitement{display:inline-block;color:#000;padding:.5em;position:absolute;right:99999px;z-index:100}a.evitement:focus{right:0}header{background-image:linear-gradient(to right, #1d4b0d, #1d4b0d, #3E8526, #3E8526, #3E8526);color:#fff}header a,header img{display:inline-block;z-index:2}header a:focus,header img:focus{outline:1px solid #fff}@media screen and (max-width: 20rem){header a img{display:inline-block;padding:0 15%;width:70%;max-height:100%;background-color:#000}div.triangle1 div.triangle2{display:none}h1{font-style:italic;font-size:1.5rem;font-weight:400;height:70%;width:100%;line-height:40px;text-align:center;margin:0;padding:0;font-family:Lato-bold;display:block;background-color:#16380A}nav#navbar{background-color:#3E8526;margin-top:27%;box-shadow:0 0 2px 2px rgba(0,0,0,0.7)}nav#navbar ul{padding-left:0;margin:0}nav#navbar ul li{list-style:none;display:inline-block;border-right:2px solid #16380A;padding:10px 0;width:100%;text-align:center}nav#navbar ul li a{text-decoration:none;font-size:1.4rem;font-weight:400;color:#fff;transition-duration:0s}nav#navbar ul li a:focus{outline:1px solid #fff}nav#navbar ul li a:hover{color:#000;text-decoration:underline}nav#navbar ul li a:active{text-decoration:underline;background-color:#000;color:#000}}@media screen and (min-width: 21rem){header a img{background-color:#000}div.triangle1{display:inline-block;border-style:solid;border-width:1.9rem 0 1.9rem 20px;border-color:#16380A #16380A #16380A #000;_border-color:#000 #000 #000 #000;_filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000');margin:0 -.35rem}h1{font-style:italic;font-size:1.5rem;font-weight:400;margin:0;padding:1.08rem;font-family:Lato-bold;display:inline-block;background-color:#16380A;vertical-align:top}div.triangle2{display:inline-block;border-style:solid;border-width:1.9rem 0 1.9rem 20px;border-color:transparent transparent transparent #16380A;_border-color:#000 #000 #000 #16380A;_filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000');margin-left:-.35rem}nav#navbar{background-color:#3E8526;margin-top:0;box-shadow:0 0 2px 2px rgba(0,0,0,0.7)}nav#navbar ul{padding-left:0;margin:0}nav#navbar ul li{list-style:none;display:inline-block;border-right:2px solid #16380A;padding:0.5rem 1rem}nav#navbar ul li a{text-decoration:none;font-size:1.4rem;font-weight:400;color:#fff;transition-duration:0s}nav#navbar ul li a:focus{outline:1px solid #fff}nav#navbar ul li a:hover{color:#000;text-decoration:underline}nav#navbar ul li a :active{text-decoration:underline;background-color:#000;color:#000}}main{width:99%;margin:20px auto;font-size:1.2rem}h2,h3:not(ui-widget-content>h3){color:#16380A;margin:auto}h2{font-size:2rem;margin-left:2%}h3{font-size:1.4rem}p:not(footer>p),li{font-family:Lato;line-height:1.5rem;font-size:1.4rem}main a{color:#3E8526;font-family:Lato;font-weight:bold}main a:hover{text-decoration:none}main a:focus{outline:1px solid var(main-focus-color)}.cont{position:relative}.cont::after{content:'';display:block;clear:both}@media screen and (max-width: 640px){.container{width:100%}.video{display:block;width:auto}}@media screen and (min-width: 641px){article#video{vertical-align:top;display:inline-block;width:70%}.cont{position:relative}.cont::after{content:'';display:block;clear:both}}@media screen and (max-width: 640px){#mde{padding:15px;width:95%;display:inline-block}}@media screen and (min-width: 641px){#mde{padding:10px;width:28%;display:inline-block}}#text-target,#text-target1{width:60%;padding-top:20px}code{border:1px solid #333;padding:10px;margin:5px;display:block;background-color:#CCC;max-width:1000px;overflow:auto}#desc table{max-width:1000px}#desc table tr td,#desc table tr th{padding:4px;border:1px solid #000}#desc table tr th{background-color:#EEE}footer{background-color:#16380A;padding:1% 20%;margin:2% 0 0 0;color:#fff;text-align:center}footer a{color:#fff}footer a:focus{outline:1px solid #fff}footer a:hover{text-decoration:none} 2 | 3 | -------------------------------------------------------------------------------- /dist/demo/stylesheets/demo-blue.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:'Lato';src:url(../../demo/fonts/Lato-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:'Lato-bold';src:url(../../demo/fonts/Lato-Bold.ttf) format("truetype");font-weight:700;font-style:bold}html,body{margin:0;font-family:Lato}ul.nav{list-style:none;margin:0}a.evitement{display:inline-block;color:#000;padding:.5em;position:absolute;right:99999px;z-index:100}a.evitement:focus{right:0}header{background-image:linear-gradient(to right, #0094c8, #0094c8, #0094c8, #0094c8, #0094c8);color:#fff}header a,header img{display:inline-block;z-index:2}header a:focus,header img:focus{outline:1px solid #fff}@media screen and (max-width: 20rem){header a img{display:inline-block;padding:0 15%;width:70%;max-height:100%;background-color:#000}div.triangle1 div.triangle2{display:none}h1{font-style:italic;font-size:1.5rem;font-weight:400;height:70%;width:100%;line-height:40px;text-align:center;margin:0;padding:0;font-family:Lato-bold;display:block;background-color:#057EB6}nav#navbar{background-color:#057EB6;margin-top:27%;box-shadow:0 0 2px 2px rgba(0,0,0,0.7)}nav#navbar ul{padding-left:0;margin:0}nav#navbar ul li{list-style:none;display:inline-block;border-right:2px solid #fff;padding:10px 0;width:100%;text-align:center}nav#navbar ul li a{text-decoration:none;font-size:1.4rem;font-weight:400;color:#fff;transition-duration:0s}nav#navbar ul li a:focus{outline:1px solid #fff}nav#navbar ul li a:hover{color:#000;text-decoration:underline}nav#navbar ul li a:active{text-decoration:underline;background-color:#000;color:#000}}@media screen and (min-width: 21rem){header a img{background-color:#000}div.triangle1{display:inline-block;border-style:solid;border-width:1.9rem 0 1.9rem 20px;border-color:#057EB6 #057EB6 #057EB6 #000;_border-color:#000 #000 #000 #000;_filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000');margin:0 -.35rem;position:relative;z-index:1}h1{font-style:italic;font-size:1.5rem;font-weight:400;margin:0;padding:1.08rem;font-family:Lato-bold;display:inline-block;background-color:#057EB6;vertical-align:top}div.triangle2{display:inline-block;border-style:solid;border-width:1.9rem 0 1.9rem 20px;border-color:transparent transparent transparent #057EB6;_border-color:#000 #000 #000 #057EB6;_filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000');margin-left:-.35rem}nav#navbar{background-color:#057EB6;margin-top:0;box-shadow:0 0 2px 2px rgba(0,0,0,0.7)}nav#navbar ul{padding-left:0;margin:0}nav#navbar ul li{list-style:none;display:inline-block;border-right:2px solid #fff;padding:0.5rem 1rem}nav#navbar ul li a{text-decoration:none;font-size:1.4rem;font-weight:400;color:#fff;transition-duration:0s}nav#navbar ul li a:focus{outline:1px solid #fff}nav#navbar ul li a:hover{color:#000;text-decoration:underline}nav#navbar ul li a :active{text-decoration:underline;background-color:#000;color:#000}}main{width:99%;margin:20px auto;font-size:1.2rem}h2,h3:not(ui-widget-content>h3){color:#000;margin:auto}h2{font-size:2rem;margin-left:2%}h3{font-size:1.4rem}p:not(footer>p),li{font-family:Lato;line-height:1.5rem;font-size:1.4rem}main a{color:#057eb6;font-family:Lato;font-weight:bold}main a:hover{text-decoration:none}main a:focus{outline:1px solid var(main-focus-color)}.cont{position:relative}.cont::after{content:'';display:block;clear:both}@media screen and (max-width: 640px){.container{width:100%}.video{display:block;width:auto}}@media screen and (min-width: 641px){article#video{vertical-align:top;display:inline-block;width:70%}.cont{position:relative}.cont::after{content:'';display:block;clear:both}}@media screen and (max-width: 640px){#mde{padding:15px;width:95%;display:inline-block}}@media screen and (min-width: 641px){#mde{padding:10px;width:28%;display:inline-block}}#text-target,#text-target1{width:60%;padding-top:20px}code{border:1px solid #333;padding:10px;margin:5px;display:block;background-color:#CCC;max-width:1000px;overflow:auto}#desc table{max-width:1000px}#desc table tr td,#desc table tr th{padding:4px;border:1px solid #000}#desc table tr th{background-color:#EEE}footer{background-color:#057eb6;padding:1% 20%;margin:2% 0 0 0;color:#fff;text-align:center}footer a{color:#fff}footer a:focus{outline:1px solid #fff}footer a:hover{text-decoration:none} 2 | 3 | -------------------------------------------------------------------------------- /src/js/trackreader/stl.scss: -------------------------------------------------------------------------------- 1 | .mfp-wrapper.track-stl video::cue{ 2 | font-family: Arial, Roboto, 'Arial Unicode Ms', Arial, Helvetica, Verdana, 'PT Sans Caption', sans-serif; 3 | color: white; 4 | background-color: transparent !important; 5 | font-size: 50%; 6 | } 7 | .mfp-wrapper.track-stl .mfp-subtitles{ 8 | font-family: Arial, Roboto, 'Arial Unicode Ms', Helvetica, Verdana, 'PT Sans Caption', sans-serif; 9 | color: white; 10 | background-color: transparent !important; 11 | font-size: 50%; 12 | } 13 | .mfp-subtitles .mfp-lh{ 14 | font-size: 200%; 15 | } 16 | ::cue(c.mfp-lh){ 17 | font-size: 200%; 18 | } 19 | .mfp-subtitles .mfp-lh .mfp-lh{ 20 | font-size: 100%; 21 | } 22 | ::cue(c.mfp-lh c.mfp-lh){ 23 | font-size: 100%; 24 | } 25 | .mfp-subtitles .mfp-ac-black{ 26 | color: black; 27 | text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF; 28 | } 29 | ::cue(c.mfp-ac-black){ 30 | color: black; 31 | text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF; 32 | } 33 | .mfp-subtitles .mfp-ac-red{ 34 | color: red; 35 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 36 | } 37 | ::cue(c.mfp-ac-red){ 38 | color: red; 39 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 40 | } 41 | .mfp-subtitles .mfp-ac-green{ 42 | color: green; 43 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 44 | } 45 | ::cue(c.mfp-ac-green){ 46 | color: green; 47 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 48 | } 49 | .mfp-subtitles .mfp-ac-yellow{ 50 | color: yellow; 51 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 52 | } 53 | ::cue(c.mfp-ac-yellow){ 54 | color: yellow; 55 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 56 | } 57 | .mfp-subtitles .mfp-ac-blue{ 58 | color: blue; 59 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 60 | } 61 | ::cue(c.mfp-ac-blue){ 62 | color: blue; 63 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 64 | } 65 | .mfp-subtitles .mfp-ac-magenta{ 66 | color: magenta; 67 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 68 | } 69 | ::cue(c.mfp-ac-magenta){ 70 | color: magenta; 71 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 72 | } 73 | .mgp-subtitles .mfp-ac-cyan{ 74 | color: cyan; 75 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 76 | } 77 | ::cue(c.mfp-ac-cyan){ 78 | color: cyan; 79 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 80 | } 81 | .mfp-subtitles .mfp-ac-white{ 82 | color: white; 83 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 84 | } 85 | ::cue(c.mfp-ac-white){ 86 | color: white; 87 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 88 | } 89 | 90 | .mfp-subtitles .mfp-bgc-black{ 91 | background-color: black; 92 | } 93 | ::cue(c.mfp-bgc-black){ 94 | background-color: black; 95 | } 96 | .mfp-subtitles .mfp-bgc-red{ 97 | background-color: red; 98 | } 99 | ::cue(c.mfp-bgc-red){ 100 | background-color: red; 101 | } 102 | .mfp-subtitles .mfp-bgc-green{ 103 | background-color: green; 104 | } 105 | ::cue(c.mfp-bgc-green){ 106 | background-color: green; 107 | } 108 | .mfp-subtitles .mfp-bgc-yellow{ 109 | background-color: yellow; 110 | } 111 | ::cue(c.mfp-bgc-yellow){ 112 | background-color: yellow; 113 | } 114 | .mfp-subtitles .mfp-bgc-blue{ 115 | background-color: blue; 116 | } 117 | ::cue(c.mfp-bgc-blue){ 118 | background-color: blue; 119 | } 120 | .mfp-subtitles .mfp-bgc-magenta{ 121 | background-color: magenta; 122 | } 123 | ::cue(c.mfp-bgc-magenta){ 124 | background-color: magenta; 125 | } 126 | .mfp-subtitles .mfp-bgc-cyan{ 127 | background-color: cyan; 128 | } 129 | ::cue(c.mfp-bgc-cyan){ 130 | background-color: cyan; 131 | } 132 | .mfp-subtitles .mfp-bgc-white{ 133 | background-color: white; 134 | } 135 | ::cue(c.mfp-bgc-white){ 136 | background-color: white; 137 | } 138 | -------------------------------------------------------------------------------- /webpack/webpack.common.js: -------------------------------------------------------------------------------- 1 | const Path = require('path'); 2 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 3 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 4 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 6 | 7 | module.exports = { 8 | entry: { 9 | 'MFP/mfp': Path.resolve(__dirname, '../src/js/mfp.js'), 10 | 'MFP/stylesheets/screen': Path.resolve(__dirname, '../src/sass/screen.scss'), 11 | 'demo/stylesheets/demo-blue': Path.resolve(__dirname, '../src-demo/sass/demo-blue.scss'), 12 | 'demo/stylesheets/demo-green': Path.resolve(__dirname, '../src-demo/sass/demo-green.scss'), 13 | 'demo/stylesheets/demo-red': Path.resolve(__dirname, '../src-demo/sass/demo-red.scss'), 14 | 'MFP/stylesheets/player-blue': Path.resolve(__dirname, '../src/sass/player-blue.scss'), 15 | 'MFP/stylesheets/player-green': Path.resolve(__dirname, '../src/sass/player-green.scss'), 16 | 'MFP/stylesheets/player-red': Path.resolve(__dirname, '../src/sass/player-red.scss'), 17 | 'MFP/trackreader/loadTrackType-srt': Path.resolve(__dirname, '../src/js/trackreader/loadTrackType-srt.js'), 18 | 'MFP/trackreader/loadTrackType-stl': Path.resolve(__dirname, '../src/js/trackreader/loadTrackType-stl.js'), 19 | 'MFP/trackreader/stl': Path.resolve(__dirname, '../src/js/trackreader/stl.scss'), 20 | 'MFP/video-players/loadVideoPlayer-html5': Path.resolve(__dirname, '../src/js/video-players/loadVideoType-html5.js'), 21 | 'MFP/video-players/loadVideoPlayer-vimeo': Path.resolve(__dirname, '../src/js/video-players/loadVideoType-vimeo.js'), 22 | 'MFP/video-players/loadVideoPlayer-error': Path.resolve(__dirname, '../src/js/video-players/loadVideoType-error.js') 23 | }, 24 | output: { 25 | path: Path.join(__dirname, '../dist'), 26 | filename: '[name].js' 27 | }, 28 | plugins: [ 29 | /* 30 | new CopyWebpackPlugin([ 31 | { from: Path.resolve(__dirname, '../public'), to: '.' } 32 | ]), 33 | */ 34 | new CopyWebpackPlugin([ 35 | { from: Path.resolve(__dirname, '../src-demo/html'), to: './demo' } 36 | ]), 37 | new CopyWebpackPlugin([ 38 | { from: Path.resolve(__dirname, '../src-demo/img'), to: './demo/img' } 39 | ]), 40 | new CopyWebpackPlugin([ 41 | { from: Path.resolve(__dirname, '../src-demo/tracks'), to: './demo/tracks' } 42 | ]), 43 | new CopyWebpackPlugin([ 44 | { from: Path.resolve(__dirname, '../src-demo/transcripts'), to: './demo/transcripts' } 45 | ]), 46 | new CopyWebpackPlugin([ 47 | { from: Path.resolve(__dirname, '../src/js/lang'), to: './MFP/lang' } 48 | ]), 49 | new CopyWebpackPlugin([ 50 | { from: Path.resolve(__dirname, '../src/infos'), to: './MFP/infos' } 51 | ]), 52 | 53 | /* 54 | new HtmlWebpackPlugin({ 55 | template: Path.resolve(__dirname, '../src/index.html'), 56 | inject: false 57 | }), 58 | */ 59 | new MiniCssExtractPlugin({ 60 | filename: '[name].css' 61 | }) 62 | ], 63 | resolve: { 64 | alias: { 65 | '~': Path.resolve(__dirname, '../src') 66 | } 67 | }, 68 | module: { 69 | rules: [ 70 | { 71 | test: /\.mjs$/, 72 | include: /node_modules/, 73 | type: 'javascript/auto' 74 | }, 75 | { 76 | test: /\.(eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/, 77 | include: [ 78 | Path.resolve(__dirname, "../src/fonts") 79 | ], 80 | use: [{ 81 | loader: 'file-loader', 82 | options: { 83 | name: '[name].[ext]', 84 | outputPath: 'MFP/fonts' 85 | } 86 | }] 87 | }, 88 | { 89 | test: /\.(eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/, 90 | include: [ 91 | Path.resolve(__dirname, "../src-demo/fonts") 92 | ], 93 | use: [{ 94 | loader: 'file-loader', 95 | options: { 96 | name: '[name].[ext]', 97 | outputPath: 'demo/fonts' 98 | } 99 | }] 100 | }, 101 | { 102 | test: /\.s?css$/i, 103 | use: [ 104 | { 105 | loader: MiniCssExtractPlugin.loader, 106 | options: { 107 | publicPath: '../../', 108 | } 109 | }, 110 | {loader:'css-loader'}, 111 | {loader:'sass-loader'} 112 | ], 113 | }, 114 | 115 | ] 116 | } 117 | }; 118 | -------------------------------------------------------------------------------- /src/sass/player-red.scss: -------------------------------------------------------------------------------- 1 | /* Customization of the MFP access Player 2 | * 3 | * You can simply customize the player by defining a theme_class 4 | * in the options of the player 5 | * you can start from this example and compile this sass file 6 | */ 7 | 8 | /* sliders */ 9 | $timeline-cursor-radius: 15px; 10 | $audio-cursor-radius: 15px; 11 | 12 | /* buttons */ 13 | $btn-play-height: 42px; 14 | $btn-audio-height: 30px; 15 | $btn-speed-width: 75px; 16 | $btn-icomoon-height: 32px; 17 | $btn-modal-close-radius: 15px; 18 | 19 | 20 | /* colors */ 21 | $outline-color: #CD440A; 22 | $background-color: #000; 23 | $timeline-bar-color: #CD440A;/* past time */ 24 | $timeline-bar-unbuffer-color: #CCC; 25 | $timeline-bar-buffer-color: #FCC8B4; 26 | $btn-hover: #e54c0b; 27 | $audio-bar-color: #CD440A;/* turned on */ 28 | $audio-bar-inactive-color: rgba(33,32,32,.9); 29 | $btn-speed-bgcolor: #333; 30 | $btn-speed-bordercolor: #CD4708; 31 | $btn-active: #FFF; 32 | $btn-disabled: #888; 33 | 34 | /* modal */ 35 | $modal-background-color: rgba(33,32,32,.9); 36 | $modal-header-bgcolor: #E04a0B; 37 | $modal-header-txtcolor: #000; 38 | $modal-border-color: #CD440A; 39 | $modal-text-color: #fff; 40 | $modal-option-active: rgba(73,73,73,.9); 41 | $modal-option-hover: rgba(56,56,56,.9); 42 | 43 | 44 | /* place here the name of your overiding class */ 45 | 46 | .mfp-wrapper.red_theme{ 47 | background-color: $background-color; 48 | .control-bar{ 49 | background-color: $background-color; 50 | .ui-state-default:focus, .ui-widget-content .ui-state-default:focus { 51 | outline-color: $outline-color; 52 | } 53 | .progress-buffer{ 54 | top:-5px; 55 | left:0; 56 | right:0; 57 | width: 100%; 58 | background-color: #CCC; 59 | .buffer{ 60 | background-color: $timeline-bar-buffer-color; 61 | } 62 | } 63 | .progress-bar{ 64 | border-radius: 0; 65 | margin-left: 0; 66 | margin-right: 0; 67 | margin-top: -13px; 68 | width: calc(100% - 1.2em); 69 | border: none; 70 | .ui-widget-header{ 71 | background-color: $timeline-bar-color; 72 | border-radius: 0; 73 | } 74 | .ui-slider-handle{ 75 | cursor: pointer; 76 | border-radius: $timeline-cursor-radius; 77 | margin-left: 0; 78 | top: -0.39em; 79 | } 80 | } 81 | .left-part{ 82 | button{ 83 | color: #btn-active; 84 | &:focus{ 85 | outline-color: $outline-color; 86 | color: $btn-hover; 87 | } 88 | &:hover, &.play:hover, &.pause:hover{ 89 | color: $btn-hover; 90 | } 91 | &.play, &.pause{ 92 | font-size: $btn-play-height; 93 | line-height: 1.07; 94 | } 95 | } 96 | .soundPart{ 97 | button.sound{ 98 | font-size: $btn-audio-height; 99 | line-height: 1.07; 100 | display: inline-block; 101 | width: ($btn-audio-height * 1.3); 102 | text-align: left; 103 | &:hover, &:focus{ 104 | color: $btn-hover; 105 | } 106 | } 107 | .sound-range{ 108 | border-color: $audio-bar-color; 109 | background-color: $audio-bar-inactive-color; 110 | .ui-widget-header{ 111 | background-color: $audio-bar-color; 112 | left: -1px; 113 | } 114 | .ui-slider-handle{ 115 | height: 1.2em; 116 | border-radius: $audio-cursor-radius; 117 | top: -0.39em; 118 | } 119 | } 120 | } 121 | .timer{ 122 | color: $btn-active; 123 | } 124 | } 125 | select:focus{ 126 | outline-color: $outline-color; 127 | } 128 | .right-part{ 129 | select.speed{ 130 | background-color: $btn-speed-bgcolor; 131 | //border: 1px solid $btn-speed-bordercolor; 132 | width: $btn-speed-width; 133 | 134 | } 135 | button{ 136 | font-size: $btn-icomoon-height; 137 | line-height: ($btn-icomoon-height * 1.07); 138 | color: $btn-active; 139 | &:focus, &:hover{ 140 | color: $btn-hover; 141 | } 142 | &:focus{ 143 | outline-color: $outline-color; 144 | } 145 | &.off{ 146 | color: $btn-disabled; 147 | } 148 | &.expand{ 149 | color: $btn-active; 150 | &:hover{ 151 | color: $btn-hover; 152 | } 153 | } 154 | } 155 | .ui-widget-content{ 156 | border-color: $modal-border-color; 157 | background: $modal-background-color; 158 | color: $modal-text-color; 159 | .ui-dialog-titlebar{ 160 | background: $modal-header-bgcolor; 161 | color: $modal-header-txtcolor; 162 | border-color: $modal-border-color; 163 | button.ui-button{ 164 | border-radius: $btn-modal-close-radius; 165 | border-color: $modal-header-txtcolor; 166 | &:focus{ 167 | outline-color: $modal-header-txtcolor; 168 | } 169 | } 170 | 171 | } 172 | } 173 | } 174 | } 175 | .menu{ 176 | padding: 0.5em; 177 | li{ 178 | &:hover, &:focus{ 179 | background: $modal-option-hover; 180 | } 181 | &.selected{ 182 | background: $modal-option-active; 183 | } 184 | } 185 | h1, h2, h3{ 186 | color: $btn-hover; 187 | } 188 | a{ 189 | color: $btn-hover; 190 | } 191 | } 192 | } -------------------------------------------------------------------------------- /src/sass/player-green.scss: -------------------------------------------------------------------------------- 1 | /* Customization of the MFP access Player 2 | * 3 | * You can simply customize the player by defining a theme_class 4 | * in the options of the player 5 | * you can start from this example and compile this sass file 6 | */ 7 | 8 | 9 | /* sliders */ 10 | $timeline-cursor-radius: 15px; 11 | $audio-cursor-radius: 15px; 12 | 13 | /* buttons */ 14 | $btn-play-height: 42px; 15 | $btn-audio-height: 30px; 16 | $btn-speed-width: 75px; 17 | $btn-icomoon-height: 32px; 18 | $btn-modal-close-radius: 15px; 19 | 20 | 21 | /* colors */ 22 | $outline-color: #3E8526; 23 | $background-color: #000; 24 | $timeline-bar-color: #3E8526;/* past time */ 25 | $timeline-bar-unbuffer-color: #CCC; 26 | $timeline-bar-buffer-color: #C6EEB7; 27 | $btn-hover: #3E8526; 28 | $audio-bar-color: #3E8526;/* turned on */ 29 | $audio-bar-inactive-color: rgba(33,32,32,.9); 30 | $btn-speed-bgcolor: #333; 31 | $btn-speed-bordercolor: #3E8526; 32 | $btn-active: #FFF; 33 | $btn-disabled: #888; 34 | 35 | /* modal */ 36 | $modal-background-color: rgba(33,32,32,.9); 37 | $modal-header-bgcolor: #3E8526; 38 | $modal-header-txtcolor: #000; 39 | $modal-border-color: #3E8526; 40 | $modal-text-color: #fff; 41 | $modal-option-active: rgba(73,73,73,.9); 42 | $modal-option-hover: rgba(56,56,56,.9); 43 | 44 | 45 | /* place here the name of your overiding class */ 46 | 47 | .mfp-wrapper.green_theme{ 48 | background-color: $background-color; 49 | .control-bar{ 50 | background-color: $background-color; 51 | .ui-state-default:focus, .ui-widget-content .ui-state-default:focus { 52 | outline-color: $outline-color; 53 | } 54 | .progress-buffer{ 55 | top:-5px; 56 | left:0; 57 | right:0; 58 | width: 100%; 59 | background-color: #CCC; 60 | .buffer{ 61 | background-color: $timeline-bar-buffer-color; 62 | } 63 | } 64 | .progress-bar{ 65 | border-radius: 0; 66 | margin-left: 0; 67 | margin-right: 0; 68 | margin-top: -13px; 69 | width: calc(100% - 1.2em); 70 | border: none; 71 | .ui-widget-header{ 72 | background-color: $timeline-bar-color; 73 | border-radius: 0; 74 | } 75 | .ui-slider-handle{ 76 | cursor: pointer; 77 | border-radius: $timeline-cursor-radius; 78 | margin-left: 0; 79 | top: -0.39em; 80 | } 81 | } 82 | .left-part{ 83 | button{ 84 | color: #btn-active; 85 | &:focus{ 86 | outline-color: $outline-color; 87 | color: $btn-hover; 88 | } 89 | &:hover, &.play:hover, &.pause:hover{ 90 | color: $btn-hover; 91 | } 92 | &.play, &.pause{ 93 | font-size: $btn-play-height; 94 | line-height: 1.07; 95 | } 96 | } 97 | .soundPart{ 98 | button.sound{ 99 | font-size: $btn-audio-height; 100 | line-height: 1.07; 101 | display: inline-block; 102 | width: ($btn-audio-height * 1.3); 103 | text-align: left; 104 | &:hover, &:focus{ 105 | color: $btn-hover; 106 | } 107 | } 108 | .sound-range{ 109 | border-color: $audio-bar-color; 110 | background-color: $audio-bar-inactive-color; 111 | .ui-widget-header{ 112 | background-color: $audio-bar-color; 113 | left: -1px; 114 | } 115 | .ui-slider-handle{ 116 | height: 1.2em; 117 | border-radius: $audio-cursor-radius; 118 | top: -0.39em; 119 | } 120 | } 121 | } 122 | .timer{ 123 | color: $btn-active; 124 | } 125 | } 126 | select:focus{ 127 | outline-color: $outline-color; 128 | } 129 | .right-part{ 130 | select.speed{ 131 | background-color: $btn-speed-bgcolor; 132 | //border: 1px solid $btn-speed-bordercolor; 133 | width: $btn-speed-width; 134 | 135 | } 136 | button{ 137 | font-size: $btn-icomoon-height; 138 | line-height: ($btn-icomoon-height * 1.07); 139 | color: $btn-active; 140 | &:focus, &:hover{ 141 | color: $btn-hover; 142 | } 143 | &:focus{ 144 | outline-color: $outline-color; 145 | } 146 | &.off{ 147 | color: $btn-disabled; 148 | } 149 | &.expand{ 150 | color: $btn-active; 151 | &:hover{ 152 | color: $btn-hover; 153 | } 154 | } 155 | } 156 | .ui-widget-content{ 157 | border-color: $modal-border-color; 158 | background: $modal-background-color; 159 | color: $modal-text-color; 160 | .ui-dialog-titlebar{ 161 | background: $modal-header-bgcolor; 162 | color: $modal-header-txtcolor; 163 | border-color: $modal-border-color; 164 | button.ui-button{ 165 | border-radius: $btn-modal-close-radius; 166 | border-color: $modal-header-txtcolor; 167 | &:focus{ 168 | outline-color: $modal-header-txtcolor; 169 | } 170 | } 171 | 172 | } 173 | } 174 | } 175 | } 176 | .menu{ 177 | padding: 0.5em; 178 | li{ 179 | &:hover, &:focus{ 180 | background: $modal-option-hover; 181 | } 182 | &.selected{ 183 | background: $modal-option-active; 184 | } 185 | } 186 | h1, h2, h3{ 187 | color: $btn-hover; 188 | } 189 | a{ 190 | color: $btn-hover; 191 | } 192 | } 193 | } -------------------------------------------------------------------------------- /src/sass/player-blue.scss: -------------------------------------------------------------------------------- 1 | /* Customization of the MFP access Player 2 | * 3 | * You can simply customize the player by defining a theme_class 4 | * in the options of the player 5 | * you can start from this example and compile this sass file 6 | */ 7 | 8 | 9 | /* sliders */ 10 | $timeline-cursor-radius: 15px; 11 | $audio-cursor-radius: 15px; 12 | 13 | /* buttons */ 14 | $btn-play-height: 42px; 15 | $btn-audio-height: 30px; 16 | $btn-speed-width: 75px; 17 | $btn-icomoon-height: 32px; 18 | $btn-modal-close-radius: 15px; 19 | 20 | 21 | /* colors */ 22 | $outline-color: #0094C8; 23 | $background-color: #000; 24 | $timeline-bar-color: #0094C8;/* past time */ 25 | $timeline-bar-unbuffer-color: #CCC; 26 | $timeline-bar-buffer-color: #BBEEFE; 27 | $btn-hover: #0094C8; 28 | $audio-bar-color: #0094C8;/* turned on */ 29 | $audio-bar-inactive-color: rgba(33,32,32,.9); 30 | $btn-speed-bgcolor: #333; 31 | $btn-speed-bordercolor: #0094C8; 32 | $btn-active: #FFF; 33 | $btn-disabled: #888; 34 | 35 | /* modal */ 36 | $modal-background-color: rgba(33,32,32,.9); 37 | $modal-header-bgcolor: #0094C8; 38 | $modal-header-txtcolor: #000; 39 | $modal-border-color: #16380a; 40 | $modal-text-color: #fff; 41 | $modal-option-active: rgba(73,73,73,.9); 42 | $modal-option-hover: rgba(56,56,56,.9); 43 | 44 | 45 | 46 | /* place here the name of your overiding class */ 47 | 48 | .mfp-wrapper.blue_theme{ 49 | background-color: $background-color; 50 | .control-bar{ 51 | background-color: $background-color; 52 | .ui-state-default:focus, .ui-widget-content .ui-state-default:focus { 53 | outline-color: $outline-color; 54 | } 55 | .progress-buffer{ 56 | top:-5px; 57 | left:0; 58 | right:0; 59 | width: 100%; 60 | background-color: #CCC; 61 | .buffer{ 62 | background-color: $timeline-bar-buffer-color; 63 | } 64 | } 65 | .progress-bar{ 66 | border-radius: 0; 67 | margin-left: 0; 68 | margin-right: 0; 69 | margin-top: -13px; 70 | width: calc(100% - 1.2em); 71 | border: none; 72 | .ui-widget-header{ 73 | background-color: $timeline-bar-color; 74 | border-radius: 0; 75 | } 76 | .ui-slider-handle{ 77 | cursor: pointer; 78 | border-radius: $timeline-cursor-radius; 79 | margin-left: 0; 80 | top: -0.39em; 81 | } 82 | } 83 | .left-part{ 84 | button{ 85 | color: #btn-active; 86 | &:focus{ 87 | outline-color: $outline-color; 88 | color: $btn-hover; 89 | } 90 | &:hover, &.play:hover, &.pause:hover{ 91 | color: $btn-hover; 92 | } 93 | &.play, &.pause{ 94 | font-size: $btn-play-height; 95 | line-height: 1.07; 96 | } 97 | } 98 | .soundPart{ 99 | button.sound{ 100 | font-size: $btn-audio-height; 101 | line-height: 1.07; 102 | display: inline-block; 103 | width: ($btn-audio-height * 1.3); 104 | text-align: left; 105 | &:hover, &:focus{ 106 | color: $btn-hover; 107 | } 108 | } 109 | .sound-range{ 110 | border-color: $audio-bar-color; 111 | background-color: $audio-bar-inactive-color; 112 | .ui-widget-header{ 113 | background-color: $audio-bar-color; 114 | left: -1px; 115 | } 116 | .ui-slider-handle{ 117 | height: 1.2em; 118 | border-radius: $audio-cursor-radius; 119 | top: -0.39em; 120 | } 121 | } 122 | } 123 | .timer{ 124 | color: $btn-active; 125 | } 126 | } 127 | select:focus{ 128 | outline-color: $outline-color; 129 | } 130 | .right-part{ 131 | select.speed{ 132 | background-color: $btn-speed-bgcolor; 133 | //border: 1px solid $btn-speed-bordercolor; 134 | width: $btn-speed-width; 135 | 136 | } 137 | button{ 138 | font-size: $btn-icomoon-height; 139 | line-height: ($btn-icomoon-height * 1.07); 140 | color: $btn-active; 141 | &:focus, &:hover{ 142 | color: $btn-hover; 143 | } 144 | &:focus{ 145 | outline-color: $outline-color; 146 | } 147 | &.off{ 148 | color: $btn-disabled; 149 | } 150 | &.expand{ 151 | color: $btn-active; 152 | &:hover{ 153 | color: $btn-hover; 154 | } 155 | } 156 | } 157 | .ui-widget-content{ 158 | border-color: $modal-border-color; 159 | background: $modal-background-color; 160 | color: $modal-text-color; 161 | .ui-dialog-titlebar{ 162 | background: $modal-header-bgcolor; 163 | color: $modal-header-txtcolor; 164 | border-color: $modal-border-color; 165 | button.ui-button{ 166 | border-radius: $btn-modal-close-radius; 167 | border-color: $modal-header-txtcolor; 168 | &:focus{ 169 | outline-color: $modal-header-txtcolor; 170 | } 171 | } 172 | 173 | } 174 | } 175 | } 176 | } 177 | .menu{ 178 | padding: 0.5em; 179 | li{ 180 | &:hover, &:focus{ 181 | background: $modal-option-hover; 182 | } 183 | &.selected{ 184 | background: $modal-option-active; 185 | } 186 | } 187 | h1, h2, h3{ 188 | color: $btn-hover; 189 | } 190 | a{ 191 | color: $btn-hover; 192 | } 193 | } 194 | } -------------------------------------------------------------------------------- /dist/demo/stylesheets/demo-red.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:'FranceTVBrownWeb';src:url(../../demo/fonts/FranceTVBrownWeb-Light.70aff65f8a07af368b8baf1a5f2a10cf.eot) format("embedded-opentype"),url(../../demo/fonts/FranceTVBrownWeb-Light.aa5780f736f1ad20b99cb25b62561b2b.woff2) format("woff2"),url(../../demo/fonts/FranceTVBrownWeb-Light.0e78986466082ee906a58bac87d7c18f.woff) format("woff"),url(../../demo/fonts/FranceTVBrownWeb-Light.818a554d97c2a6fd77cf041ee16bfd46.ttf) format("truetype"),url(../../demo/fonts/FranceTVBrownWeb-Light.ddb30488921e5b7d513f3e7ffd0ae63c.svg) format("svg");font-weight:300;font-style:normal}@font-face{font-family:'FranceTVBrownWeb-bold';src:url(../../demo/fonts/FranceTVBrownWeb-Bold.bf112cd84605ada2d625444abb8247dd.eot) format("embedded-opentype"),url(../../demo/fonts/FranceTVBrownWeb-Bold.eadbb8d0a8c064375d225a5702a02c57.woff2) format("woff2"),url(../../demo/fonts/FranceTVBrownWeb-Bold.dd40b835b9a60b3bc92e8055172e68b4.woff) format("woff"),url(../../demo/fonts/FranceTVBrownWeb-Bold.9814320e86d62675f34408c8f33f6a7b.ttf) format("truetype"),url(../../demo/fonts/FranceTVBrownWeb-Bold.3efca840478ff0e20074bed4eecadee4.svg) format("svg");font-weight:300;font-style:normal}html,body{margin:0;font-family:"FranceTVBrownWeb"}ul.nav{list-style:none;margin:0}a.evitement{display:inline-block;color:#000;padding:.5em;position:absolute;right:99999px;z-index:100}a.evitement:focus{right:0}header{background-image:linear-gradient(to right, #f2500c, #f45f23, #f56d35, #f67a46, #f78656);color:#fff}header a,header img{display:inline-block;z-index:2}header a:focus,header img:focus{outline:1px solid #fff}@media screen and (max-width: 20rem){header a img{display:inline-block;padding:0 15%;width:70%;max-height:100%;background-color:#000}div.triangle1 div.triangle2{display:none}h1{font-style:italic;font-size:1.5rem;font-weight:400;height:70%;width:100%;line-height:40px;text-align:center;margin:0;padding:0;font-family:"FranceTVBrownWeb-bold";display:block;background-color:#E04a0B}nav#navbar{background-color:#0A0A0A;margin-top:27%;box-shadow:0 0 2px 2px rgba(0,0,0,0.7)}nav#navbar ul{padding-left:0;margin:0}nav#navbar ul li{list-style:none;display:inline-block;border-right:2px solid #6E7881;padding:10px 0;width:100%;text-align:center}nav#navbar ul li a{text-decoration:none;font-size:1.4rem;font-weight:400;color:#fff;transition-duration:0s}nav#navbar ul li a:focus{outline:1px solid #fff}nav#navbar ul li a:hover{color:#f78656;text-decoration:underline}nav#navbar ul li a:active{text-decoration:underline;background-color:#000;color:#f78656}}@media screen and (min-width: 21rem){header a img{background-color:#000}div.triangle1{display:inline-block;border-style:solid;border-width:1.9rem 0 1.9rem 20px;border-color:#E04a0B #E04a0B #E04a0B #000;_border-color:#000 #000 #000 #000;_filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000');margin:0 -.35rem}h1{font-style:italic;font-size:1.5rem;font-weight:400;margin:0;padding:1.08rem;font-family:"FranceTVBrownWeb-bold";display:inline-block;background-color:#E04a0B;vertical-align:top}div.triangle2{display:inline-block;border-style:solid;border-width:1.9rem 0 1.9rem 20px;border-color:transparent transparent transparent #E04a0B;_border-color:#000 #000 #000 #E04a0B;_filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000');margin-left:-.35rem}nav#navbar{background-color:#0A0A0A;margin-top:0;box-shadow:0 0 2px 2px rgba(0,0,0,0.7)}nav#navbar ul{padding-left:0;margin:0}nav#navbar ul li{list-style:none;display:inline-block;border-right:2px solid #6E7881;padding:0.5rem 1rem}nav#navbar ul li a{text-decoration:none;font-size:1.4rem;font-weight:400;color:#fff;transition-duration:0s}nav#navbar ul li a:focus{outline:1px solid #fff}nav#navbar ul li a:hover{color:#f78656;text-decoration:underline}nav#navbar ul li a :active{text-decoration:underline;background-color:#000;color:#f78656}}main{width:99%;margin:20px auto;font-size:1.2rem}h2,h3:not(ui-widget-content>h3){color:#cd440A;margin:auto}h2{font-size:2rem;margin-left:2%}h3{font-size:1.4rem}p:not(footer>p),li{font-family:"FranceTVBrownWeb";line-height:1.5rem;font-size:1.4rem}main a{color:#B16316;font-family:"FranceTVBrownWeb";font-weight:bold}main a:hover{text-decoration:none}main a:focus{outline:1px solid var(main-focus-color)}.cont{position:relative}.cont::after{content:'';display:block;clear:both}@media screen and (max-width: 640px){.container{width:100%}.video{display:block;width:auto}}@media screen and (min-width: 641px){article#video{vertical-align:top;display:inline-block;width:70%}.cont{position:relative}.cont::after{content:'';display:block;clear:both}}@media screen and (max-width: 640px){#mde{padding:15px;width:95%;display:inline-block}}@media screen and (min-width: 641px){#mde{padding:10px;width:28%;display:inline-block}}#text-target,#text-target1{width:60%;padding-top:20px}code{border:1px solid #333;padding:10px;margin:5px;display:block;background-color:#CCC;max-width:1000px;overflow:auto}#desc table{max-width:1000px}#desc table tr td,#desc table tr th{padding:4px;border:1px solid #000}#desc table tr th{background-color:#EEE}footer{background-color:#6E7881;padding:1% 20%;margin:2% 0 0 0;color:#fff;text-align:center}footer a{color:#fff}footer a:focus{outline:1px solid #fff}footer a:hover{text-decoration:none} 2 | 3 | -------------------------------------------------------------------------------- /src/js/video-players/loadVideoType-html5.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MFP AccessPlayer v.2.0.0 3 | * http://smartplayer.mfpst.com 4 | * 5 | * Copyright MFP Multimedia France Productions 6 | * Released under GPL 3 licence 7 | * backgroundImage: "key" 8 | * Date : 2019-07-18T02:10Z 9 | */ 10 | 11 | class VideoHtml5{ 12 | 13 | constructor(video, element){ 14 | this.video = video; 15 | this.container = element; 16 | this.seeking = false; 17 | } 18 | 19 | destroy(){} 20 | 21 | init(){ 22 | return new Promise((resolve, reject) => { 23 | if(this.video.fullscreen){ 24 | this.webkitEnterFullscreen(); 25 | } 26 | let src = this.video.src; 27 | let mime = this.video.mime; 28 | const playerCode = ` 29 | `; 32 | $(this.container).find('.video-container').html(playerCode); 33 | this.videoPlayer = $(this.container).find('video')[0]; 34 | resolve(); 35 | }); 36 | } 37 | 38 | canChangeSpeedRate(){ 39 | return new Promise((resolve, reject)=>{ 40 | resolve(true); 41 | }); 42 | } 43 | 44 | getPosibleSpeedRates(){ 45 | return new Promise((resolve, reject)=>{ 46 | resolve([0.25, 0.5, 1, 1.5, 2]); 47 | }); 48 | } 49 | 50 | webkitExitFullscreen(){ 51 | this.fullScreen = false; 52 | $(this.container).removeClass('vimeo-fullscreen'); 53 | } 54 | 55 | webkitEnterFullscreen(){ 56 | $(this.container).addClass('vimeo-fullscreen'); 57 | this.fullScreen = true; 58 | } 59 | 60 | on(event, callback){ 61 | if(event=='playbackratechange'){ 62 | event = 'ratechange'; 63 | } 64 | return $(this.videoPlayer).on(event, callback); 65 | } 66 | 67 | off(event, callback=null){ 68 | if(event=='playbackratechange'){ 69 | event = 'ratechange'; 70 | } 71 | return $(this.videoPlayer).off(event, callback); 72 | } 73 | 74 | play(){ 75 | return this.videoPlayer.play(); 76 | } 77 | 78 | pause(){ 79 | return this.videoPlayer.pause(); 80 | } 81 | 82 | getDuration(){ 83 | return new Promise((resolve, reject)=>{ 84 | resolve(this.videoPlayer.duration); 85 | }); 86 | } 87 | 88 | getCurrentTime(){ 89 | return new Promise((resolve, reject)=>{ 90 | resolve(this.videoPlayer.currentTime); 91 | }); 92 | } 93 | 94 | setCurrentTime(time){ 95 | return new Promise((resolve,reject)=>{ 96 | this.videoPlayer.currentTime = time; 97 | resolve(this.videoPlayer.currentTime); 98 | }); 99 | 100 | } 101 | 102 | getBuffered(){ 103 | return new Promise((resolve, reject)=>{ 104 | resolve(this.videoPlayer.buffered); 105 | }); 106 | } 107 | 108 | getTextTracks(){ 109 | return new Promise((resolve, reject)=>{ 110 | resolve(this.videoPlayer.textTracks); 111 | }); 112 | } 113 | 114 | getCurrentSrc(){ 115 | return new Promise((resolve, reject)=>{ 116 | resolve(this.videoPlayer.currentSrc); 117 | }); 118 | } 119 | 120 | setSrc(src){ 121 | this.videoPlayer.src = src; 122 | } 123 | 124 | getPaused(){ 125 | return new Promise((resolve, reject)=>{ 126 | resolve(this.videoPlayer.paused); 127 | }); 128 | } 129 | 130 | setControls(status){ 131 | this.videoPlayer.controls = status; 132 | } 133 | 134 | setTabIndex(index){ 135 | this.videoPlayer.tabindex = index; 136 | } 137 | 138 | setPlaybackRate(rate){ 139 | return new Promise((resolve, reject)=>{ 140 | //console.log('changing rate to '+rate); 141 | this.videoPlayer.playbackRate = rate; 142 | resolve(rate); 143 | }); 144 | 145 | } 146 | getPlaybackRate(){ 147 | return new Promise((resolve, reject)=>{ 148 | resolve(this.videoPlayer.playbackRate); 149 | }); 150 | } 151 | 152 | getVolume(){ 153 | return new Promise((resolve, reject)=>{ 154 | resolve(this.videoPlayer.volume); 155 | }); 156 | } 157 | 158 | setVolume(volume){ 159 | return new Promise((resolve, reject)=>{ 160 | this.videoPlayer.volume = volume; 161 | resolve(this.videoPlayer.volume); 162 | }); 163 | } 164 | setMuted(bool){ 165 | return new Promise((resolve, reject)=>{ 166 | this.videoPlayer.muted=bool; 167 | resolve(); 168 | }); 169 | } 170 | } 171 | 172 | 173 | MFP.prototype.loadVideoHtml5 = function(video){ 174 | return new Promise((resolve, reject) => { 175 | if(typeof(video)!=='object'){ 176 | video = { 177 | src: video 178 | }; 179 | } 180 | video.fullscreen = this.notSupportedStandarFullScreen; 181 | const videoPlayer = new VideoHtml5(video, this.container); 182 | videoPlayer.init().then(()=>{ 183 | resolve(videoPlayer); 184 | }); 185 | }); 186 | }; 187 | -------------------------------------------------------------------------------- /dist/demo/index-red.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Démo du lecteur MFP AccessPlayer 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 32 | 33 | 34 |
35 | France.tv access 36 |
37 |

Access Player

38 |
39 |
40 | 41 | 42 | 51 | 52 | 53 |
54 | 55 |
56 |

Démonstration avec source principale VIMEO

57 |
58 |
59 | 75 |
76 |
77 |
78 |
79 |

À propos de cette démonstration

80 |

Exemple de vidéo utilisant toutes les fonctionnalités du lecteur.

81 |
    82 |
  • Vidéo HD => chargée depuis site vimeo
    • 83 |
  • Vidéo LD => chargée depuis site du player
    • 84 |
  • Video AD => chargée depuis site du player
    • 85 |
  • Vidéo signée => chargée depuis site du player
    • 86 |
87 |

88 | Le sélecteur de vitesse de lecture vidéo dépend du compte Vimeo auquel appartient la vidéo, le player récupère les vitesses disponibles et les affiche. Si aucune vitesse n'est retournée par Vimeo on ne laisse afficher que le choix 1x.

89 |

Fonctionnalités pour l'accessibilité

90 |
    91 |
  • Sous-titrage : 92 |
      93 |
    • en version brut, personnalisable via le panneau de configuration (format srt)
      • 94 |
    • en version colorée et positionnée selon les recommandations de la charte CSA (format stl/vtt)
      • 95 |
    96 |
    • 97 |
  • Audiodescription
    • 98 |
  • Langue des signes française (LSF)
    • 99 |
  • Version texte de la vidéo (transcription)
    • 100 |
101 |

Autres fonctionnalités

102 |
    103 |
  • Transcription en direct (live transcript)
    • 104 |
  • Chapitrage : possibilité de se rendre directement à certains moments prédéfinis dans la vidéo
    • 105 |
  • Vitesse de lecture
    • 106 |
  • Poids de la vidéo : 107 |
      108 |
    • une version haute définition
      • 109 |
    • une version basse définition
      • 110 |
    111 |
112 |
113 | 114 |
115 | 116 |
117 |
118 | 119 | 122 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /dist/demo/index-green.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Démo du lecteur MFP AccessPlayer 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 32 | 33 | 34 |
35 | France.tv access 36 |
37 |

Access Player

38 |
39 |
40 | 41 | 42 | 51 | 52 | 53 |
54 | 55 |
56 |

Démonstration avec source principale VIMEO

57 |
58 |
59 | 75 |
76 |
77 |
78 |
79 |

À propos de cette démonstration

80 |

Exemple de vidéo utilisant toutes les fonctionnalités du lecteur.

81 |
    82 |
  • Vidéo HD => chargée depuis site vimeo
    • 83 |
  • Vidéo LD => chargée depuis site du player
    • 84 |
  • Video AD => chargée depuis site du player
    • 85 |
  • Vidéo signée => chargée depuis site du player
    • 86 |
87 |

88 | Le sélecteur de vitesse de lecture vidéo dépend du compte Vimeo auquel appartient la vidéo, le player récupère les vitesses disponibles et les affiche. Si aucune vitesse n'est retournée par Vimeo on ne laisse afficher que le choix 1x.

89 |

Fonctionnalités pour l'accessibilité

90 |
    91 |
  • Sous-titrage : 92 |
      93 |
    • en version brut, personnalisable via le panneau de configuration (format srt)
      • 94 |
    • en version colorée et positionnée selon les recommandations de la charte CSA (format stl/vtt)
      • 95 |
    96 |
    • 97 |
  • Audiodescription
    • 98 |
  • Langue des signes française (LSF)
    • 99 |
  • Version texte de la vidéo (transcription)
    • 100 |
101 |

Autres fonctionnalités

102 |
    103 |
  • Transcription en direct (live transcript)
    • 104 |
  • Chapitrage : possibilité de se rendre directement à certains moments prédéfinis dans la vidéo
    • 105 |
  • Vitesse de lecture
    • 106 |
  • Poids de la vidéo : 107 |
      108 |
    • une version haute définition
      • 109 |
    • une version basse définition
      • 110 |
    111 |
112 |
113 | 114 |
115 | 116 |
117 |
118 | 119 | 122 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /src-demo/html/index-red.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Démo du lecteur MFP AccessPlayer 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 32 | 33 | 34 |
35 | France.tv access 36 |
37 |

Access Player

38 |
39 |
40 | 41 | 42 | 51 | 52 | 53 |
54 | 55 |
56 |

Démonstration avec source principale VIMEO

57 |
58 |
59 | 75 |
76 |
77 |
78 |
79 |

À propos de cette démonstration

80 |

Exemple de vidéo utilisant toutes les fonctionnalités du lecteur.

81 |
    82 |
  • Vidéo HD => chargée depuis site vimeo
    • 83 |
  • Vidéo LD => chargée depuis site du player
    • 84 |
  • Video AD => chargée depuis site du player
    • 85 |
  • Vidéo signée => chargée depuis site du player
    • 86 |
87 |

88 | Le sélecteur de vitesse de lecture vidéo dépend du compte Vimeo auquel appartient la vidéo, le player récupère les vitesses disponibles et les affiche. Si aucune vitesse n'est retournée par Vimeo on ne laisse afficher que le choix 1x.

89 |

Fonctionnalités pour l'accessibilité

90 |
    91 |
  • Sous-titrage : 92 |
      93 |
    • en version brut, personnalisable via le panneau de configuration (format srt)
      • 94 |
    • en version colorée et positionnée selon les recommandations de la charte CSA (format stl/vtt)
      • 95 |
    96 |
    • 97 |
  • Audiodescription
    • 98 |
  • Langue des signes française (LSF)
    • 99 |
  • Version texte de la vidéo (transcription)
    • 100 |
101 |

Autres fonctionnalités

102 |
    103 |
  • Transcription en direct (live transcript)
    • 104 |
  • Chapitrage : possibilité de se rendre directement à certains moments prédéfinis dans la vidéo
    • 105 |
  • Vitesse de lecture
    • 106 |
  • Poids de la vidéo : 107 |
      108 |
    • une version haute définition
      • 109 |
    • une version basse définition
      • 110 |
    111 |
112 |
113 | 114 |
115 | 116 |
117 |
118 | 119 | 122 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /src-demo/html/index-green.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Démo du lecteur MFP AccessPlayer 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 32 | 33 | 34 |
35 | France.tv access 36 |
37 |

Access Player

38 |
39 |
40 | 41 | 42 | 51 | 52 | 53 |
54 | 55 |
56 |

Démonstration avec source principale VIMEO

57 |
58 |
59 | 75 |
76 |
77 |
78 |
79 |

À propos de cette démonstration

80 |

Exemple de vidéo utilisant toutes les fonctionnalités du lecteur.

81 |
    82 |
  • Vidéo HD => chargée depuis site vimeo
    • 83 |
  • Vidéo LD => chargée depuis site du player
    • 84 |
  • Video AD => chargée depuis site du player
    • 85 |
  • Vidéo signée => chargée depuis site du player
    • 86 |
87 |

88 | Le sélecteur de vitesse de lecture vidéo dépend du compte Vimeo auquel appartient la vidéo, le player récupère les vitesses disponibles et les affiche. Si aucune vitesse n'est retournée par Vimeo on ne laisse afficher que le choix 1x.

89 |

Fonctionnalités pour l'accessibilité

90 |
    91 |
  • Sous-titrage : 92 |
      93 |
    • en version brut, personnalisable via le panneau de configuration (format srt)
      • 94 |
    • en version colorée et positionnée selon les recommandations de la charte CSA (format stl/vtt)
      • 95 |
    96 |
    • 97 |
  • Audiodescription
    • 98 |
  • Langue des signes française (LSF)
    • 99 |
  • Version texte de la vidéo (transcription)
    • 100 |
101 |

Autres fonctionnalités

102 |
    103 |
  • Transcription en direct (live transcript)
    • 104 |
  • Chapitrage : possibilité de se rendre directement à certains moments prédéfinis dans la vidéo
    • 105 |
  • Vitesse de lecture
    • 106 |
  • Poids de la vidéo : 107 |
      108 |
    • une version haute définition
      • 109 |
    • une version basse définition
      • 110 |
    111 |
112 |
113 | 114 |
115 | 116 |
117 |
118 | 119 | 122 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /dist/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Démo du lecteur MFP AccessPlayer 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 32 | 33 | 34 |
35 | France.tv access 36 |
37 |

Access Player

38 |
39 |
40 | 41 | 42 | 51 | 52 | 53 |
54 | 55 |
56 |

Démonstration avec source principale VIMEO

57 |
58 |
59 | 76 |
77 |
78 |
79 |
80 |

À propos de cette démonstration

81 |

Exemple de vidéo utilisant toutes les fonctionnalités du lecteur.

82 |
    83 |
  • Vidéo HD => chargée depuis site vimeo
    • 84 |
  • Vidéo LD => chargée depuis site du player
    • 85 |
  • Video AD => chargée depuis site du player
    • 86 |
  • Vidéo signée => chargée depuis site du player
    • 87 |
88 |

89 | Le sélecteur de vitesse de lecture vidéo dépend du compte Vimeo auquel appartient la vidéo, le player récupère les vitesses disponibles et les affiche. Si aucune vitesse n'est retournée par Vimeo on ne laisse afficher que le choix 1x.

90 |

Fonctionnalités pour l'accessibilité

91 |
    92 |
  • Sous-titrage : 93 |
      94 |
    • en version brut, personnalisable via le panneau de configuration (format srt)
      • 95 |
    • en version colorée et positionnée selon les recommandations de la charte CSA (format stl/vtt)
      • 96 |
    97 |
    • 98 |
  • Audiodescription
    • 99 |
  • Langue des signes française (LSF)
    • 100 |
  • Version texte de la vidéo (transcription)
    • 101 |
102 |

Autres fonctionnalités

103 |
    104 |
  • Transcription en direct (live transcript)
    • 105 |
  • Chapitrage : possibilité de se rendre directement à certains moments prédéfinis dans la vidéo
    • 106 |
  • Vitesse de lecture
    • 107 |
  • Poids de la vidéo : 108 |
      109 |
    • une version haute définition
      • 110 |
    • une version basse définition
      • 111 |
    112 |
113 |
114 | 115 |
116 | 117 |
118 |
119 | 120 | 123 | 124 | 130 | 131 | -------------------------------------------------------------------------------- /src-demo/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Démo du lecteur MFP AccessPlayer 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 32 | 33 | 34 |
35 | France.tv access 36 |
37 |

Access Player

38 |
39 |
40 | 41 | 42 | 51 | 52 | 53 |
54 | 55 |
56 |

Démonstration avec source principale VIMEO

57 |
58 |
59 | 76 |
77 |
78 |
79 |
80 |

À propos de cette démonstration

81 |

Exemple de vidéo utilisant toutes les fonctionnalités du lecteur.

82 |
    83 |
  • Vidéo HD => chargée depuis site vimeo
    • 84 |
  • Vidéo LD => chargée depuis site du player
    • 85 |
  • Video AD => chargée depuis site du player
    • 86 |
  • Vidéo signée => chargée depuis site du player
    • 87 |
88 |

89 | Le sélecteur de vitesse de lecture vidéo dépend du compte Vimeo auquel appartient la vidéo, le player récupère les vitesses disponibles et les affiche. Si aucune vitesse n'est retournée par Vimeo on ne laisse afficher que le choix 1x.

90 |

Fonctionnalités pour l'accessibilité

91 |
    92 |
  • Sous-titrage : 93 |
      94 |
    • en version brut, personnalisable via le panneau de configuration (format srt)
      • 95 |
    • en version colorée et positionnée selon les recommandations de la charte CSA (format stl/vtt)
      • 96 |
    97 |
    • 98 |
  • Audiodescription
    • 99 |
  • Langue des signes française (LSF)
    • 100 |
  • Version texte de la vidéo (transcription)
    • 101 |
102 |

Autres fonctionnalités

103 |
    104 |
  • Transcription en direct (live transcript)
    • 105 |
  • Chapitrage : possibilité de se rendre directement à certains moments prédéfinis dans la vidéo
    • 106 |
  • Vitesse de lecture
    • 107 |
  • Poids de la vidéo : 108 |
      109 |
    • une version haute définition
      • 110 |
    • une version basse définition
      • 111 |
    112 |
113 |
114 | 115 |
116 | 117 |
118 |
119 | 120 | 123 | 124 | 130 | 131 | -------------------------------------------------------------------------------- /dist/MFP/trackreader/loadTrackType-srt.js: -------------------------------------------------------------------------------- 1 | !function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=17)}([function(t,e){var n={utf8:{stringToBytes:function(t){return n.bin.stringToBytes(unescape(encodeURIComponent(t)))},bytesToString:function(t){return decodeURIComponent(escape(n.bin.bytesToString(t)))}},bin:{stringToBytes:function(t){for(var e=[],n=0;n>>24)|4278255360&(n[p]<<24|n[p]>>>8);n[a>>>5]|=128<>>9<<4)]=a;var d=u._ff,g=u._gg,y=u._hh,b=u._ii;for(p=0;p>>0,l=l+T>>>0,f=f+m>>>0,h=h+x>>>0}return r.endian([c,l,f,h])})._ff=function(t,e,n,r,o,i,s){var u=t+(e&n|~e&r)+(o>>>0)+s;return(u<>>32-i)+e},u._gg=function(t,e,n,r,o,i,s){var u=t+(e&r|n&~r)+(o>>>0)+s;return(u<>>32-i)+e},u._hh=function(t,e,n,r,o,i,s){var u=t+(e^n^r)+(o>>>0)+s;return(u<>>32-i)+e},u._ii=function(t,e,n,r,o,i,s){var u=t+(n^(e|~r))+(o>>>0)+s;return(u<>>32-i)+e},u._blocksize=16,u._digestsize=16,t.exports=function(t,e){if(null==t)throw new Error("Illegal argument "+t);var n=r.wordsToBytes(u(t,e));return e&&e.asBytes?n:e&&e.asString?s.bytesToString(n):r.bytesToHex(n)}},function(t,e,n){"use strict";n.d(e,"a",(function(){return o}));const r=n(1);class o{constructor(t,e,n){let o=Date.now()+"-"+Math.random()+"-"+Math.random();this.id=r(o),this.track=null,this.eventListeners=[],this.startTime=t,this.endTime=e,this.text=n,this.showing=!1,this.cue=new VTTCue(t,e,n),this.align=this.cue.align,this.line=this.cue.line,this.size=this.cue.size}setTrack(t){this.track=t}on(t,e){let n=Date.now()+"-"+Math.random()+"-"+Math.random(),o=r(n);this.eventListeners.push({eventName:t,callback:e,id:o})}getCueAsHTML(){return this.cue.getCueAsHTML()}off(t){let e=[];for(let n in this.eventListeners)n.id!==t&&e.push(n);return this.eventListeners=e,!0}dispatchEvent(t,e){for(let n of this.eventListeners)n.eventName===t&&n.callback(e)}check(t){tthis.endTime?this.showing&&(this.dispatchEvent("exit",this),this.showing=!1):this.showing||(this.dispatchEvent("enter",this),this.showing=!0)}}},function(t,e){var n,r;n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",r={rotl:function(t,e){return t<>>32-e},rotr:function(t,e){return t<<32-e|t>>>e},endian:function(t){if(t.constructor==Number)return 16711935&r.rotl(t,8)|4278255360&r.rotl(t,24);for(var e=0;e0;t--)e.push(Math.floor(256*Math.random()));return e},bytesToWords:function(t){for(var e=[],n=0,r=0;n>>5]|=t[n]<<24-r%32;return e},wordsToBytes:function(t){for(var e=[],n=0;n<32*t.length;n+=8)e.push(t[n>>>5]>>>24-n%32&255);return e},bytesToHex:function(t){for(var e=[],n=0;n>>4).toString(16)),e.push((15&t[n]).toString(16));return e.join("")},hexToBytes:function(t){for(var e=[],n=0;n>>6*(3-i)&63)):e.push("=");return e.join("")},base64ToBytes:function(t){t=t.replace(/[^A-Z0-9+\/]/gi,"");for(var e=[],r=0,o=0;r>>6-2*o);return e}},t.exports=r},function(t,e){function n(t){return!!t.constructor&&"function"==typeof t.constructor.isBuffer&&t.constructor.isBuffer(t)} 2 | /*! 3 | * Determine if an object is a Buffer 4 | * 5 | * @author Feross Aboukhadijeh 6 | * @license MIT 7 | */ 8 | t.exports=function(t){return null!=t&&(n(t)||function(t){return"function"==typeof t.readFloatLE&&"function"==typeof t.slice&&n(t.slice(0,0))}(t)||!!t._isBuffer)}},,,,,,,,,,,,,function(t,e,n){"use strict";n.r(e);var r=n(2);MFP.prototype.loadTrackTypeSRT=function(t,e,n){var o={player:null,track:null,render:function(t){var e=this,n=new XMLHttpRequest;n.open("GET",t,!0),n.responseType="",n.onload=function(t){if(200!=n.status)e.track.mode=disabled,e.player.subtitles.splice($(e.track).data("pos"),1),e.player.initSubtitlesMenu();else{function o(t){return t.replace(/^\s+|\s+$/g,"")}e.track.mode="hidden";var i=n.response.replace(/\r\n|\r|\n/g,"\n"),s=(i=o(i)).split("\n\n");for(let t in s){let n=s[t].split("\n");if(n.length>=2){let t=n[0],i=o(n[1].split(" --\x3e ")[0]),s=o(n[1].split(" --\x3e ")[1]),l=n[2];var u=60*parseInt(i.substring(0,2))*60+60*parseInt(i.substring(3,5))+parseInt(i.substring(6,8))+parseInt(i.substring(9,12))/1e3,a=60*parseInt(s.substring(0,2))*60+60*parseInt(s.substring(3,5))+parseInt(s.substring(6,8))+parseInt(s.substring(9,12))/1e3;if(n.length>2)for(let t=3;t>>24)|4278255360&(r[h]<<24|r[h]>>>8);r[a>>>5]|=128<>>9<<4)]=a;var y=u._ff,v=u._gg,p=u._hh,g=u._ii;for(h=0;h>>0,c=c+b>>>0,d=d+P>>>0,f=f+w>>>0}return n.endian([l,c,d,f])})._ff=function(e,t,r,n,i,o,s){var u=e+(t&r|~t&n)+(i>>>0)+s;return(u<>>32-o)+t},u._gg=function(e,t,r,n,i,o,s){var u=e+(t&n|r&~n)+(i>>>0)+s;return(u<>>32-o)+t},u._hh=function(e,t,r,n,i,o,s){var u=e+(t^r^n)+(i>>>0)+s;return(u<>>32-o)+t},u._ii=function(e,t,r,n,i,o,s){var u=e+(r^(t|~n))+(i>>>0)+s;return(u<>>32-o)+t},u._blocksize=16,u._digestsize=16,e.exports=function(e,t){if(null==e)throw new Error("Illegal argument "+e);var r=n.wordsToBytes(u(e,t));return t&&t.asBytes?r:t&&t.asString?s.bytesToString(r):n.bytesToHex(r)}},21:function(e,t,r){const n=r(1);class i{constructor(e){this.length=1,this.params={},e.on("progress",e=>{this.params=e})}start(e){return 0}end(e){return this.params.duration*this.params.percent}}class o{constructor(e,t){this.video=e,this.container=t,this.domId="vimeo-player-"+n(JSON.stringify(e)+Date.now()+Math.random()),this.currentWidth=0,this.seeking=!1,this.buffered=null}init(){return new Promise((e,t)=>{$.getScript("https://player.vimeo.com/api/player.js").done((t,r)=>{this.video.fullscreen&&this.webkitEnterFullscreen();const n=`
`,o=$(this.container).find(".video-container")[0];$(o).html(n);let s=this.video.src;null==s&&(s=this.video.id);const u=$(o).width(),a=new Vimeo.Player(this.domId,{id:s,width:u,maxwidth:"100%",maxheight:"100%",responsive:!0,playsinline:!0,byline:!1,speed:!0,controls:!1});var l=this;a.setMuted(!0).then((function(){a.play().then((function(){a.pause().then((function(){if(a.setMuted(!1),void 0!==l.video.startAt){var t=l.video.startAt;a.setCurrentTime(t)}let r=()=>{let e=$(o).find("iframe")[0];if(void 0===e)return setTimeout(r,300);$(e).attr("tabindex","-1"),$(e).attr("title","Video source Vimeo"),$(e).removeAttr("frameborder"),$(e).css("width","100%"),$(e).css("border","0"),l.currentWidth=$(e).width(),l.intervalId=setInterval(()=>{let e;window.innerHeight>window.innerWidth&&(e="portrait"),window.innerWidth>window.innerHeight&&(e="landscape");let t=$(o).find("iframe")[0];$(t).css("width","100%");var r=$(t).width();if(r!==l.currentWidth||l.orientation!==e){l.orientation=e,l.currentWidth=r;let n=.56*r,i=$(window).height();if(l.fullScreen||n>i){n=i-$($(l.container).find(".control-bar")[0]).height()}$(t).css("height",n+"px")}l.currentWidth=r},300)};setTimeout(r,100),l.buffered=new i(a),l.videoPlayer=a,e()}))}))}))})})}destroy(){clearInterval(this.intervalId)}webkitExitFullscreen(){this.fullScreen=!1,$(this.container).removeClass("vimeo-fullscreen")}webkitEnterFullscreen(){$(this.container).addClass("vimeo-fullscreen"),this.fullScreen=!0}canChangeSpeedRate(){return new Promise((e,t)=>{e(!0)})}getPosibleSpeedRates(){return new Promise((e,t)=>{this.videoPlayer.getPlaybackRate().then(t=>{this.videoPlayer.setPlaybackRate(t).then(t=>{e([.5,1,1.5,2])}).catch(t=>{e([1])})}).catch(t=>{e([1])})})}on(e,t){return"canplay"===e?t():this.videoPlayer.on(e,t)}off(e,t=null){if("canplay"!==e)return $(this.videoPlayer).off(e,t)}play(){return this.videoPlayer.play()}pause(){return this.videoPlayer.pause()}getDuration(){return this.videoPlayer.getDuration()}getCurrentTime(){return new Promise((e,t)=>{e(this.videoPlayer.getCurrentTime())})}setCurrentTime(e){return new Promise((t,r)=>{this.videoPlayer.setCurrentTime(e).then(e=>{t(e)}).catch((function(e){console.log(e),t(e)}))})}getBuffered(){return new Promise((e,t)=>{e(this.buffered)})}getTextTracks(){return this.videoPlayer.textTracks}getCurrentSrc(){return new Promise((e,t)=>{e(this.video.id)})}setSrc(e){this.videoPlayer.src=e}getPaused(){return this.videoPlayer.getPaused()}setControls(e){this.videoPlayer.controls=e}setTabIndex(e){this.videoPlayer.tabindex=e}setPlaybackRate(e){return this.videoPlayer.setPlaybackRate(e)}getPlaybackRate(){return this.videoPlayer.getPlaybackRate()}getVolume(){return this.videoPlayer.getVolume()}setVolume(e){return this.videoPlayer.setVolume(e)}setMuted(e){this.videoPlayer.setMuted(e)}}MFP.prototype.loadVideoVimeo=function(e){return new Promise((t,r)=>{e.fullscreen=this.notSupportedStandarFullScreen;const n=new o(e,this.container);n.init().then(()=>{t(n)})})}},3:function(e,t){var r,n;r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",n={rotl:function(e,t){return e<>>32-t},rotr:function(e,t){return e<<32-t|e>>>t},endian:function(e){if(e.constructor==Number)return 16711935&n.rotl(e,8)|4278255360&n.rotl(e,24);for(var t=0;t0;e--)t.push(Math.floor(256*Math.random()));return t},bytesToWords:function(e){for(var t=[],r=0,n=0;r>>5]|=e[r]<<24-n%32;return t},wordsToBytes:function(e){for(var t=[],r=0;r<32*e.length;r+=8)t.push(e[r>>>5]>>>24-r%32&255);return t},bytesToHex:function(e){for(var t=[],r=0;r>>4).toString(16)),t.push((15&e[r]).toString(16));return t.join("")},hexToBytes:function(e){for(var t=[],r=0;r>>6*(3-o)&63)):t.push("=");return t.join("")},base64ToBytes:function(e){e=e.replace(/[^A-Z0-9+\/]/gi,"");for(var t=[],n=0,i=0;n>>6-2*i);return t}},e.exports=n},4:function(e,t){function r(e){return!!e.constructor&&"function"==typeof e.constructor.isBuffer&&e.constructor.isBuffer(e)} 2 | /*! 3 | * Determine if an object is a Buffer 4 | * 5 | * @author Feross Aboukhadijeh 6 | * @license MIT 7 | */ 8 | e.exports=function(e){return null!=e&&(r(e)||function(e){return"function"==typeof e.readFloatLE&&"function"==typeof e.slice&&r(e.slice(0,0))}(e)||!!e._isBuffer)}}}); -------------------------------------------------------------------------------- /src/js/video-players/loadVideoType-vimeo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MFP AccessPlayer v.2.0.0 3 | * http://smartplayer.mfpst.com 4 | * 5 | * Copyright MFP Multimedia France Productions 6 | * Released under GPL 3 licence 7 | * backgroundImage: "key" 8 | * Date : 2019-07-18T02:10Z 9 | */ 10 | const md5 = require('md5'); 11 | 12 | class VimeoBuffer{ 13 | 14 | constructor(player){ 15 | this.length = 1; 16 | this.params = {}; 17 | player.on('progress', (params) => { 18 | this.params = params; 19 | }); 20 | } 21 | 22 | start(index){ 23 | return 0; 24 | } 25 | 26 | end(index){ 27 | return this.params.duration * this.params.percent; 28 | } 29 | 30 | } 31 | 32 | class VimeoPlayer{ 33 | 34 | constructor(video, element){ 35 | this.video = video; 36 | this.container = element; 37 | this.domId = 'vimeo-player-'+md5(JSON.stringify(video) + Date.now() + Math.random()); 38 | this.currentWidth = 0; 39 | this.seeking = false; 40 | this.buffered = null; 41 | } 42 | 43 | init(){ 44 | return new Promise((resolve, reject)=>{ 45 | $.getScript("https://player.vimeo.com/api/player.js") 46 | .done((script,textStatus) => { 47 | if(this.video.fullscreen){ 48 | this.webkitEnterFullscreen(); 49 | } 50 | const playerCode = `
`; 51 | const videoContainer = $(this.container).find('.video-container')[0]; 52 | $(videoContainer).html(playerCode); 53 | let vimeoID = this.video.src; 54 | if(vimeoID == undefined){ 55 | vimeoID = this.video.id; 56 | } 57 | const width = $(videoContainer).width(); 58 | const videoPlayer = new Vimeo.Player(this.domId, { 59 | id: vimeoID, 60 | width: width, 61 | maxwidth: '100%', 62 | maxheight: '100%', 63 | responsive: true, 64 | playsinline: true, 65 | byline: false, 66 | speed: true, 67 | controls: false, 68 | }); 69 | // preload vimeo with play pause 70 | var self = this; 71 | videoPlayer.setMuted(true).then(function(){ 72 | videoPlayer.play().then(function() { 73 | // the video was played so trigger buffering start 74 | videoPlayer.pause().then(function(){ 75 | videoPlayer.setMuted(false); 76 | if(self.video.startAt!==undefined){ 77 | //var time = Math.round(this.video.startAt); 78 | var time = self.video.startAt; 79 | videoPlayer.setCurrentTime(time); 80 | } 81 | let checkWidth = ()=>{ 82 | let vimeoIframe = $(videoContainer).find('iframe')[0]; 83 | if(vimeoIframe===undefined){ 84 | return setTimeout(checkWidth, 300); 85 | } 86 | $(vimeoIframe).attr('tabindex','-1'); 87 | $(vimeoIframe).attr('title','Video source Vimeo'); 88 | $(vimeoIframe).removeAttr('frameborder'); 89 | $(vimeoIframe).css('width','100%'); 90 | $(vimeoIframe).css('border','0'); 91 | self.currentWidth = $(vimeoIframe).width(); 92 | 93 | self.intervalId = setInterval(()=>{ 94 | let currentOrientation; 95 | if(window.innerHeight > window.innerWidth){ 96 | currentOrientation = 'portrait'; 97 | } 98 | if(window.innerWidth > window.innerHeight){ 99 | currentOrientation = 'landscape'; 100 | } 101 | let vimeoIframe = $(videoContainer).find('iframe')[0]; 102 | $(vimeoIframe).css('width','100%'); 103 | var width = $(vimeoIframe).width(); 104 | 105 | if((width!==self.currentWidth)||(self.orientation!==currentOrientation)){ 106 | self.orientation = currentOrientation; 107 | self.currentWidth = width; 108 | let height = width * 0.56; 109 | let windowHeight = $(window).height(); 110 | if((self.fullScreen)||(height>windowHeight)){ 111 | let barHeight = $($(self.container).find('.control-bar')[0]).height(); 112 | height = windowHeight - barHeight; 113 | } 114 | $(vimeoIframe).css('height', height+'px'); 115 | } 116 | self.currentWidth = width; 117 | }, 300); 118 | }; 119 | 120 | setTimeout(checkWidth, 100); 121 | 122 | self.buffered = new VimeoBuffer(videoPlayer); 123 | self.videoPlayer = videoPlayer; 124 | resolve(); 125 | }); 126 | }); 127 | 128 | }); 129 | 130 | 131 | 132 | 133 | }); 134 | }); 135 | } 136 | 137 | destroy(){ 138 | clearInterval(this.intervalId); 139 | } 140 | 141 | webkitExitFullscreen(){ 142 | this.fullScreen = false; 143 | $(this.container).removeClass('vimeo-fullscreen'); 144 | } 145 | 146 | webkitEnterFullscreen(){ 147 | $(this.container).addClass('vimeo-fullscreen'); 148 | this.fullScreen = true; 149 | } 150 | 151 | canChangeSpeedRate(){ 152 | return new Promise((resolve, reject)=>{ 153 | resolve(true); 154 | /* 155 | this.videoPlayer.getPlaybackRate().then((playbackRate)=>{ 156 | this.videoPlayer.setPlaybackRate(playbackRate).then((ret)=>{ 157 | resolve(true); 158 | }).catch((error) => { 159 | resolve(true); 160 | }); 161 | }).catch((error) => { 162 | resolve(true); 163 | }); 164 | */ 165 | }); 166 | } 167 | 168 | getPosibleSpeedRates(){ 169 | return new Promise((resolve, reject)=>{ 170 | this.videoPlayer.getPlaybackRate().then((playbackRate)=>{ 171 | this.videoPlayer.setPlaybackRate(playbackRate).then((ret)=>{ 172 | resolve([0.5,1,1.5,2]); 173 | }).catch((error) => { 174 | resolve([1]); 175 | }); 176 | }).catch((error) => { 177 | resolve([1]); 178 | }); 179 | }); 180 | } 181 | 182 | on(event, callback){ 183 | /** 184 | video.on('loadedmetadata', ()=>{ 185 | video.on('play', (e)=>{ 186 | video.on('pause', (e) => { 187 | video.on('timeupdate', (e)=>{ 188 | video.on('durationchange', (e)=>{ 189 | video.on('progress', (e)=>{ 190 | **/ 191 | if(event==='canplay'){ 192 | return callback(); 193 | } 194 | return this.videoPlayer.on(event, callback); 195 | } 196 | 197 | off(event, callback=null){ 198 | if(event==='canplay'){ 199 | return; 200 | } 201 | return $(this.videoPlayer).off(event, callback); 202 | } 203 | 204 | play(){ 205 | return this.videoPlayer.play(); 206 | } 207 | 208 | pause(){ 209 | return this.videoPlayer.pause(); 210 | } 211 | 212 | getDuration(){ 213 | return this.videoPlayer.getDuration(); 214 | } 215 | 216 | getCurrentTime(){ 217 | return new Promise((resolve, reject)=>{ 218 | resolve(this.videoPlayer.getCurrentTime()); 219 | }); 220 | 221 | } 222 | 223 | setCurrentTime(time){ 224 | //this.seeking=true; 225 | //var event = new CustomEvent('bufferingstart'); 226 | //this.container[0].dispatchEvent(event); 227 | return new Promise((resolve, reject)=>{ 228 | this.videoPlayer.setCurrentTime(time).then((time)=>{ 229 | //this.seeking=false; 230 | //var event = new CustomEvent('bufferingend'); 231 | //this.container[0].dispatchEvent(event); 232 | resolve(time); 233 | }).catch(function(error){ 234 | console.log(error); 235 | resolve(error); 236 | }); 237 | }); 238 | 239 | } 240 | 241 | getBuffered(){ 242 | return new Promise((resolve, reject) => { 243 | resolve(this.buffered); 244 | }); 245 | } 246 | 247 | getTextTracks(){ 248 | return this.videoPlayer.textTracks; 249 | } 250 | 251 | getCurrentSrc(){ 252 | return new Promise((resolve, reject)=>{ 253 | resolve(this.video.id); 254 | }); 255 | } 256 | 257 | setSrc(src){ 258 | this.videoPlayer.src = src; 259 | } 260 | 261 | getPaused(){ 262 | return this.videoPlayer.getPaused(); 263 | } 264 | 265 | setControls(status){ 266 | this.videoPlayer.controls = status; 267 | } 268 | 269 | setTabIndex(index){ 270 | this.videoPlayer.tabindex = index; 271 | } 272 | 273 | setPlaybackRate(rate){ 274 | return this.videoPlayer.setPlaybackRate(rate); 275 | } 276 | getPlaybackRate(){ 277 | return this.videoPlayer.getPlaybackRate(); 278 | } 279 | 280 | getVolume(){ 281 | return this.videoPlayer.getVolume(); 282 | } 283 | 284 | setVolume(volume){ 285 | return this.videoPlayer.setVolume(volume); 286 | } 287 | 288 | setMuted(bol){ 289 | this.videoPlayer.setMuted(bol); 290 | } 291 | 292 | } 293 | 294 | MFP.prototype.loadVideoVimeo = function(videoOps){ 295 | return new Promise((resolve, reject)=>{ 296 | videoOps.fullscreen = this.notSupportedStandarFullScreen; 297 | const video = new VimeoPlayer(videoOps, this.container); 298 | video.init().then(()=>{ 299 | resolve(video); 300 | }); 301 | }); 302 | }; 303 | -------------------------------------------------------------------------------- /src-demo/sass/demo-green.scss: -------------------------------------------------------------------------------- 1 | 2 | /* Change theme using variable */ 3 | 4 | /* General*/ 5 | $font-family-text: Lato; 6 | $font-family-heading: Lato-bold; 7 | 8 | /* Header */ 9 | $logo-background-color: #000; /* white */ 10 | $title-background-color: #16380A; /*dark green */ 11 | 12 | /*--header-gradient-color: linear-gradient to right*/ 13 | $header-gradient-color1: #1d4b0d; 14 | $header-gradient-color2: #1d4b0d; 15 | $header-gradient-color3: #3E8526; 16 | $header-gradient-color4: #3E8526; 17 | $header-gradient-color5: #3E8526; 18 | 19 | $nav-background-color: #3E8526; /* green */ 20 | $nav-borders-color: #16380A; /*dark green*/ 21 | $header-text-color: #fff; /* white */ 22 | $nav-hover-color: #000; /* Black */ 23 | /*-- header-triangle--*/ 24 | $header-triangle-height:1.9rem; 25 | $padding-h1:1.08rem; 26 | $triangle-spacing:-0.35rem; 27 | 28 | /* Main */ 29 | /* mde -> mode d'emploi */ 30 | $h2-h3-color: #16380A; /*dark green*/ 31 | $links-color: #3E8526; /*green*/ 32 | $main-focus-color: #3E8526; 33 | 34 | /*footer */ 35 | $footer-text-color: #fff; 36 | $footer-background-color: #16380A; /*dark green*/ 37 | $footer-link-color: #fff; 38 | $footer-focus-color: #fff; 39 | 40 | 41 | 42 | @font-face { 43 | font-family: 'Lato'; 44 | src: url('../fonts/Lato-Regular.ttf') 45 | format('truetype'); 46 | font-weight: 400; 47 | font-style: normal; 48 | } 49 | 50 | @font-face { 51 | font-family: 'Lato-bold'; 52 | src: 53 | url('../fonts/Lato-Bold.ttf') 54 | format('truetype'); 55 | font-weight: 700; 56 | font-style: bold; 57 | } 58 | 59 | html,body{ 60 | margin: 0; 61 | font-family: $font-family-text; 62 | } 63 | 64 | /*------------nav avec liens d'évitements apparaît à la tabulation------------*/ 65 | ul.nav{ 66 | list-style: none; 67 | margin: 0; 68 | } 69 | 70 | a.evitement { 71 | display: inline-block; 72 | color: #000; 73 | padding: .5em; 74 | position: absolute; 75 | right: 99999px; 76 | z-index: 100; 77 | } 78 | 79 | a.evitement:focus { 80 | right: 0; 81 | } 82 | 83 | /* ---------------------------------------------HEADER-----------------------------------------------*/ 84 | header{ 85 | background-image: linear-gradient(to right, $header-gradient-color1,$header-gradient-color2,$header-gradient-color3,$header-gradient-color4,$header-gradient-color5); 86 | color: $header-text-color; 87 | a, img{ 88 | display: inline-block; 89 | z-index:2; 90 | &:focus{ 91 | outline: 1px solid #fff; 92 | } 93 | } 94 | } 95 | 96 | /* --------------------------------------------------- 97 | * Media queries smalls screens, less than 641 px*/ 98 | 99 | @media screen and (max-width: 20rem){ 100 | 101 | header a img{ 102 | display: inline-block; 103 | padding: 0 15%; 104 | width: 70%; 105 | max-height: 100%; 106 | background-color: $logo-background-color; 107 | } 108 | 109 | div.triangle1 div.triangle2{ 110 | display: none; 111 | } 112 | 113 | h1{ 114 | font-style:italic; 115 | font-size: 1.5rem; 116 | font-weight: 400; 117 | height: 70%; 118 | width: 100%; 119 | line-height: 40px; 120 | text-align: center; 121 | margin: 0; 122 | padding:0; 123 | font-family: $font-family-heading; 124 | display:block; 125 | background-color: $title-background-color; 126 | } 127 | 128 | nav#navbar{ 129 | background-color: $nav-background-color; 130 | margin-top: 27%; 131 | box-shadow: 0 0 2px 2px rgba(0,0,0,.7); 132 | } 133 | 134 | nav#navbar ul{ 135 | padding-left: 0; 136 | margin: 0; 137 | 138 | } 139 | 140 | nav#navbar ul li{ 141 | list-style: none; 142 | display: inline-block; 143 | border-right: 2px solid $nav-borders-color; 144 | padding: 10px 0; 145 | width: 100%; 146 | text-align: center; 147 | } 148 | 149 | nav#navbar ul li a{ 150 | text-decoration: none; 151 | font-size: 1.4rem; 152 | font-weight: 400; 153 | color: $header-text-color; 154 | transition-duration: 0s; 155 | } 156 | 157 | nav#navbar ul li a:focus{ 158 | outline: 1px solid $header-text-color; 159 | } 160 | 161 | nav#navbar ul li a:hover{ 162 | color: $nav-hover-color; 163 | text-decoration: underline; 164 | } 165 | 166 | nav#navbar ul li a:active{ 167 | text-decoration: underline; 168 | background-color: #000; 169 | color: $nav-hover-color; 170 | } 171 | 172 | } 173 | 174 | /*---------------------------------------------------- 175 | * Media queries "larger" screens more than 641 px*/ 176 | 177 | @media screen and (min-width: 21rem) { 178 | 179 | header a img{ 180 | background-color: $logo-background-color; 181 | } 182 | 183 | div.triangle1{ 184 | display: inline-block; 185 | border-style: solid; 186 | border-width: $header-triangle-height 0 $header-triangle-height 20px; 187 | border-color: $title-background-color $title-background-color $title-background-color $logo-background-color; 188 | _border-color: #000000 #000000 #000000 $logo-background-color; 189 | _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); 190 | margin:0 $triangle-spacing; 191 | } 192 | 193 | h1{ 194 | font-style:italic; 195 | font-size: 1.5rem; 196 | font-weight: 400; 197 | margin: 0; 198 | padding:$padding-h1; 199 | font-family: $font-family-heading; 200 | display: inline-block; 201 | background-color: $title-background-color; 202 | vertical-align:top; 203 | } 204 | 205 | div.triangle2{ 206 | display: inline-block; 207 | border-style: solid; 208 | border-width: $header-triangle-height 0 $header-triangle-height 20px; 209 | border-color: transparent transparent transparent $title-background-color; 210 | _border-color: #000000 #000000 #000000 $title-background-color; 211 | _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); 212 | margin-left:$triangle-spacing; 213 | } 214 | 215 | nav#navbar{ 216 | background-color: $nav-background-color; 217 | margin-top: 0; 218 | box-shadow: 0 0 2px 2px rgba(0,0,0,.7); 219 | } 220 | 221 | nav#navbar ul{ 222 | padding-left: 0; 223 | margin: 0; 224 | 225 | } 226 | 227 | nav#navbar ul li{ 228 | list-style: none; 229 | display: inline-block; 230 | border-right: 2px solid $nav-borders-color; 231 | padding:0.5rem 1rem; 232 | } 233 | 234 | nav#navbar ul li a{ 235 | text-decoration: none; 236 | font-size: 1.4rem; 237 | font-weight: 400; 238 | color: $header-text-color; 239 | transition-duration: 0s; 240 | } 241 | 242 | nav#navbar ul li a:focus{ 243 | outline: 1px solid $header-text-color; 244 | } 245 | 246 | nav#navbar ul li a:hover{ 247 | color: $nav-hover-color; 248 | text-decoration: underline; 249 | } 250 | 251 | nav#navbar ul li a :active{ 252 | text-decoration: underline; 253 | background-color: #000; 254 | color: $nav-hover-color; 255 | } 256 | } 257 | 258 | /* ---------------------------------------------MAIN-----------------------------------------------*/ 259 | main{ 260 | width: 99%; 261 | margin: 20px auto; 262 | font-size:1.2rem; 263 | } 264 | 265 | h2, h3:not(ui-widget-content>h3){ 266 | color: $h2-h3-color; 267 | margin: auto; 268 | } 269 | 270 | h2{ 271 | font-size: 2rem; 272 | margin-left: 2%; 273 | } 274 | 275 | h3{ 276 | font-size: 1.4rem; 277 | } 278 | 279 | p:not(footer>p), li{ 280 | font-family: $font-family-text; 281 | line-height: 1.5rem; 282 | font-size: 1.4rem; 283 | } 284 | 285 | main a{ 286 | color: $links-color; 287 | font-family: $font-family-text; 288 | font-weight: bold; 289 | } 290 | 291 | main a:hover{ 292 | text-decoration: none; 293 | } 294 | 295 | main a:focus{ 296 | outline: 1px solid var(main-focus-color); 297 | } 298 | 299 | /* ---------------------- PLAYER ---------------------------- */ 300 | .cont{/* article#video and article#mde */ 301 | position: relative; 302 | } 303 | 304 | .cont::after{ 305 | content:''; 306 | display: block; 307 | clear: both; 308 | } 309 | 310 | @media screen and (max-width: 640px) { 311 | .container{ 312 | width: 100%; 313 | } 314 | .video{ 315 | display:block; 316 | width: auto; 317 | } 318 | } 319 | 320 | @media screen and (min-width: 641px) { 321 | article#video{ 322 | vertical-align: top; 323 | display:inline-block; 324 | /* When JS */ 325 | /*width: auto;*/ 326 | width : 70%; 327 | } 328 | 329 | .cont{/*video */ 330 | position: relative; 331 | } 332 | 333 | .cont::after{ 334 | content:''; 335 | display: block; 336 | clear: both; 337 | } 338 | } 339 | /* ---------------------- USER GUIDE (#mdp) --------------------------- */ 340 | 341 | /* ------------------------------------------ 342 | * Media queries SMALL 640 px*/ 343 | @media screen and (max-width: 640px) { 344 | #mde { 345 | padding: 15px; 346 | width: 95%; 347 | display: inline-block; 348 | } 349 | 350 | } 351 | 352 | /*------------------------------------------ 353 | * Media queries BIGGER 641 px*/ 354 | @media screen and (min-width: 641px) { 355 | #mde { 356 | padding: 10px; 357 | width: 28%; 358 | display: inline-block; 359 | } 360 | 361 | } 362 | 363 | 364 | 365 | /* ---------------------- TRANSCRIPTS ---------------------------- */ 366 | #text-target, #text-target1{ 367 | width: 60%; 368 | padding-top: 20px; 369 | } 370 | 371 | /* ------------------- USELESS FOR THE MOMENT ---------------------- */ 372 | /* ------------------- OR UNDEFINED IN HTML---------------------- */ 373 | 374 | code{ 375 | border: 1px solid #333; 376 | padding: 10px; 377 | margin: 5px; 378 | display: block; 379 | background-color: #CCC; 380 | max-width: 1000px; 381 | overflow: auto; 382 | } 383 | 384 | #desc table{ 385 | max-width: 1000px; 386 | } 387 | 388 | #desc table tr td, #desc table tr th{ 389 | padding: 4px; 390 | border: 1px solid #000; 391 | } 392 | 393 | #desc table tr th{ 394 | background-color: #EEE; 395 | } 396 | 397 | 398 | /* ------------------------------------------------------ FOOTER ------------------------------------------------------- */ 399 | 400 | footer{ 401 | background-color: $footer-background-color; 402 | padding: 1% 20%; 403 | margin: 2% 0 0 0; 404 | color: $footer-text-color; 405 | text-align: center; 406 | } 407 | 408 | footer a { 409 | color: $footer-link-color; 410 | } 411 | 412 | footer a:focus{ 413 | outline: 1px solid $footer-focus-color; 414 | } 415 | footer a:hover{ 416 | text-decoration: none; 417 | } 418 | 419 | 420 | 421 | 422 | --------------------------------------------------------------------------------