使用云服务(oss)托管视频播放的一些注意事项

使用云服务(oss)托管视频

最近有朋友在使用云服务oss作为视频的托管,而视频的托管一般来说会提供一段js的播放器代码进行播放,用来兼容不同版本的浏览器播放。

然后这些视频的代码对于不懂代码的朋友来说,不是很会使用,

 

一般如果在一个页面使用多个视频播放,那么代码放进去是没有问题的,但如果放入多个视频就会出现各种问题:

 

比如视频的内容和放置的顺序不一样,第一个视频显示,后面的视频就都不显示了,诸如此类的一些问题让一个页面显示多个视频出现问题而无法播放。

下面我们就来说明一下,使用这种js代码应该如何注意避免多个视频代码造成的冲突。

 

使用js加载的视频代码,放置多个而不造成冲突的方法

如果你也是使用这样的代码,结构相同,或者直接是使用的阿里云的对象储存–媒体转码–点播套餐,可以参考我们的一些说明,因为每一家商家的代码可能有所不同,因此注意观察代码结构。

以阿里云为例:

 

wordpressossaliyun

 

代码结构是这样的,我们一般会在网页头部引用meta下的两段资源,也就是index.css和prosm.js两个资源,这个在你的wordpress主题header.php中的</head>之前引用即可:

 

在你的wordpress主题–后台–外观–编辑,右侧找到主题页眉(header.php),ctrl+f搜索</head>,在这个之前加载这两个资源:

 

wordpressossaliyun3

 

然后我们所需要引用的结构是容器(html)和js参数代码(js):

 

wordpressossaliyun2

上面的代码直接放入文章编辑器的文本模式就可以调用视频了

但是如果我们放入多个视频就会造成上面所描述的问题,这个原因很简单请看代码:

wordpressossaliyun4

 

可以发现一个视频由2个部分组成(html和js),而识别他们的都是容器的id(J_prismPlayer),如果我们不加更改而都放入一样的代码(因为生成的代码除了视频url之外都是一样的)就会造成识别混乱,而出现问题了。

 

因此解决的方法就是,每套视频的2个ID和其他的视频ID不同就行了,最简单的就是加上数字

如:第一个视频js和html id为J_prismPlayer1

第二为J_prismPlayer2

第三个为J_prismPlayer3

 

以此类推,这样就互不干涉啦,这里注意的是每套视频代码 ,不要弄混淆了,可以理解的是,div是视频播放容器,而script代码是控制他的,所以他们是两兄弟,他们的的ID都要一样。

 

这里仅仅对阿里云的OSS视频媒体托管做了详细说明,其他的商家代码可能大同小异,因此你需要观察仔细,并可以询问你的服务器商(虽然提交工单的作用可能有限,因为以上问题是一个用户像阿里提交无果之后找到我们求助的),若购买了我们的主题,我们的售后也会尽力帮助大家做好工作。

 

我们官网上会把这些为用户解决好了的方案都作为文章分享出来给大家,希望能够帮助到大家解决相关的问题。

 

上一篇:

下一篇:

如未标明出处,所有文章均为WEB主题公园原创,如需转载,请附上原文地址,感谢您的支持和关注。

本文地址:https://www.themepark.com.cn/syyfwosstgspbfdyb.html

WordPress原创主题,高端网站模板建站,网站模板建站资源以及开发知识分享,尽在WEB主题公园
WEB主题公园致力于开发适合中国人习惯的中文WordPress网站模板,并提供全程视频教程,让您能够轻松的使用网站模板建立好自己的网站!

相关文章

文章评论

您好!请登录

取消回复

    个人中心我的

    联系我们x

    联系我们,从qq在线客服,电话和邮件

    售前客服-1[点击对话]

    购买之前想要了解和咨询

    售前客服-2[点击对话]

    购买之前想要了解和咨询

    售后客服[售后支持]

    购买后输入订单号加好友

    咨询热线:0731-8578 7193

    联系邮箱:
    info@themepark.com.cn

    请注意:在线客服以及咨询热线请在 工作日的9:30~18:00来电咨询 电子邮件在任何时间都会回复

    客服
    回到顶部 顶部