微信小程序 webview mp4视频在ios无法播放安卓和谷歌浏览器正常

记一次微信小程序开发,视频兼容问题
参考链接:https://www.jianshu.com/p/31f0593496ef

问题描述:

微信小程序内嵌webview 利用video标签播放流媒体视频, 部分视频报错 error

问题确认:安卓正常, 谷歌正常, mac safari 正常, egretIde报错, iphone 报错

解决过程:

有问题的视频代码错误提示:TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context.

字面意思是调用错误,首先觉得是代码问题,先搜索上下文没有相关调用
然后换了个视频地址可以播放 . 有可能是兼容问题
谷歌浏览器打开没问题.mac safari 打开没有问题, egret ide 打开报错
最后用出问题的手机测试. Safari 直接打开视频显示异常
出问题的手机微信直接打开连接也显示无法播放
定位问题: 可能是ios 兼容问题
然后上网寻找解决方案

解决方案

h264编码的压缩级别问题导致。

苹果官方文档中对 ios 能支持的压缩级别进行了描述：
https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html

我们可以通过 potplayer等软件，查看对应的mp4文件的压缩级别，如果压缩级别高于苹果能支持的压缩级别，则会出现ios下无法播放的问题。

如果视频存放在阿里云或者七牛云，可以使用他们的视频转码服务（一般是按量计费），转码为 h264 high 4.1 就基本可以支持
phone4s + 的苹果设备了。如果要兼容所有（包括iphone3gs 和 iphone4），那需要转为 baseline 3.1

具体的苹果设备支持的编码格式列表，可以参考这里：
http://www.cnblogs.com/tinywan/p/6404411.html

出问题的编码信息如下(potplayer查看):

可以看到 Format profile : High@L3.1

General
Complete name                  : C:\Users\17838\Documents\WXWork\1688853547747770\Cache\Video\2019-10\light_train_1_test.mp4
Format                         : MPEG-4
Format profile                 : Base Media / Version 2
Codec ID                       : mp42 (mp42/mp41)
File size                      : 5.68 MiB
Duration                       : 27 s 880 ms
Overall bit rate               : 1 708 kb/s
Encoded date                   : UTC 2019-08-17 09:31:40
Tagged date                    : UTC 2019-08-17 09:31:45
TIM                            : 00:00:00:00
TSC                            : 25
TSZ                            : 1Video
ID                             : 1
Format                         : AVC
Format/Info                    : Advanced Video Codec
Format profile                 : High@L3.1
Format settings                : CABAC / 4 Ref Frames
Format settings, CABAC         : Yes
Format settings, Reference fra : 4 frames
Format settings, GOP           : M=3, N=25
Codec ID                       : avc1
Codec ID/Info                  : Advanced Video Coding
Duration                       : 27 s 880 ms
Bit rate                       : 1 383 kb/s
Width                          : 1 002 pixels
Height                         : 708 pixels
Display aspect ratio           : 3:2
Frame rate mode                : Constant
Frame rate                     : 25.000 FPS
Color space                    : YUV
Chroma subsampling             : 4:2:0
Bit depth                      : 8 bits
Scan type                      : Interlaced
Scan type, store method        : Separated fields
Scan order                     : Bottom Field First
Bits/(Pixel*Frame)             : 0.078
Stream size                    : 4.60 MiB (81%)
Language                       : English
Encoded date                   : UTC 2019-08-17 09:31:40
Tagged date                    : UTC 2019-08-17 09:31:40
Color range                    : Limited
Color primaries                : BT.709
Transfer characteristics       : BT.709
Matrix coefficients            : BT.709
Codec configuration box        : avcCAudio
ID                             : 2
Format                         : AAC LC
Format/Info                    : Advanced Audio Codec Low Complexity
Codec ID                       : mp4a-40-2
Duration                       : 27 s 880 ms
Source duration                : 27 s 861 ms
Bit rate mode                  : Constant
Nominal bit rate               : 317 kb/s
Channel(s)                     : 2 channels
Channel layout                 : L R
Sampling rate                  : 48.0 kHz
Frame rate                     : 46.875 FPS (1024 SPF)
Compression mode               : Lossy
Source stream size             : 1.05 MiB (19%)
Language                       : English
Encoded date                   : UTC 2019-08-17 09:31:41
Tagged date                    : UTC 2019-08-17 09:31:41

扩展阅读:

2H264编码是什么:

通过某种特定的压缩技术，将某个视频格式的文件转换为另一种视频格式的文件的技术称为视频编码。h264是视频流中其中一种编码标准。H264编码profile & level 控制https://www.cnblogs.com/tinywan/p/6402007.html，这里面说到H264编码的压缩级别，从压缩比例来说，baseline< main < high，对于带宽比较局限的在线视频，可能会优先选择high。但是上文说到，部分mp4视频不能在ios上播放，是由于h264编码的压缩比导致的，那么我们怎么知道ios支持哪些压缩级别呢？

ffmpeg如何控制profile&level:

ffmpeg -i input.mp4 -profile:v baseline -level 3.0 output.mp4ffmpeg -i input.mp4 -profile:v main -level 4.2 output.mp4ffmpeg -i input.mp4 -profile:v high -level 5.1 output.mp4

如果ffmpeg编译时加了external的libx264，那就这么写：

ffmpeg -i input.mp4 -c:v libx264 -x264-params "profile=high:level=3.0" output.mp4

苹果的设备对不同profile的支持。

这里可以看到是不支持上面出问题的 High@L3.1