收藏
回答

H5页面用<video>+<source>标签写的视频在微信里面播放不了?

问题:微信里面访问H5页面,页面里面有视频。大部分ios手机每次进入页面首次播放视频的时候只有声音没有画面,要点击一下暂停按钮重新播放或者点击全屏视频才能正常播放。安卓手机没有这个问题,企业微信上面ios和安卓都能正常播放。可以访问这个地址看下效果:https://tl-test.dustess.com/iPPTQe8mkP

复现设备:ios手机型号为为iphone 12,系统版本是15.5;微信版本为 8.0.23;企微版本为4.0.6。

原因:通过排查发现,通过原生<video>加<source src="url地址">标签写的视频就有这个问题,而<video src="url地址">就没问题。但是我们的需求必须通过加<source>的方式来处理,需求是前面的视频播放不了,就用后面的视频。

关键代码:

<video controls="true" preload="auto" poster="https://cdn-temp.dustess.com/W00000000176/cms/s/k/o/n/skonpgu3kbh1654830324000.png"><source src="https://cdn-temp.dustess.com/W00000000176/cms/s/k/o/n/skonpgu3kbh1654830324000_final.mp4" type="video/mp4"><source src="https://cdn-temp.dustess.com/W00000000176/cms/s/k/o/n/skonpgu3kbh1654830324000.mp4" type="video/mp4"></video>


回答关注问题邀请回答
收藏

5 个回答

  • 社区技术运营专员--许涛
    社区技术运营专员--许涛
    2022-06-13

    你好,是不是有自定义的封面图覆盖逻辑,关键代码单独运行的话是没问题的,建议自查

    2022-06-13
    有用
    回复 4
    • Khorosho
      Khorosho
      2022-07-07
      没有封面图覆盖逻辑,封面就只用了视频的poster属性设置,还是会出现这种只有声音没有画面的情况,点一下暂停或者全屏就正常了。
      2022-07-07
      回复
    • Khorosho
      Khorosho
      2022-07-07
      这个只在个微上面有问题,在企微上都能正常播放。感觉是bug啊
      2022-07-07
      1
      回复
    • 社区技术运营专员--许涛
      社区技术运营专员--许涛
      2022-07-07回复Khorosho
      个微是什么意思呢?
      2022-07-07
      回复
    • Khorosho
      Khorosho
      2022-07-07回复社区技术运营专员--许涛
      就是日常用的微信,企微就是企业微信。这个真的有bug大佬,ios微信上就是会出现只有声音,没有画面,暂停或者全屏就可以。在企业微信上或者安卓上就可以正常播放。不用<source>,只用<video src=“url”>都能正常播放。
      2022-07-07
      回复
  • 煮酒弄茶
    煮酒弄茶
    2023-06-30

    同样的问题,网站用<video>加<source src="url地址">,在其他浏览器能够正常显示,用手机微信浏览器打开网站时,视频就显示不出来 https://m.v.qq.com/x/m/play?vid=c3521co9qu0&cid=&url_from=share&second_share=0&share_from=copy

    2023-06-30
    有用
    回复
  • 恭喜发财
    恭喜发财
    2023-06-20

    同样的问题

    2023-06-20
    有用
    回复
  • SHINEON
    SHINEON
    2023-05-22

    同样问题,请问解决了吗

    2023-05-22
    有用
    回复
  • ㅤ
    2022-08-16

    同样问题,请问解决了吗

    2022-08-16
    有用
    回复
登录 后发表内容