Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(h5): 修复 video methods #7891

Merged
merged 10 commits into from
Dec 12, 2020

Conversation

helsonxiao
Copy link
Contributor

@helsonxiao helsonxiao commented Oct 21, 2020

这个 PR 做了什么? (简要描述所做更改)

  • 补充在这个 commit 被误删的代码
  • 增加了 webkit 全屏变化事件的监听,修复在 safari 上无法全屏的问题(在 mac 上我分别测试了 safari、chrome、firefox、edge,如果有 windows 的话最好再试试微软的旧版浏览器,我盲加了事件处理函数)

这个 PR 是什么类型? (至少选择一个)

  • 错误修复(Bugfix) issue id #
  • 新功能(Feature)
  • 代码重构(Refactor)
  • TypeScript 类型定义修改(Typings)
  • 文档修改(Docs)
  • 代码风格更新(Code style update)
  • 其他,请描述(Other, please describe):

这个 PR 满足以下需求:

  • 提交到 master 分支
  • Commit 信息遵循 Angular Style Commit Message Conventions
  • 所有测试用例已经通过
  • 代码遵循相关包中的 .eslintrc, .tslintrc, .stylelintrc 所规定的规范
  • 在本地测试可用,不会影响到其它功能

这个 PR 涉及以下平台:

  • 微信小程序
  • 支付宝小程序
  • 百度小程序
  • 头条小程序
  • QQ 轻应用
  • 快应用平台(QuickApp)
  • Web 平台(H5)
  • 移动端(React-Native)

其它需要 Reviewer 或社区知晓的内容:

@helsonxiao helsonxiao marked this pull request as ready for review October 21, 2020 12:22
@helsonxiao
Copy link
Contributor Author

https://github.com/helsonxiao/taro-tiktok
可以直接拉这个项目进行调试,需要基于这个 branch build 出来覆盖一下。

const parentTagName = parentElement.tagName
if (this.isFullScreen) {
if (parentTagName !== 'BODY') {
parentElement.removeChild(this.el)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这一段我没理解原来想做什么,对于全屏以及退出全屏我没测出有影响,反而导致了 Safari 上全屏后自动退出。我先全删了。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@helsonxiao helsonxiao changed the title fix: 修复 video methods fix(h5): 修复 video methods Oct 22, 2020
@Chen-jj Chen-jj added the V-3 Version - 3.x label Oct 22, 2020
const timestamp = new Date().getTime()
if (!e.detail && this.isFullScreen && !document[screenFn.fullscreenElement] && timestamp - this.fullScreenTimestamp > 100) {
this.toggleFullScreen(false)
}
}

@Listen('fullscreenchange') onNativeFullScreenChange (e) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里没必要监听这么多个,挺冗余的,用screenFn判断下监听吧

pauseFunc={this.pause}
playFunc={this.play}
seekFunc={this.seek}
pauseFunc={() => this.pause()}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

此处的更改没有必要

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我加一些测试吧,现在处于 this 指向有问题,不能工作的状态。这里更改的原因是因为 this.pause 现在已经不是箭头函数了,如下。

  /** 暂停视频 */
  @Method() async pause () {
    this.videoRef.pause()
  }

上面这段代码说实话我不知道怎么改,才能让 stencil 即正常,这边又不用额外再新创建箭头函数。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

未能复现该问题,重新build一下试试把

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我加了测试,你可以试试直接用 this.play/this.pause/this.seek,在 control bar 里面调用的话 this 是不对的

Copy link
Contributor

@ZakaryCode ZakaryCode left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

来晚了,感谢贡献

@ZakaryCode ZakaryCode merged commit acdbfd9 into NervJS:next Dec 12, 2020
@helsonxiao helsonxiao deleted the helson/fix-h5-video-methods branch December 19, 2020 09:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
V-3 Version - 3.x
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants