视频点播gssdk使用

问题描述：

项目是用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的标签，产生冲突。