问题描述:
项目是用koa + gulp框架搭的,代码年代比较久远了。
突然客服反馈了一个问题,视频播放是用flash打开,啊,chrome最新版已经禁止使用flash播放了,蛋疼。
排查问题:
此前对这个项目的业务不太熟悉,只能硬着头皮,一个个排查了。
生产才有此视频格式,果断开启fiddler的代理模式,将生产代码映射到本地。
再看代码,发现html中用的是gs:video-vod
对这个标签不熟悉,百度后才知道是gensee提供的
遂找到官方文档
接下来首先是熟悉下gssdk的api文档了
gssdk的使用
- 需要引入的javascript
<script type="text/javascript" src="http://static.gensee.com/webcast/static/sdk/js/gssdk-1.3.js"></script>
- html 命名空间
<html xmlns:gs="http://www.gensee.com/ec">
- Vod Video Widget 标签配置
<gs:video-vod id="videoComponent" site="192.168.0.168" ctx="webcast" ownerid="f8625298d18042fbbba7a8" uid="55831" uname="user5623" authcode="333333"/>
属性说明:
- Id: html的元素ID。(可选)用户可自行指定。SDK将以此ID作为Widget ID。
- ctx: 服务选项。可选值为webcast或training。无此属性说明默认使用webcast服务。
- site: 站点域名 (必填)Example:www.gensee.com
- ownerid: webcast服务下,表示点播ID ;training服务下,表示课件ID(必填)
- uid: 用户ID (可选)。若无此属性,系统会自动生成随机UID。为了避免uid跟Gensee系统的内部用户ID冲突,该uid要求必须大于1000000000 小于9007199254740992
- uname: 用户名称(可选)。若无此属性,系统自动生成英文随机名称。若点播(课件)要求登录,则用户名称必须是系统的登录账号。注:登录方式无论是账号密码或手机动态密码,接口只能使用账户登录。
- authcode: (可选)校验码。对应点播(课件)的web端口令。若点播(课件)要求输入口令,则此属性必填。否则不需要。
- encodetype: 指定authcode的编码方式。值若为md5,则authcode必须经过MD5的32位小写编码过。不写该属性或者值为空,则authcode为明文。
- password: (可选)若点播(课件)要求登录,此属性表示登录账号的密码。
- group: 分组名称。(可选) 适用于不同点播(课件)的Widget放在同一个页面中的情况。Group用来标示哪些Video和Doc Widget属于同一个组。相同组内的Widget可以共享通讯信息。若不填,SDK会自动将Widget归属到默认组。
- k: 若直播开启第三方认证功能,则需要k值验证。关于第三方认证,请参看Gensee_URL_API_SPEC。
- lang: 指定语言。中文是zh_CN, 英文是 en,日文是ja。
- bgimg: 设置背景图案,图片URL地址。
- py: 设置点播是否自动播放,值为1或者0。1表示自动播放,0则表示手动播放(移动端该参数是否生效取决于终端浏览器是否兼容)
- video:设置点播是否使用音频还是视频,值为:true或者false,true表示视频,false表示音频,默认情况true。
- btnimg:设置播放按钮图案,图片url地址。
- fullscreen:是否在flash视频界面上显示全屏操作按钮。可选值为true或者false。默认值为false。(可选)
- gsver:采用何种技术的播放器(H5 Flash)。可选值为2或者其他。默认值为空
- post k值认证方式,get请求或post请求。可选值为true或者false。默认值为true。(可选)
- Doc Widget
- Id: html的element id。(可选)
- site: 站点域名(必填)
- ownerid: 点播或课件ID。(必填)
- group: 分组名称。作用同Video Widget的Group属性。(可选)
- ctx: 服务选项。可选值为webcast或training。无此属性说明默认使用webcast服务。(可选)
- fullscreen:是否支持flash全屏。可选值为true或者false。默认值为false。(可选)
- bgcolor: 背景色。参考值:#00ff00。默认为空。(可选)
- bgimg: 设置背景图案,图片URL地址。
- gsver:采用何种技术的文档模块(SDK1.0/SDK2.0)。可选值为2或者其他。默认值为空
定位问题
通过api了解到 gsver会影响资源的展示
看到资源传的gsver=1,所以是用的flash播放器打开。
再看下代码中gsver的实现
const updateDate = +new Date(2019, 0, 1);
const gsver = result.liveCourse.recordEndTime > updateDate ? 2 : 1;
console.log('###', result.liveCourse.recordEndTime)
打印result.liveCourse.recordEndTime,发现是null
可能是早期的课程资源有的是用flash做的,所以用gsver=1播放
根据课程的录制结束时间进行判断。如果是2019年后的用h5播放,之前的时间用flash播放。
终于找到问题的根源,反馈给服务端,可能是后台设置recordEndTime的问题
理解xmlns原理
从gs:video-vod
可以知道,这是一个自定义的标签。
xmlns 属性可以在文档中定义一个或多个可供选择的命名空间。该属性可以放置在文档内任何元素的开始标签中。该属性的值类似于 URL,它定义了一个命名空间,浏览器会将此命名空间用于该属性所在元素内的所有内容。
在js中,可以通过dom操作,获取该标签上对应的字段,进行一些逻辑处理,可以避免使用w3c的标签,产生冲突。