[ chore ] xgplayer-mp4 && xgplayer-react 使用疑惑

[mowatermelon]

您使用的西瓜播放器版本是多少？ What version of xgplayer are you using?

xgplayer: 2.31.4 xgplayer-react: 2.4.0 xgplayer-mp4: 2.0.0

您使用的操作系统和浏览器分别是？ What OS and browser are you using? OS : MacBook Pro (16-inch, 2019) Big Sur 版本 11.4 browser : chrome 96.0.4664.55

如何复现问题？ What did you do?

在 react + ts 项目中，引入项目 'import Mp4Player from 'xgplayer-mp4' 或者 import Mp4Player from 'xgplayer-react' 都会报错

无法找到模块“xgplayer-xxx”的声明文件。“xx/node_modules/xgplayer-mp4/dist/index.js”隐式拥有 "any" 类型。
  尝试使用 `npm i --save-dev @types/xgplayer-xx` (如果存在)，或者添加一个包含 `declare module 'xgplayer-xxx';` 的新声明(.d.ts)文

尝试安装类型声明发现下载 404，GET https://registry.npmjs.com/@types/xgplayer-xx - Not found，目前暂时是手动在 typings.d.ts 中手动声明了 declare module 'xgplayer-mp4'

话说 'import Mp4Player from 'xgplayer' 这个包是做了类型声明的，为何 -mp4 和 -react 是没有默认的声明

您期望的播放器正常行为是？ What did you expect to happen?

依赖包引入之后，不会提示类型声明找不到

实际播放器的表现是？ What actually happened?

依赖包引入之后，会提示类型声明找不到

可填写您所在的公司和相关产品业务，方便我们提供更好的技术支持 You can write your company and product which uses xgplayer, for helping us provide better technical support.

在线播放相关视频资源

[mowatermelon]

您使用的西瓜播放器版本是多少？ What version of xgplayer are you using?

xgplayer: 2.31.4 xgplayer-react: 2.4.0 xgplayer-mp4: 2.0.0

您使用的操作系统和浏览器分别是？ What OS and browser are you using? OS : MacBook Pro (16-inch, 2019) Big Sur 版本 11.4 browser : chrome 96.0.4664.55

如何复现问题？ What did you do?

关于 Player 初始配置项中，有一个 option 是 mediaType ，注释说明是 播放媒体类型, 由于确认播放的是 mp4 格式媒体，所以在加载了 xgplayer-mp4之后，也配置了这个选项，但是实际运行之后，会发现 这个媒体类型被用作了 dom 的 nodeType 渲染，导致 内部实际应该是 render 的为 video 的 dom，被渲染成了 mp4 dom，导致视频加载失败。

理论上来说 ，作为自加载的 xgplayer-mp4 插件，内部实现的时候

• 是否也应该考虑到 强制复写 render 的 dom 类型，否则 video init 都错了，后续逻辑也基本失败了
• 是否也应该这个过程还未添加异常捕获，做友好异常输出。
• mediaType 为何被用作了 dom 的 nodeType，这和备注的 播放媒体类型 含义有点不一致吧

在 xgplayer 中

• document.querySelector(xxx) 的返回值默认类型是 HTMLVideoElement | null 为何在 el 属性类型声明中，el?:HTMLElement; // DOM实例 只通过可选操作符兼容了 undefined 的情况，未兼容 null 类型情况

import Player from 'xgplayer'
import 'xgplayer-mp4'

export const XgVideo = ({}){
const videoId = 'xxx'
const url = 'xxxx'
useEffect(() => {
    const dealDomLoad = () => {
      const refVideo = new Player({
        id: videoId,
        el: document.querySelector(`#${videoId}`) as HTMLVideoElement,
        url,
        mediaType:'mp4',
      })
      console.log(refVideo)
    }
    dealDomLoad()
  }, [url, videoId])

return (
          <div
            id={videoId}
            className={classNames(style['video-container'], 'w-100')}
          />
       )

}

您期望的播放器正常行为是？ What did you expect to happen?

视频正常播放

实际播放器的表现是？ What actually happened?

视频未正常播放

可填写您所在的公司和相关产品业务，方便我们提供更好的技术支持 You can write your company and product which uses xgplayer, for helping us provide better technical support.

在线播放相关视频资源

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[github-actions[bot]]

This issue has been automatically closed after a period of inactivity. If it is still present in the latest release, please create a new issue with up-to-date information. Thank you!