fix(xgplayer/[control/textTrack.js, proxy.js]): suitability support f…

…or textTrack in firefox
bytedance · Aug 3, 2018 · 3afda8d · 3afda8d
1 parent fe22152
commit 3afda8d
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/packages/xgplayer/browser/index.js b/packages/xgplayer/browser/index.js
diff --git a/packages/xgplayer/dist/index.js b/packages/xgplayer/dist/index.js
diff --git a/packages/xgplayer/src/control/textTrack.js b/packages/xgplayer/src/control/textTrack.js
@@ -1,10 +1,13 @@
 import Player from '../player';
 
 let textTrack = function () {
+ if(navigator.userAgent.indexOf('Chrome') === -1) {
+ return
+ }
  let player = this, util = Player.util, sniffer = Player.sniffer;
  let ul = util.createDom('xg-textTrack', '', {tabindex: 7}, 'xgplayer-textTrack'), root = player.controls;
  let list = player.config.textTrack
- if (list && list instanceof Array && list.length > 1) {
+ if (list && Array.isArray(list) && list.length > 1) {
  util.addClass(player.root, 'xgplayer-is-textTrack');
  player.on('canplay', function () {
  let tmp = ['<ul>'];
@@ -14,7 +17,6 @@ let textTrack = function () {
  });
  let controlText = player.config.lang && player.config.lang === "zh-cn" ? "字幕" : "Caption"
  tmp.push(`</ul><p class="name"><em>${controlText}</em></p>`);
-
  let urlInRoot = root.querySelector('.xgplayer-textTrack');
  if (urlInRoot) {
  urlInRoot.innerHTML = tmp.join('');
@@ -40,7 +42,7 @@ let textTrack = function () {
  trackDoms[0].track.mode = 'hidden'
  } else {
  trackDoms[0].track.mode = 'showing'
- 
+
  list.some(item => {
  if(item.label === li.innerHTML) {
  trackDoms[0].src = item.src;

diff --git a/packages/xgplayer/src/proxy.js b/packages/xgplayer/src/proxy.js
@@ -22,7 +22,7 @@ class Proxy {
  videoConfig.loop = 'loop'
  }
  let textTrackDom = ''
- if (options.textTrack && options.textTrack instanceof Array) {
+ if (options.textTrack && Array.isArray(options.textTrack) && (navigator.userAgent.indexOf('Chrome') > -1 || navigator.userAgent.indexOf('Firefox') > -1)) {
  options.textTrack.some(track => {
  if (track.src && track.label && track.default) {
  textTrackDom += `<track src="${track.src}" `
@@ -47,8 +47,11 @@ class Proxy {
  styleStr += `${index}: ${options.textTrackStyle[index]};`
  }
  let wrap = options.id ? `#${options.id}` : (options.el.id ? `#${options.el.id}` : `.${options.el.className}`)
- style.sheet.addRule(`${wrap} video::cue`, styleStr)
- style.sheet.insertRule(`${wrap} video::cue { ${styleStr} }`, 0)
+ if (style.sheet.insertRule) {
+ style.sheet.insertRule(`${wrap} video::cue { ${styleStr} }`, 0)
+ } else if (style.sheet.addRule) {
+ style.sheet.addRule(`${wrap} video::cue`, styleStr)
+ }
  }
  this.video = util.createDom(videoConfig.mediaType, textTrackDom, videoConfig, '')
  this.ev = ['play', 'playing', 'pause', 'ended', 'error', 'seeking', 'seeked',