当前位置: 首页 > Web前端 > vue.js

手机视频遇到的坑

时间:2023-03-31 22:01:42 vue.js

需求:伪直播——在某个时刻播放视频,视频从头到尾进入的用户都能看到正在播放的视频(需要计算用户的进入时间调整播放进度)主要播放环境:微信浏览器坑1:部分机型不支持用户进入页面直接播放视频,需要手动触发(浏览器规则),可以静默播放(不符合要求)解决方法:如果视频还没有到开始时间,可以弹出提示用户还没有开始。如果到了播放时间,可以弹窗提醒用户,【XX直播已经开始,现在进入】,用户点击确认后播放视频。坑2:不同机型有不同的播放控件样式解决方法:使用组件【vue-video-player】?视频组件坑3:个别机型全屏状态下会自动出现进度条、暂停按钮等,播放结束后才会显示。很可能会出现不同的广告视频。解决办法:无解。出现这个问题的原因是,如果腾讯检测到你的html文件中有video标签,他们会重新创建一个video标签,并悬浮在页面顶部。代码中,你可能固定了一个z-index无限大的顶部浮层,但是还是覆盖不了视频,因为你看到的视频不是现在的html,而是腾讯创建的,腾讯官方文档有写?Tencent-x5Kernel视频问答,如果你打算开发web-video,主要宿主环境是微信,推荐阅读这篇文档,否则你就爬不出坑了!坑4:使用视频组件后,用户手动触发播放,中间页面突然弹出部分机型的视频,页面底部是黑色的(比如公众号文件中的视频点击后会飘起来)解决办法:无解,原因如坑三虽然踩了很多坑,但微信的做法不无道理。大多数需求是正常的视频播放。如果给出一个相对统一的样式和形式,对开发者更有利~最终的解决方案是用小程序做一个(将这个页面添加到一个相对独立的小程序中,直接给出一个小程序的入口程序代码),虽然完成了,最后还是选择了第三方平台?