使用云服務(wù)（oss）托管視頻

最近有朋友在使用云服務(wù)oss作為視頻的托管，而視頻的托管一般來(lái)說(shuō)會(huì)提供一段js的播放器代碼進(jìn)行播放，用來(lái)兼容不同版本的瀏覽器播放。

然后這些視頻的代碼對(duì)于不懂代碼的朋友來(lái)說(shuō)，不是很會(huì)使用，

一般如果在一個(gè)頁(yè)面使用多個(gè)視頻播放，那么代碼放進(jìn)去是沒(méi)有問(wèn)題的，但如果放入多個(gè)視頻就會(huì)出現(xiàn)各種問(wèn)題：

比如視頻的內(nèi)容和放置的順序不一樣，第一個(gè)視頻顯示，后面的視頻就都不顯示了，諸如此類的一些問(wèn)題讓一個(gè)頁(yè)面顯示多個(gè)視頻出現(xiàn)問(wèn)題而無(wú)法播放。

下面我們就來(lái)說(shuō)明一下，使用這種js代碼應(yīng)該如何注意避免多個(gè)視頻代碼造成的沖突。

使用js加載的視頻代碼，放置多個(gè)而不造成沖突的方法

如果你也是使用這樣的代碼，結(jié)構(gòu)相同，或者直接是使用的阿里云的對(duì)象儲(chǔ)存--媒體轉(zhuǎn)碼--點(diǎn)播套餐，可以參考我們的一些說(shuō)明，因?yàn)槊恳患疑碳业拇a可能有所不同，因此注意觀察代碼結(jié)構(gòu)。

以阿里云為例：

代碼結(jié)構(gòu)是這樣的，我們一般會(huì)在網(wǎng)頁(yè)頭部引用meta下的兩段資源，也就是index.css和prosm.js兩個(gè)資源，這個(gè)在你的wordpress主題header.php中的</head>之前引用即可:

在你的wordpress主題--后臺(tái)--外觀--編輯，右側(cè)找到主題頁(yè)眉（header.php），ctrl+f搜索</head>,在這個(gè)之前加載這兩個(gè)資源：

然后我們所需要引用的結(jié)構(gòu)是容器（html）和js參數(shù)代碼（js）:

上面的代碼直接放入文章編輯器的文本模式就可以調(diào)用視頻了

但是如果我們放入多個(gè)視頻就會(huì)造成上面所描述的問(wèn)題，這個(gè)原因很簡(jiǎn)單請(qǐng)看代碼：

可以發(fā)現(xiàn)一個(gè)視頻由2個(gè)部分組成（html和js），而識(shí)別他們的都是容器的id（J_prismPlayer）,如果我們不加更改而都放入一樣的代碼（因?yàn)樯傻拇a除了視頻url之外都是一樣的）就會(huì)造成識(shí)別混亂，而出現(xiàn)問(wèn)題了。

因此解決的方法就是，每套視頻的2個(gè)ID和其他的視頻ID不同就行了，最簡(jiǎn)單的就是加上數(shù)字

如：第一個(gè)視頻js和html id為J_prismPlayer1

第二為J_prismPlayer2

第三個(gè)為J_prismPlayer3

以此類推，這樣就互不干涉啦，這里注意的是每套視頻代碼 ，不要弄混淆了，可以理解的是，div是視頻播放容器，而script代碼是控制他的，所以他們是兩兄弟，他們的的ID都要一樣。

這里僅僅對(duì)阿里云的OSS視頻媒體托管做了詳細(xì)說(shuō)明，其他的商家代碼可能大同小異，因此你需要觀察仔細(xì)，并可以詢問(wèn)你的服務(wù)器商（雖然提交工單的作用可能有限，因?yàn)橐陨蠁?wèn)題是一個(gè)用戶像阿里提交無(wú)果之后找到我們求助的），若購(gòu)買(mǎi)了我們的主題，我們的售后也會(huì)盡力幫助大家做好工作。

我們官網(wǎng)上會(huì)把這些為用戶解決好了的方案都作為文章分享出來(lái)給大家，希望能夠幫助到大家解決相關(guān)的問(wèn)題。