7

为了看《创造101》,我顺手做了个腾讯视频UWP......

 3 years ago
source link: https://zhuanlan.zhihu.com/p/67801602
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

为了看《创造101》,我顺手做了个腾讯视频UWP......

同济大学 计算机科学与技术硕士在读

这个应用,实际上花了我不到一个星期就搞完了,起因是我想用我的Surface看《创造101》,但是无论是用哪种方法使用体验都很差,于是就试图用一个简单的方法解决这个痛点。不妨让我聊一下它是如何诞生的吧,值得一提的是:本项目是完全开源的,github地址放在文末。

v2-1c01f4a4e4419b3cfeceebfecf93e54b_720w.jpg

不同于爱奇艺、芒果TV跟哔哩哔哩,Win10至今没有一款好用的腾讯视频应用,这是腾讯官方的出品:

虽然总算是上架到了商店,方便了安装、更新和卸载,但是实际上仍然是之前那个又卡又难用的老客户端,使用体验远远比不上UWP。不过还是有热心群众做了一款第三方的:

看简介跟评论就能看得出来不管是开发者还是使用者都很无耐腾讯的不作为。因为不能越俎代庖,这个UWP做的很简陋,虽然是按原生的思路开发的,但是困于api的问题,不仅实现的技术困难非常大,而且还有法律风险。

下面是本文的主角,使用了另辟蹊径的思路:

半年内已经卖出去了56份了,虽然你可以看到我的简介里是无限期免费使用+付费捐赠的模式,也就是有钱的捧个钱场,没钱的捧个人场

先给大家看一下效果图:

与官方客户端的资源占用对比:

下面说一下这个客户端的原理:

1、这是一款打包网页的应用,和你直接用Edge浏览器上腾讯视频网页版实质性等同。这就没有任何凭据授权上的问题,一切业务逻辑都是腾讯官方的代码,登录和cookie缓存全部交给浏览器自己处理,因此可以从根本上避免维护上的麻烦。整个应用的核心就是面向一个WebView控件的开发。

2、因为是网页版,所以不支持视频缓存,只支持在线播放,也不准备做缓存的功能。同时由于官方已经使用了HTML5,所以在使用的体验上还是有保证的,在启动速度简洁性上已经超过了老客户端。内存占用略高,但是还是比直接用浏览器要少的。

3、所谓的“WEB增强版”是完全靠JS对网页进行HACK完成的,包括这些功能:移除不必要的网页元素、更改H5播放器的各种属性如大小位置等、自动关闭弹幕、自动切换到蓝光、移除网页上的滚动条。这些基本上都能用油猴脚本实现,但是做不到很完美的效果,既不方便用又不方便维护。考虑到搞一个UWP技术成本非常低,同时可以有很好的分发和宣传渠道,就直接使用WebView魔改了。

如图是用Edge打开一集节目的效果,除了红绿这两个框的内容,其它的元素基本上都是多余的,只要去除了就可以伪装成一个客户端了。

接下来我查了一下开发手册,WebView提供了一个方法用于执行JS,以及多个生命周期事件:

思路很简单,有些元素是在请求发生完成获取到HTML的时候就已经存在的,而有些是在之后用JS动态生成的,因此只需要把想去除的元素的class放到一个表里,分别在DOMContentLoaded和NavigationCompleted两个事件发生时挨个移除就行了。其余的每个功能都封装成JS脚本,排在最后执行就OK。为了便于热更新,可以将这些规则以一个JSON文件写成配置。

例如最近一次的BUG修复,由于腾讯对观看历史页进行了更新,显示出现了异常:

原因是导航栏div的class改名了,修复这个很简单:

放到服务器,然后应用内就可以检测到更新,不需要对程序代码进行更新以及再次审核

热更新后就恢复如初了

上架的过程中还有一件令人捉鸡的事,由于上架到商店的应用的内购必须使用官方渠道,不能使用二维码支付,所以网页中所有开通VIP的元素都得去掉。本来以为所有的都去除完毕了,但是还是被微软的审查员找到了一个漏网之鱼:

说实话这玩意真难处理,因为它是动态生成的,不能从源头直接禁止弹出,而且并没有任何API可以检测到它的出现,如果解决不了这个问题,过审就无望了。

正当我头疼该用什么歪门邪道解决问题或者要不要跟微软的审查员好好聊一聊的时候,奇迹出现了。

我无意中发现了这玩意是靠iframe加载的,正好可以在另一个事件中处理掉它:

万事大吉!简单粗暴地解决了内购审核问题。

最后附上github链接:

https://github.com/LiuChangFreeman/TencentVideoEnhanced​github.com


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK