如何在ThingJS-X中播放视频资源?

18801187951(338465)发表于:2022年12月06日 14:29:43更新于:2023年02月07日 13:41:00

需求:希望在ThingJS-X中播放视频资源来进行演示

实现方法:

我们可以使用视频窗口标记或者视频监控孪生体面板等来进行最终的视频展示,下面以标记【视频窗口-密斯】为例来进行说明:

1-上传视频资源

4.x版本和3.5.x版本都是在【资源中心】-【其他】中进行视频的上传

X4版本

f2cy2U9b7zebcda36U8e6D47048y5K7u15b2404s2l4Qe68Q2cfubS3Iap4mdqfE.png?e=1670159647&token=PGtAPYyCYxCQ1zckbL-ecATOk42z8P3jdPahEnzt:N5Qv5pQaPN40sZbQaXsp_zs6LPI=
X3版本

0l9v7x6Mdf1d7pfcfbfV3zagc80n5b114l570Nbbat9abP5O207R2edf3b5Z8k3Q.png?e=1670159689&token=PGtAPYyCYxCQ1zckbL-ecATOk42z8P3jdPahEnzt:AUGTN13_lywI35IwjD0G88mBNVY=

2-给摄像头配置视频地址属性及数据

①添加【视频地址】属性栏

X4版本

1L062Ef76t1F3Fa48N5j9tcVckfPbIbUfH5nd9bp954T7Idubt9eba570Bbdbce8.png?e=1670159936&token=PGtAPYyCYxCQ1zckbL-ecATOk42z8P3jdPahEnzt:w_6krchPqgf__UIcTbYYJ3jnXnU=

X3版本

bH601U5A0855357Q9I2vfP2a0seUdgewbP71cI4i4ddS4UbB6WebbjdMbX2p8s1i.png?e=1670160018&token=PGtAPYyCYxCQ1zckbL-ecATOk42z8P3jdPahEnzt:PFKCqY2RBiJOYtG7BAY9GT7pYTI=

②添加【视频地址】属性值

这里注意填入的视频地址,4.0.3版本以前(包括X3系列),需要使用视频拼接地址(如X3版本演示);4.0.3版本及之后直接使用资源中心复制得到的相对路径填入使用即可。

X4版本

(1)资源中心点击【复制路径】图标,会得到视频资源的相对路径,如/configure/other/719e0fb3f1862fae40756aee2ac9d212/001.mp4

6w5G4JcYff3Xcc6U40cV0k8t3Raf6F2S6YcWamcAf05R7wdQad3Ifo4w161dbvaE.png?e=1670160457&token=PGtAPYyCYxCQ1zckbL-ecATOk42z8P3jdPahEnzt:vjHckAPw--DpzfwVO9Ryia3niVA=

(2)把复制得到的视频地址,填入对应的孪生体的的视频地址属性栏中,以摄像头A3-F5-20为例:

2l2MaBcia7aV3pd17WcG8na9505E7f3Db06uf10y0s775jeB5Q4YdSeu025M081q.png?e=1670160724&token=PGtAPYyCYxCQ1zckbL-ecATOk42z8P3jdPahEnzt:GU87M1RzsiMbhQXWGiy3lzOo4HU=

X3版本

(1)使用资源中心中视频的资源路径进行拼接,如下图所示,得到路径:https://10mty2oty5ntgzotazmf81otm5-thingjsx.thingjs.com/thing/rsm/configure/other/719e0fb3f1862fae40756aee2ac9d212/001.mp4

4wbF4w4MaB2B9G5q7N9F64aj0Z3u1HeGeqaf4F9keEaP7u3EbdeQ6Q0H1o2RaNcO.png?e=1670161030&token=PGtAPYyCYxCQ1zckbL-ecATOk42z8P3jdPahEnzt:wuUnpDQ8gH7KeuSuWA6Y7sJR7M4=

(2)把拼接得到的视频地址,填入对应的孪生体的的视频地址属性栏中,以摄像头A3-F5-20为例:

5heG3Kdxdh9pcQ4u4r4229ct9q04eX509o9LaC05dO6sfe4M9Q1u1ndYcr5y41aA.png?e=1670161089&token=PGtAPYyCYxCQ1zckbL-ecATOk42z8P3jdPahEnzt:67WBnn3j4YCY-u4jUgLhXcAivH4=

3-配置标记

提前在资源中心中下载标记【视频窗口-密斯】,随后根据孪生体编号选择出【A3-F5-20】摄像头,配置【预加载】显示标记,选择播放【视频地址】数据。

X4版本

9f1S6a3P4Ofb7N9c3y0I0r740RbU5x299Q6reT6n8keb5HaM6P8Dbo0MaEfEevfn.png?e=1670161310&token=PGtAPYyCYxCQ1zckbL-ecATOk42z8P3jdPahEnzt:lAYie4hOaXfs7wUUpIlZfSU2XoA=

X3版本

fA0j4l6E36737V8v2v164Rcm7n4C8Vcq944ldfdT579fbOfoe16TeTfJ48bU535z.png?e=1670161345&token=PGtAPYyCYxCQ1zckbL-ecATOk42z8P3jdPahEnzt:Ucx7xsFSrq86KqOSnImX1KqWJmI=

4-最终效果展示

8k054t072I1E5G8o8Q2A4T1ifi3LdW8L366U16cd6w38aeaz4v946H3b8VbD37bx.gif?e=1670161740&token=PGtAPYyCYxCQ1zckbL-ecATOk42z8P3jdPahEnzt:OGCt1m0X9jsU46ctfE86YXlDagg=

 


    您需要登录后才可以回复