需求:伪直播--某一时刻播放视频,从开始至视频结束之前进入的用户可以观看播放中的视频(需要计算用户进入时间调整播放进度)
主要播放环境:微信浏览器
坑一: 个别机型不支持用户进入页面直接播放视频,需手动触发(浏览器规则),可以静音播放(不符合需求)
解: 如果视频还未到达开始播放时间,可以弹框提示用户未开始,如果已经到达播放时间,可以弹窗提醒用户,【XX直播已开始,立即进入】,待用户点击确认时触发播放视频。
坑二: 不同机型的播放控件样式不同
解: 采用组件【vue-video-player】?video组件
坑三: 个别机型全屏状态下会自动出现进度条、暂停按钮等,在播出结束后还有很大可能出现不同的广告视频
解:无解,出现这个问题的原因是腾讯在检测到你的html文件中如果存在video标签,他们会再次创建一个video标签,并浮于页面顶层,尽管在代码中你可能fixed一个顶部浮层,z-index无穷大,依然无法覆盖住video,因为你所看到的这个video不是当前HTML中的,是腾讯创建的,且腾讯官方文档有写?腾讯-x5内核视频问答,建议打算开发web-video且主要宿主环境是微信的都看一下这篇文档,不然就爬不出坑了!
坑四: 在使用了video组件之后,用户手动触发播放,个别机型的video突然弹出居中页面,页面底部为黑色(如公众号文件中的视频点击之后会浮上来)
解:无解,原因如坑三
尽管踩了很多坑,但是微信这边的做法也并不无道理,大部分的需求都是正常的视频播放,如果给到相对统一的样式、形式会更有利于开发者~
最终的解决方案是使用小程序做了一个(在一个相对独立的小程序添加了这个页面,直接给个小程序码的入口),虽然完成了,最终还是选择了第三方平台?
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。