zoukankan      html  css  js  c++  java
  • 微信小程序:一则iOS下用video播放mp4文件问题排查

    总共花了2个多小时,值得记录一下:

    边学习边琢磨。

    • 现象:

    iOS下,用video组件播放mp4出现黑屏。mp4文件是用iOS拍摄上传的视频。

    Andriod下,同样的代码,播放mp4则正常。

    video组件代码如下:

    <video  show-play-btn="{{true}}" controls show-casting-button="{{true}}" vslide-gesture-in-fullscreen="{{false}}" style="background-color: #eeeeee; 320px;height:240px;" src="{{'https://example?id=x'}}"  ></video>

    文件src为一个URL请求,服务端为私有服务器处理请求。

    • 排查

    1、本身mp4文件是由iphone拍摄并且上传,下载本地后播放没有问题,说明本身mp4文件没问题。

    2、查看微信小程序帮助文档,video组件中有binderror callback,加入该callback看看具体出错原因。

    <video  省略...  binderror="videoErrorCallback"></video>
    videoErrorCallback(e) {
        console.log('Video error info:')
        console.log(e.detail)
     },

    用微信小程序”真机调试“,发现console上输出 errMsg为:"MEDIA_ERR_NETWORK"

    3、尝试修改src,直接下载mp4文件,如https://expamle/webapp/test.mp4,问题消失。

    src的url为后台自己实现的servlet,而直接下载文件为tomcat(本例中用的tomcat服务器)默认webapp实现。

    4、关键点是iOS下行为异常,安卓没问题,又加上是”MEDIA_ERR_NETWORK“错误。

    怀疑http请求在iOS和andriod下不同。

    用tcpdump在服务端抓包(centOS),下载下来用wireshark看一下http的请求和相应包。不知道iOS真机上有没有这样的抓包app,这样不用到服务器上折腾了。

    比对2者行为发现:iOS下的http请求果然与andriod不同。继续google,发现的确如此。

    没搞过视频不知道,还有这区别。

    5、查验后台代码,发现服务端并没有根据该http请求进行不同处理。后台问题!

    网上参考一个例子,验证了一下好使。

    至此,原因查明,方案基本确定。

    当然离代码提交真正解决还有一段距离。

    BJFarmer
  • 相关阅读:
    xcode快捷键大全(转)
    a 和an 的用法区别
    如何在lion系统下安装Xcode 3.2.x版本
    xcode3.2.6升级至4.0.2经验加教训总结(转)
    堆与栈的关系与区别(转)
    [点评]谷歌发布Android 2.3 点评八大亮点
    浅谈关于nil和 null区别及相关问题(转)
    ObjectiveC中的继承与复合技术(转)
    MyEclipse 8.0.0 in Fedora 12
    如何判断两个链表相交及找到第一个相交点
  • 原文地址:https://www.cnblogs.com/bjfarmer/p/15382986.html
Copyright © 2011-2022 走看看