The first big pit - playing on the same layer in the Android WeChat browser is the biggest pit
Goal: To achieve this effect on Android's WeChat browser
The above is the official document, I will repeat the specific usage.
Since I have been using it from the old version before, the same layer playback was not supported before. There is no relevant consideration, and now it is supported, I just want to update the plug-in in the current video site
For me, I opened my code while opening the official document. First, the script was replaced, and then the x5_type and x5_video_position attributes were added as required.
And the css code: object-fit: contain !important; object-position
Then happily start the test, the result is a black screen! ! ! why? So I turned on the crazy mode, and all kinds of attributes and all kinds of adjustments couldn't be found! !
The api has been read over and over again, and the following is the suggestion given by Ali for playing on the same layer. I really don’t understand it anyway. . .
I am very depressed. . . But the experience of Ali's official website is good on my mobile phone.
So I figured out a way to download their code and try it locally, and the result was ok. Later, I made a demo according to their method, and it worked, so I began to doubt the DOM result. My DOM structure is very complex. Then I simulated my dom results in the demo, and it turned out not to work. . . . Finally found the problem, and then I started to transform, (I only record the pits below, don't pay too much attention to the details)
1. The upper div of the J_prismPlayer node must contain all the content on the current page. Never thought that it would mean not to be outside the video area. . . .
But it's still not over. . . The effect is as follows, x5_video_position : 'top' is useless at all, still in the middle
Then I started changing styles. . .
2. Style issues
According to the official api, I changed the style of the video to this, but it still didn't work, and then I found that I had to set a height.
So I added this line, and then looked again, and found that the expected effect was achieved, and then continued to fiddle, and found that many things were unnecessary
x5_video_position:'top' Remove object-fit: contain !important; You can also remove it, of course, it is not completely useless, but I don't need it here, other layout modes may still be used.
The second biggest pit - the pit in ios that requires two clicks to start broadcasting
The effect is to click twice in ios, but Android is normal. It gives me the feeling that the first click will get the focus, and the second click will take effect, but Ali's demo is OK, and I was puzzled at that time. Started to fiddle with the script proxy from the Internet again. . .
I still used a very stupid method. I changed the configuration file to be exactly the same as Ali's. I tried it and it turned out to be ok. Now it's easy to handle. I restored it to my own, delete it line by line and see the effect. . .
In the end I found out that the culprit was the parameter showBarTime. . . It's fine to remove it, but not to put it on. . . This sadness can never be done away with! The requirement is to hide the progress bar for a period of time! ! ! Remove it and it will always be displayed. . .
After a while of fiddling, it was found that the property of controlBarVisibility can be changed to always, but the property of showBarTime is invalid. . . It is also not displayed all the time, and then check the api to see what attributes this has and try one by one.
It is found that it can be changed to click! ! !
Pit father! ~ Another unspoken rule. . .
Summary: showBarTime cannot be used alone, because controlBarVisibility is hover by default. When using it, it must be used together with controlBarVisibility: "click", otherwise there will be various problems.
The third big pit - click to play when it is embedded with the app, and the default cover image appears briefly (super low feeling)
Note: This picture is not made by alipayer, it is made directly by video, without setting the poster cover attribute.
这个问题在除了app里嵌入webview来做h5开发时会出现以外，其它浏览器中都是正常的，不过会有一段时间的黑屏
用阿里的播放器做的时候就算你设置了cover这个东西还是会在你点播放的时候出来一会儿（就是上图这种大大的黑色圈圈中间一个箭头的图标）
随然不影响正常使用但是看起来真的很low
而且我发现阿里的官方demo竟然也是这样。。。
后来我F12查看了一下，阿里在渲染video标签的时候并没有把cover属性里的值带入到poster中去，所以点开播后到视频还没有加载出来这段时间就会出现这种图标
于是后来我在Aliplayer初始化好了以后直接加了下面这一句就好了
这完全可以说是阿里了开发人员在设计的时候把这块儿漏掉了。。。心塞呀！！！
目前就想到这三个比较大的坑，先记着，后期发现在再补上来吧！