开发者社区> 问答> 正文

VOD-视频点播,如果插件的target是svg 会报错,请问这种情况该如何解决?

b7a6a0c8bf465a0abe39e8405d69e89a.png
2b2f2ba9cbfbf1422253b03ca08aed38.png
VOD-视频点播,如果插件的target是svg 会报错。点击controlBar,如果被点击的eventTarget是svg, 就会报错。全屏的按钮 我把图片换成svg也会报错。请问这种情况该如何解决?

展开
收起
2401。 2023-07-08 13:23:09 48 0
3 条回答
写回答
取消 提交回答
  • sdk里的全屏按钮是一张通过 css的background属性设置的背景图,你可以通过这个方式去替换另一张背景图。
    点击事件是绑定的某个元素,不建议去换元素,除非你自己根据这个元素去重新绑定事件。
    此回答整理自钉群“阿里云-VOD-视频点播-技术交流(进群先看公告)”。

    2023-07-09 13:59:53
    赞同 展开评论 打赏
  • 北京阿里云ACE会长

    这种情况一般是由于Web播放器无法正确识别和处理SVG类型的事件所致。以下是一些可能的解决方法:

    使用其他类型的插件:如果您使用的插件target是SVG类型,建议您尝试使用其他类型的插件,例如div、span等,以避免SVG类型的兼容性问题。

    避免使用SVG作为事件目标:如果您需要在SVG图像中添加交互元素,建议您将交互元素放置在SVG之外,并使用HTML元素作为事件目标。可以使用CSS将HTML元素和SVG图像进行定位和布局,以实现交互效果。

    例如:

    angelscript



    ...



    自定义SVG图标并使用font icon替代:如果您需要在播放器中使用SVG图标,建议您自定义SVG图标,并将其转换为font icon格式,以避免SVG类型的兼容性问题。
    例如,您可以使用iconfont等工具将SVG图标转换为font icon,并在播放器中使用相应的icon font:

    2023-07-08 19:15:43
    赞同 展开评论 打赏
  • 在VOD-视频点播中,如果插件的target是SVG,并且在点击控制栏(controlBar)或全屏按钮时出现错误,可能有以下解决方法:

    1. 检查SVG格式支持:确保您使用的播放器插件或库支持使用SVG作为目标元素。某些库可能不完全支持SVG元素作为事件目标。

    2. 确定事件目标:检查是否正确设置了控制栏和全屏按钮的事件目标。确保目标元素是正确的并且可以正常响应点击事件。

    3. 调试错误信息:查看报错信息的详细内容。错误消息可能会提供有关问题所在的更多线索,例如具体的错误类型、行号等。根据错误信息,您可以尝试调整代码或搜索特定错误以获取更多解决方案。

    4. 替代方案:如果使用SVG作为目标元素导致问题无法解决,您可以考虑使用其他图像格式(如PNG或JPEG)来替代SVG。确保图像文件可访问并正确配置相应的事件处理逻辑。

    5. 更新播放器插件或库:如果已经确认问题是由于当前版本的插件或库引起的,可以尝试更新到较新的版本。新版本通常包含修复错误和改进功能的更新。

    2023-07-08 17:01:15
    赞同 展开评论 打赏
来源圈子
更多
收录在圈子:
+ 订阅
问答排行榜
最热
最新

相关电子书

更多
互联网音视频点播业务云上实践 立即下载
《VoD问题排查与实战手册》 立即下载
低代码开发师(初级)实战教程 立即下载