openplayerjs
Advanced tools
Comparing version 2.14.3 to 2.14.4
@@ -37,2 +37,4 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) { | ||
this._setDefaultTrack = this._setDefaultTrack.bind(this); | ||
this._showCaptions = this._showCaptions.bind(this); | ||
this._hideCaptions = this._hideCaptions.bind(this); | ||
} | ||
@@ -115,6 +117,8 @@ create() { | ||
button.setAttribute('data-active-captions', 'off'); | ||
this._hideCaptions(); | ||
} | ||
else { | ||
button.classList.add('op-controls__captions--on'); | ||
button.setAttribute('data-active-captions', ((_a = __classPrivateFieldGet(this, _Captions_currentTrack, "f")) === null || _a === void 0 ? void 0 : _a.language) || ''); | ||
button.setAttribute('data-active-captions', ((_a = __classPrivateFieldGet(this, _Captions_currentTrack, "f")) === null || _a === void 0 ? void 0 : _a.language) || 'off'); | ||
this._showCaptions(); | ||
} | ||
@@ -155,2 +159,6 @@ for (const track of __classPrivateFieldGet(this, _Captions_mediaTrackList, "f")) { | ||
const language = option.getAttribute('data-value').replace('captions-', ''); | ||
this._hideCaptions(); | ||
if (language === 'off') { | ||
__classPrivateFieldSet(this, _Captions_currentTrack, undefined, "f"); | ||
} | ||
for (const track of __classPrivateFieldGet(this, _Captions_mediaTrackList, "f")) { | ||
@@ -160,2 +168,3 @@ track.mode = track.language === language ? 'showing' : 'hidden'; | ||
__classPrivateFieldSet(this, _Captions_currentTrack, track, "f"); | ||
this._showCaptions(); | ||
} | ||
@@ -188,30 +197,10 @@ } | ||
var _a; | ||
while (__classPrivateFieldGet(this, _Captions_captions, "f").lastChild) { | ||
__classPrivateFieldGet(this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(this, _Captions_captions, "f").lastChild); | ||
} | ||
this._hideCaptions(); | ||
const t = e.target; | ||
if (t.mode !== 'showing') { | ||
if (t.mode !== 'showing' || __classPrivateFieldGet(this, _Captions_button, "f").getAttribute('data-active-captions') === 'off') { | ||
return; | ||
} | ||
if (t.activeCues && ((_a = t.activeCues) === null || _a === void 0 ? void 0 : _a.length) > 0) { | ||
for (const cue of Array.from(t.activeCues)) { | ||
const content = (cue === null || cue === void 0 ? void 0 : cue.text) || ''; | ||
if (content) { | ||
__classPrivateFieldGet(this, _Captions_captions, "f").classList.add('op-captions--on'); | ||
const caption = document.createElement('span'); | ||
caption.innerHTML = content; | ||
__classPrivateFieldGet(this, _Captions_captions, "f").prepend(caption); | ||
} | ||
else { | ||
while (__classPrivateFieldGet(this, _Captions_captions, "f").lastChild) { | ||
__classPrivateFieldGet(this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(this, _Captions_captions, "f").lastChild); | ||
} | ||
} | ||
} | ||
this._showCaptions(); | ||
} | ||
else { | ||
while (__classPrivateFieldGet(this, _Captions_captions, "f").lastChild) { | ||
__classPrivateFieldGet(this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(this, _Captions_captions, "f").lastChild); | ||
} | ||
} | ||
}; | ||
@@ -293,2 +282,3 @@ if (detachMenus) { | ||
__classPrivateFieldGet(this, _Captions_button, "f").classList.add('op-controls__captions--on'); | ||
__classPrivateFieldGet(this, _Captions_captions, "f").classList.add('op-captions--on'); | ||
__classPrivateFieldSet(this, _Captions_currentTrack, track, "f"); | ||
@@ -302,4 +292,25 @@ const options = document.querySelectorAll('.op-settings__submenu-item') || []; | ||
} | ||
_showCaptions() { | ||
var _a; | ||
for (const cue of Array.from(((_a = __classPrivateFieldGet(this, _Captions_currentTrack, "f")) === null || _a === void 0 ? void 0 : _a.activeCues) || [])) { | ||
const content = (cue === null || cue === void 0 ? void 0 : cue.text) || ''; | ||
if (content && __classPrivateFieldGet(this, _Captions_captions, "f")) { | ||
const caption = document.createElement('span'); | ||
caption.innerHTML = content; | ||
__classPrivateFieldGet(this, _Captions_captions, "f").prepend(caption); | ||
__classPrivateFieldGet(this, _Captions_captions, "f").classList.add('op-captions--on'); | ||
} | ||
else { | ||
this._hideCaptions(); | ||
} | ||
} | ||
} | ||
_hideCaptions() { | ||
var _a; | ||
while ((_a = __classPrivateFieldGet(this, _Captions_captions, "f")) === null || _a === void 0 ? void 0 : _a.lastChild) { | ||
__classPrivateFieldGet(this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(this, _Captions_captions, "f").lastChild); | ||
} | ||
} | ||
} | ||
_Captions_player = new WeakMap(), _Captions_button = new WeakMap(), _Captions_captions = new WeakMap(), _Captions_menu = new WeakMap(), _Captions_events = new WeakMap(), _Captions_mediaTrackList = new WeakMap(), _Captions_hasTracks = new WeakMap(), _Captions_currentTrack = new WeakMap(), _Captions_default = new WeakMap(), _Captions_controlPosition = new WeakMap(), _Captions_controlLayer = new WeakMap(); | ||
export default Captions; |
@@ -105,3 +105,9 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) { | ||
set level(level) { | ||
__classPrivateFieldGet(this, _HlsMedia_player, "f").currentLevel = level; | ||
const formattedLevel = Number(level); | ||
if (formattedLevel && formattedLevel > -1) { | ||
__classPrivateFieldGet(this, _HlsMedia_player, "f").loadLevel = formattedLevel; | ||
} | ||
else { | ||
__classPrivateFieldGet(this, _HlsMedia_player, "f").currentLevel = formattedLevel; | ||
} | ||
} | ||
@@ -108,0 +114,0 @@ get level() { |
@@ -59,3 +59,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
detachMenus: false, | ||
forceNative: true, | ||
forceNative: false, | ||
height: 0, | ||
@@ -62,0 +62,0 @@ hidePlayBtnTimer: 350, |
@@ -120,5 +120,5 @@ # Usage | ||
| `Element` | Description | | ||
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| `detachMenus` | Allow items that have menu items inside `Settings` to be contained in their own separate menu; generally speaking, the menu will float above the control item it belongs to (by default, false). | | ||
| `forceNative` | Player will favor native capabilities rather than third-party plugins (HLS can play natively in Android and iOS, but setting this to `false`, will enable hls.js) | | ||
| `forceNative` | Player will favor native capabilities rather than third-party plugins (HLS.js will be used by default since now Android and iOS support it, but setting this to `true`, will enable native HLS in iOS.js) | | ||
| `mode` | Player stretching mode: `responsive` (default), `fit` (to obtain black bars) or `fill` (crop image) | | ||
@@ -178,3 +178,3 @@ | `hidePlayBtnTimer` | Number of ms that takes the player to hide the Play button once it starts playing (video only). By default, `350`. | | ||
OpenPlayerJS supports *Web Video Text Tracks Format* (WebVTT) and *SubRip Subtitle* (SRT) files for captions and subtitles; however, WebVTT files are encouraged since they are fully compatible with iOS devices, specially when using full screen mode in smartphones. The reason behind this is because iOS will default to the native phone media player, and its player doesn't have support for other formats in terms of captions/subtitles. | ||
OpenPlayerJS supports _Web Video Text Tracks Format_ (WebVTT) and _SubRip Subtitle_ (SRT) files for captions and subtitles; however, WebVTT files are encouraged since they are fully compatible with iOS devices, specially when using full screen mode in smartphones. The reason behind this is because iOS will default to the native phone media player, and its player doesn't have support for other formats in terms of captions/subtitles. | ||
@@ -195,3 +195,3 @@ Also, if you are planning to have full support for captions/subtitles across devices, it is important to note that, for Safari, **at least one track tag needs to be present**. So, if you are looking to add captions/subtitles dynamically, make sure that you have a default track element with an empty.vtt file as source. That way, the empty file won't be displayed at all and the dynamically added ones will be considered. For example: | ||
label: 'English', | ||
default: true | ||
default: true, | ||
}); | ||
@@ -202,3 +202,3 @@ player.addCaptions({ | ||
kind: 'subtitles', | ||
label: '日本語' | ||
label: '日本語', | ||
}); | ||
@@ -260,3 +260,3 @@ player.init(); | ||
import OpenPlayerJS from 'openplayerjs'; | ||
import 'openplayerjs/dist/openplayer.css' | ||
import 'openplayerjs/dist/openplayer.css'; | ||
@@ -271,4 +271,4 @@ export default function Sample() { | ||
<div> | ||
<video id='player' className='op-player__media' controls playsInline> | ||
<source src='https://my.test.com/video.mp4' type='video/mp4' /> | ||
<video id="player" className="op-player__media" controls playsInline> | ||
<source src="https://my.test.com/video.mp4" type="video/mp4" /> | ||
</video> | ||
@@ -275,0 +275,0 @@ </div> |
{ | ||
"name": "openplayerjs", | ||
"version": "2.14.3", | ||
"version": "2.14.4", | ||
"homepage": "https://www.openplayerjs.com/", | ||
@@ -52,4 +52,3 @@ "author": { | ||
"test:sources": "karma start --single-run --browsers ChromeHeadless --log-level info karma.conf.js", | ||
"test:dev": "karma start --watch --browsers Chrome karma.conf.js", | ||
"coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js" | ||
"test:dev": "karma start --watch --browsers Chrome karma.conf.js" | ||
}, | ||
@@ -77,3 +76,2 @@ "readme": "https://github.com/openplayerjs/openplayerjs/blob/master/README.md", | ||
"copy-webpack-plugin": "^11.0.0", | ||
"coveralls": "^3.1.1", | ||
"cssnano": "^5.1.11", | ||
@@ -80,0 +78,0 @@ "eslint": "^8.17.0", |
@@ -108,3 +108,3 @@ # [OpenPlayer.js](https://www.openplayerjs.com) | ||
- [Ads playlist (multiple URLs)](https://codepen.io/rafa8626/pen/wvvxbMN) | ||
- [🆕 - Add a custom element (watermark)](https://codepen.io/rafa8626/pen/JjLQNjo) | ||
- [Add a custom element (watermark)](https://codepen.io/rafa8626/pen/JjLQNjo) | ||
@@ -111,0 +111,0 @@ ### Advanced |
@@ -12,3 +12,5 @@ import { PlayerComponent, SettingsItem } from '../interfaces'; | ||
private _setDefaultTrack; | ||
private _showCaptions; | ||
private _hideCaptions; | ||
} | ||
export default Captions; |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1694171
57
15035