@volcengine/veplayer 1.15.1 → 1.15.2-rc.1

package/src/plugins/inner/common/poster/index.less

@@ -0,0 +1,66 @@
+.xgplayer {
+  .xgplayer-poster {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-position: center center;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+    pointer-events: none;
+
+    &.hide {
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    &.active {
+      background-color: transparent;
+    }
+  }
+}
+
+.xgplayer.xgplayer-playing {
+  .xgplayer-poster {
+    // display: none;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .xg-not-hidden {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.xgplayer {
+  &.xgplayer-is-enter,
+  &.xgplayer-playing {
+    .xgplayer-poster.xg-showplay {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
+
+.xgplayer {
+  &.xgplayer-nostart,
+  &.xgplayer-ended,
+  &.not-allow-autoplay {
+    .xgplayer-poster {
+      // display: block;
+      opacity: 1;
+      visibility: visible;
+
+      &.hide {
+        opacity: 0;
+        visibility: hidden;
+      }
+    }
+  }
+}

package/src/plugins/inner/common/poster/index.ts

@@ -0,0 +1,178 @@
+/**
+ * @author bytedance
+ * @Description 重写xgplayer的poster，为后续接入imageX、定制poster功能做准备
+ * @date 2024/5/8 17:18
+ */
+import { Plugin, Events, Util } from 'xgplayer';
+import './index.less';
+
+/** {zh}
+ * @list Options
+ * @brief 封面配置
+ * @kind property
+ */
+export interface IPoster {
+  /** {zh}
+   * @brief 封面图 URL 地址。
+   * @default -
+   */
+  poster: string;
+  /** {zh}
+   * @brief 是否在播放结束之后显示封面图。
+   * @default true
+   */
+  isEndedShow?: boolean;
+  /** {zh}
+   * @brief 是否播放后才隐藏封面图。
+   *        - `true`：播放后隐藏，即timeupdate事件触发后才隐藏。
+   *        - `false`：在 `play` 事件触发后隐藏封面图，在iOS端play事件到实际播放会有一段时间间隔，在这段时间里播放器显示黑屏。
+   * @default false
+   */
+  hideCanplay?: boolean;
+  /** {zh}
+   * @brief 是否一直显示封面图，常用于播放音频的场景
+   * @default false
+   */
+  notHidden?: boolean;
+  /** {zh}
+   * @brief 封面图填充方式。取值如下：
+   *        - `fixWidth`：宽度方向填充，不会被拉伸压缩。
+   *        - `fixHeight`：高度方向填充，不会被拉伸压缩。
+   *        - `cover`：完全覆盖容器，多余部分会被裁剪。
+   *        - `contain`：尽可能的缩放图像填充容器并保持图像的宽高比例，图像不会被裁剪压缩。。
+   */
+  fillMode?: 'fixWidth' | 'fixHeight' | 'cover' | 'contain';
+}
+
+class Poster extends Plugin {
+  static get pluginName() {
+    return 'poster';
+  }
+
+  static get defaultConfig(): IPoster {
+    return {
+      isEndedShow: true, // 是否在播放结束之后显示
+      hideCanplay: false, // 设置为true时，播放后才隐藏，在视频地址更新后会重新显示poster。默认为false，即在play事件触发后隐藏poster
+      notHidden: false, // 是否一直显示
+      poster: '', // 封面图地址
+      fillMode: 'fixWidth', // 封面图填充方式，fixWidth / fixHeight / cover / contain
+    };
+  }
+
+  set isEndedShow(value) {
+    this.config.isEndedShow = value;
+  }
+
+  get isEndedShow() {
+    return this.config.isEndedShow;
+  }
+
+  hide() {
+    Util.addClass(this.root, 'hide');
+  }
+
+  show() {
+    Util.removeClass(this.root, 'hide');
+    return '';
+  }
+
+  beforeCreate(args) {
+    if (typeof args.player.config.poster === 'string') {
+      args.config.poster = args.player.config.poster;
+    }
+  }
+
+  afterCreate() {
+    this.on(Events.ENDED, () => {
+      if (this.isEndedShow) {
+        Util.removeClass(this.root, 'hide');
+      }
+    });
+
+    if (this.config.hideCanplay) {
+      this.once(Events.TIME_UPDATE, () => {
+        this.onTimeUpdate();
+      });
+      this.on(Events.URL_CHANGE, () => {
+        Util.removeClass(this.root, 'hide');
+        Util.addClass(this.root, 'xg-showplay');
+        this.once(Events.TIME_UPDATE, () => {
+          this.onTimeUpdate();
+        });
+      });
+    } else {
+      this.on(Events.PLAY, () => {
+        Util.addClass(this.root, 'hide');
+      });
+    }
+  }
+
+  onTimeUpdate() {
+    if (!this.player.currentTime) {
+      this.once(Events.TIME_UPDATE, () => {
+        this.onTimeUpdate();
+      });
+    } else {
+      Util.removeClass(this.root, 'xg-showplay');
+    }
+  }
+
+  update(poster) {
+    if (!poster) {
+      return;
+    }
+    this.config.poster = poster;
+    this.root.style.backgroundImage = `url(${poster})`;
+  }
+
+  setConfig(config: string | IPoster) {
+    if (typeof config === 'string') {
+      this.config.poster = config;
+    } else if (typeof config === 'object') {
+      Object.keys(this.config).forEach(key => {
+        if (Object.keys(config).includes(key)) {
+          this.config[key] = config[key];
+        }
+      });
+    }
+    this.update(this.config.poster);
+  }
+
+  getBgSize(mode) {
+    let _bg = '';
+    switch (mode) {
+      case 'cover':
+        _bg = 'cover';
+        break;
+      case 'contain':
+        _bg = 'contain';
+        break;
+      case 'fixHeight':
+        _bg = 'auto 100%';
+        break;
+      case 'fixWidth':
+        _bg = '100% auto';
+        break;
+      default:
+        _bg = '';
+    }
+    return _bg ? `background-size: ${_bg};` : '';
+  }
+
+  render() {
+    const { poster, hideCanplay, fillMode, notHidden } = this.config;
+    const _bg = this.getBgSize(fillMode);
+    const style = poster ? `background-image:url(${poster});${_bg}` : _bg;
+    const className = notHidden
+      ? 'xg-not-hidden'
+      : hideCanplay
+      ? 'xg-showplay'
+      : '';
+    return `<xg-poster class="xgplayer-poster ${className} ${
+      poster ? 'active' : ''
+    }" style="${style}">
+    </xg-poster>`;
+  }
+}
+
+export default Poster;

package/src/plugins/inner/common/refreshPlugin.ts

@@ -0,0 +1,88 @@
+import { Plugin, Sniffer } from 'xgplayer';
+import RefreshIcon from '../../../assets/icons/pc/refresh.svg';
+import debounce from 'lodash-es/debounce';
+import { PluginEvents } from '@/constants/event';
+
+const { POSITIONS } = Plugin;
+
+export default class RefreshPlugin extends Plugin {
+  static get pluginName() {
+    return 'refresh';
+  }
+
+  static get defaultConfig() {
+    return {
+      position: POSITIONS.CONTROLS_LEFT,
+      index: 1,
+    };
+  }
+
+  afterCreate() {
+    this.appendChild('.xgplayer-icon', (this.icons as any).refresh);
+    this.initEvents();
+  }
+
+  registerIcons() {
+    return {
+      refresh: {
+        icon: RefreshIcon,
+        class: 'xgplayer-refresh-svg',
+      },
+    };
+  }
+
+  registerLanguageTexts() {
+    return {
+      refresh: {
+        jp: 'リフレッシュ',
+        en: 'Refresh',
+        zh: '刷新',
+        'zh-hk': '刷新',
+      },
+    };
+  }
+
+  initEvents() {
+    this.handleRefresh = debounce(this.handleRefresh.bind(this), 200);
+    const event = Sniffer.device === 'mobile' ? 'touchend' : 'click';
+    this.bind(event, this.handleRefresh);
+    this.show();
+  }
+
+  handleRefresh(e: any) {
+    const { player } = this;
+    if (!player) return;
+    e.preventDefault();
+    e.stopPropagation();
+
+    player.addClass('xgplayer-is-enter');
+    player.pause();
+    player.emit(PluginEvents.REFRESH_CLICK);
+
+    setTimeout(() => {
+      if (player) {
+        player.retry();
+      }
+      player.once('canplay', () => {
+        // player.play();
+        player.removeClass('xgplayer-is-enter');
+      });
+    });
+  }
+
+  destroy() {
+    this.unbind(['touchend', 'click'], this.handleRefresh);
+  }
+
+  render() {
+    return `
+    <xg-icon class="xgplayer-refresh">
+      <div class="xgplayer-icon">
+      </div>
+      <div class="xg-tips" lang-key="refresh">${
+        (this.langText as any).refresh
+      }</div>
+    </xg-icon>
+    `;
+  }
+}

package/src/plugins/inner/common/rtmPlugin.ts

@@ -0,0 +1,62 @@
+import RtsPlayer from '@byted/xgplayer-rts';
+import { IBasePluginOptions } from 'xgplayer/es/plugin/basePlugin';
+import { Sniffer } from 'xgplayer';
+import { isMSESupport } from '@/utils';
+import assign from 'lodash-es/assign';
+
+declare global {
+  interface Window {
+    FlvPlayer?: any;
+    HlsPlayer?: any;
+  }
+}
+
+// 判断降级到 HLS 是否用 MSE
+// 1. pc 端用 MSE
+// 2. 手机端 enableHlsMSE 为 true 且当前设备支持 MSE，用 MSE
+// 3. 手机端其他情况不用 MSE
+function enableFallbackHlsMSE(config) {
+  if (Sniffer.device !== 'mobile') {
+    return true;
+  }
+  return config?.enableHlsMSE && isMSESupport();
+}
+
+export default class RtmPlugin extends RtsPlayer {
+  static get pluginName() {
+    return 'rtm';
+  }
+
+  beforeCreate(args: IBasePluginOptions): void {
+    const { backupStreamType } = args.player.config.rtm || {};
+    const playerMap = {
+      flv: window.FlvPlayer,
+      hls: window.HlsPlayer,
+    };
+
+    let backupConstruct;
+
+    // 如果降级到 HLS, 需要判断当前是否用 MSE
+    if (
+      backupStreamType === 'hls' &&
+      enableFallbackHlsMSE(args.player.config)
+    ) {
+      backupConstruct = playerMap.hls;
+    }
+
+    if (backupStreamType === 'flv') {
+      backupConstruct = playerMap.flv;
+    }
+
+    args.player.config.rts = assign({}, args.player.config.rtm, {
+      backupConstruct,
+    });
+  }
+
+  afterCreate() {
+    const { player } = this;
+    player.on('degrade', () => {
+      player.unRegisterPlugin('rtm');
+    });
+  }
+}

package/src/plugins/inner/common/toastPlugin.ts

@@ -0,0 +1,90 @@
+import { Plugin, Util } from 'xgplayer';
+
+class ToastPlugin extends Plugin {
+  // 插件的名称，将作为插件实例的唯一key值
+  static get pluginName() {
+    return 'sdkToastPlugin';
+  }
+
+  static get defaultConfig() {
+    return {
+      index: 5,
+    };
+  }
+
+  constructor(args) {
+    super(args);
+  }
+
+  private toastNumber = 0;
+  private toastMaps: { [key: number]: HTMLElement } = {};
+
+  beforePlayerInit() {
+    // 播放器调用start初始化播放源之前的逻辑
+  }
+
+  afterPlayerInit() {
+    // 播放器调用start初始化播放源之后的逻辑
+    // this.add('111', 100000, true);
+  }
+
+  afterCreate() {
+    //
+  }
+
+  destroy() {
+    //
+  }
+
+  add(content: string | HTMLElement, duration = 2000, isNeedCloseBt = false) {
+    const id = this.toastNumber + 1;
+    this.toastNumber = id;
+
+    const toast = this.renderToast(content, isNeedCloseBt, id);
+    this.root.appendChild(toast);
+
+    this.toastMaps[id] = toast;
+    if (duration) {
+      setTimeout(() => {
+        this.remove(id);
+      }, duration);
+    }
+
+    return id;
+  }
+
+  remove(id: number) {
+    const toast = this.toastMaps[id];
+    if (toast) {
+      if (this.root.contains(toast)) {
+        this.root.removeChild(toast);
+      }
+      delete this.toastMaps[id];
+    }
+  }
+
+  renderToast(content: string | HTMLElement, isNeedCloseBt, id) {
+    const $toast = Util.createDom('div', '', undefined, 'toast-container');
+    const $txt: HTMLElement = Util.checkIsObject(content)
+      ? (content as HTMLElement)
+      : Util.createDom('div', content as string, undefined, 'toast-txt');
+    $toast.appendChild($txt);
+
+    if (isNeedCloseBt) {
+      const $close = Util.createDom('span', '×', undefined, 'toast-close-bt');
+
+      $close.addEventListener('click', () => {
+        this.remove(id);
+      });
+      $toast.appendChild($close);
+    }
+
+    return $toast;
+  }
+
+  render() {
+    return '<xg-sdk-toast class="xgplayer-sdk-toast"></xg-sdk-toast>';
+  }
+}
+
+export default ToastPlugin;

package/src/plugins/inner/common/unmutePlugin.ts

@@ -0,0 +1,133 @@
+import { PluginEvents } from '@/constants/event';
+import { isRtm, VE_DEBUG } from '@/utils';
+import { Plugin, Sniffer, Util } from 'xgplayer';
+
+export default class UnmutePlugin extends Plugin {
+  // 插件的名称，将作为插件实例的唯一key值
+  static get pluginName() {
+    return 'sdkUnmutePlugin';
+  }
+
+  static get defaultConfig() {
+    return {
+      // 挂载在controls的右侧，如果不指定则默认挂载在播放器根节点上
+      position: Plugin.POSITIONS.ROOT,
+    };
+  }
+
+  public state = {
+    isSupportAutoplay: true,
+    showUnmuteBt: false,
+  };
+
+  constructor(args: any) {
+    super(args);
+  }
+
+  afterCreate() {
+    if (this.player.autoplay && this.player.config.autoplayMuted) {
+      this.initEvents();
+    }
+  }
+
+  registerLanguageTexts() {
+    return {
+      unmute: {
+        jp: 'ミュートを解除する',
+        en: 'Click to unmute',
+        zh: '点击取消静音',
+        'zh-hk': '點擊取消靜音',
+      },
+    };
+  }
+
+  updateLang() {
+    this.renderUnmuteBt();
+  }
+
+  initEvents() {
+    this.player.once(
+      'autoplay_was_prevented',
+      this.handleAutoplayPrevented.bind(this),
+    );
+    this.player.once('autoplay_started', this.handleAutoplayStart.bind(this));
+    this.player.once('volumechange', this.handleVolumechange.bind(this));
+  }
+
+  handleAutoplayPrevented() {
+    VE_DEBUG.warn('mute autoplay fail');
+    this.state.isSupportAutoplay = false;
+    this.player.muted = false;
+  }
+
+  handleAutoplayStart() {
+    // 如果之前有不支持自动启播的时候抛出,再次点击播放失败不必展示按钮
+    if (!this.state.isSupportAutoplay) {
+      this.player.muted = false;
+      return;
+    }
+
+    this.state.showUnmuteBt = true;
+    this.renderUnmuteBt();
+  }
+
+  handleVolumechange() {
+    this.state.showUnmuteBt = false;
+    this.renderUnmuteBt();
+    if (this.player.paused && this.player.readyState >= 1) {
+      this.player.play();
+    }
+  }
+
+  renderUnmuteBt() {
+    const $unmuteContianer: any = this.root;
+    if (!$unmuteContianer) {
+      return;
+    }
+    $unmuteContianer.innerHTML = '';
+    if (this.state.showUnmuteBt) {
+      const cancelUnmuteText = (this.langText as any).unmute;
+      const btn = Util.createDom(
+        'div',
+        cancelUnmuteText,
+        undefined,
+        'xgplayer-unmute-bt',
+      );
+      $unmuteContianer.appendChild(btn);
+      this.bind('.xgplayer-unmute-bt', 'click', this.cancelUnmute.bind(this));
+    }
+  }
+
+  cancelUnmute() {
+    this.player.muted = false;
+    this.state.showUnmuteBt = false;
+    this.renderUnmuteBt();
+    // hack 处理鸿蒙播放RTM取消静音后没有声音问题，需要重新设置一遍音量
+    if (
+      Sniffer.device === 'mobile' &&
+      typeof this.player?.config?.url === 'string' &&
+      isRtm(this.player?.config?.url)
+    ) {
+      if (this.player.volume > 0.5) {
+        this.player.volume = this.player.volume - 0.1;
+      } else {
+        this.player.volume = this.player.volume + 0.1;
+      }
+    }
+    this.player.emit(PluginEvents.CANCEL_UNMUTE);
+  }
+
+  destroy() {
+    // 播放器销毁的时候一些逻辑
+    this.player.off(
+      'autoplay_was_prevented',
+      this.handleAutoplayPrevented.bind(this),
+    );
+    this.player.off('autoplay_started', this.handleAutoplayStart.bind(this));
+    this.player.off('volumechange', this.handleVolumechange.bind(this));
+  }
+
+  render() {
+    return '<div class="xgplayer-unmute"></div>';
+  }
+}

package/src/plugins/inner/common/vodLogger.ts

@@ -0,0 +1,80 @@
+// @ts-ignore
+import { Collector } from '#/es/index-base.min.js';
+import VodLogger from '@byted/xgplayer-app-logger/es/logger.js';
+import { REPORT_EVENTS } from '@byted/xgplayer-app-logger/es/constant.js';
+import {
+  getCurUserRegionConfig,
+  getDrmType,
+  VE_DEBUG,
+  isMSE,
+  getCurrentPlayerSumNum,
+} from '@/utils';
+import { Util } from 'xgplayer';
+
+const defaultTeaId = getCurUserRegionConfig()?.__LOG_TEA_ID__;
+
+VodLogger.TEA_ID = defaultTeaId;
+VodLogger.Collector = Collector;
+
+const xgVodLogger = function (args) {
+  if (args && args.player) {
+    const onReportLog = async (evtName, params) => {
+      const player = args.player;
+      VE_DEBUG.log('onReportLog', evtName, { ...params });
+      params.player_sum_num = getCurrentPlayerSumNum(player);
+      params.is_mse = isMSE(player);
+      params.drm_encrypt_type = getDrmType(player) || '';
+      params.initial_url = Util.isBlob(params.initial_url)
+        ? player.config.url || params.initial_url
+        : params.initial_url;
+      if (
+        evtName === REPORT_EVENTS.ONE_PLAY ||
+        evtName === REPORT_EVENTS.ONE_ERROR
+      ) {
+        // one_play和one_error补充veError信息
+        const veError = player?.veError;
+        if (params.errc !== 0 && veError) {
+          // 有错误时才设置，不然veError可能是上次播放的错误
+          params.ve_error_code = veError?.veErrorCode || 0;
+          params.ve_error_type = veError?.veErrorType || '';
+          params.ve_error_message = veError?.veErrorMessage || '';
+          // 上报扩展信息
+          params.ve_error_ext = JSON.stringify(veError?.ext || '');
+        } else {
+          params.ve_error_code = 0;
+          params.ve_error_type = '';
+          params.ve_error_message = '';
+          params.ve_error_ext = '';
+        }
+        if (import.meta.env.__PLATFORM__ !== 'byteplus') {
+          params.licenseStatus = player?.licenseLogInfo?.licenseStatus || '';
+          params.licenseType = player?.licenseLogInfo?.licenseType || '';
+        }
+      }
+      VE_DEBUG.log('onReportLog after change', evtName, { ...params });
+    };
+
+    const config = Object.assign(
+      {
+        onReportLog,
+      },
+      args.player.config.vodLogOpts || {},
+    );
+    args.player.vodLogger = new VodLogger(args.player, config);
+    args.player.plugins.xgVodLogger = args.player.vodLogger;
+  } else {
+    this.vodLogger = new VodLogger(this, this.config.vodLogOpts || {});
+  }
+};
+xgVodLogger.pluginName = '__xgVodLogger';
+xgVodLogger.playerConfig = {};
+xgVodLogger.Collector = Collector;
+xgVodLogger.setABSdkVersion = value => {
+  VodLogger.AB_SDK_VERSION = value;
+};
+
+export function setTeaId(id: number) {
+  VodLogger.TEA_ID = id;
+}
+
+export default xgVodLogger;