輯導(dǎo)讀：播放視頻是很多平臺軟件都具備的功能，但是我們在制作原型的時候，Axure很難播放視頻。在本文中，作者和我們分享了在axure里面如何調(diào)用B站的視頻播放器，希望對你有幫助。
播放視頻是很多平臺軟件都具備的功能，但是我們在制作原型的時候，Axure很難播放視頻，一種是播放本地的視頻，因?yàn)閍xure在預(yù)覽的時候是不能打開本地的文件的，所以只能通過生成html并且通過內(nèi)聯(lián)框架打開本地視頻的方式才能看到。
但是這種方法很麻煩，第一是視頻位置不能改變，別人需要在你的電腦上才能觀看，不能通過網(wǎng)絡(luò)分享；第二是修改之后每次都要重新導(dǎo)出才能看到效果，非常麻煩。
那如果axure在看在線視頻，一般我們也是用內(nèi)聯(lián)框架的方式打開對應(yīng)網(wǎng)址，但是一般的網(wǎng)頁除了視頻，還有很多其他東西，我們的原型里面并不需要其他多余的東西。所以今天我們就來學(xué)習(xí)一下，在axure里面如何調(diào)用B站的視頻播放器。
原型預(yù)覽地址：https://poj5tz.axshare.com/#g=1
在axure里面，我們只需要矩形作為基本的元件，后續(xù)我們通過代碼來講矩形設(shè)置為播放器。
矩形的寬高可以自由設(shè)置，暫時當(dāng)做一個占位符，制作完成以后，視頻的大小就會和矩形的大小一樣。
這里我們要給矩形命名為，案例中命名為code，你們可以自由命名，后續(xù)代碼需要使用。
我們可以看到上面矩形里面會有一行代碼，那這行代碼是怎么獲得的呢？
在此之前，我們可以把我們需要播放的視頻上傳到b站，或者直接在b站找到合適的視頻，點(diǎn)擊分享按鈕，然后我們可以看到一行叫嵌入代碼，我們直接將代碼復(fù)制到矩形內(nèi)。
復(fù)制完成之后，我們還要增加兩個參數(shù)width=”xxx” ；height=”xxx”，這兩個是控制視頻播放器的大小的，如果沒有的話，他就會默認(rèn)出現(xiàn)一個最小的播放器。里面具體的數(shù)值你們按照矩形的寬和高填寫進(jìn)去即可。
接下載最后一步，我們還需要通過JavaScript的代碼，才可以將矩形變成播放器。
我們在矩形載入時，增加交互，用打開鏈接的交互，選擇鏈接到URL或者文件路徑，在上面我們就可以輸入以下代碼：
至于為什么這樣輸入，這需要一點(diǎn)代碼的基礎(chǔ)，如果你有這方便的知識自然一看就清楚了，但是如果你沒這方便知識的話，我也很難給你解釋清楚。你只需要簡單里輸入即可。這里需要注意的是data-label=code，這里的code是我們前面矩形命名的名字，如果你命名的不是code，那你就需要修改一下代碼變成和矩形的名字相同即可。
這樣以后我們就完成制作了，點(diǎn)擊預(yù)覽就可以看看視頻播放器出現(xiàn)了，我們可以直接在我們的原型里觀看視頻了。當(dāng)然我們這種做法除了在預(yù)覽上面觀看，也可以發(fā)布生成html、或者生成在線地址也可以觀看，沒有這么多的局限。
以上就是本期的全部內(nèi)容了，感謝您的閱讀，我們下期見~
本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
6氪獲悉，B站宣布上線“互動視頻”功能。UP主可制作包含不同選項(xiàng)的互動式視頻，用戶則可以通過播放器做出選擇，觸發(fā)多重劇情和結(jié)局。互動視頻是一種觀眾通過選項(xiàng)互動，主動參與劇情走向的視頻形式。目前，B站的互動視頻可在WEB電腦端和手機(jī)端觀看，手機(jī)端則需升級至5.44以上版本。互動視頻功能的推出，可以降低UP主制作互動式內(nèi)容的門檻。
雷的讀者估計有不少也是B站的用戶吧？那么小雷想問一下，大家平時都是在什么平臺瀏覽B站的？網(wǎng)頁端？移動端？就小雷個人來說，一般都是用的網(wǎng)頁端，因?yàn)?7英寸4K顯示屏在看電影、紀(jì)錄片、動畫等視頻時的體驗(yàn)是遠(yuǎn)優(yōu)于平板電腦和手機(jī)。
不過，網(wǎng)頁端的弊端也不少，比如首頁的推薦視頻基本以各類目的熱門視頻為主，僅在首頁最上方的一小塊處于有依照個人愛好推薦的視頻，對于喜歡漫無目的刷視頻的用戶來說顯然不夠看。
而且，一些功能也僅有移動端才支持啟用，比如HDR畫面模式，因?yàn)榫W(wǎng)頁端的編譯器是無法支持在線HDR模式播放的。一直以來，B站都以網(wǎng)頁端和移動端為主，而在Windows系統(tǒng)上只是提供了一個UWP版本的客戶端。
可能很多人都不知道B站還有客戶端，因?yàn)閁WP版客戶端不僅本身功能較少、設(shè)計簡陋，而且更新頻率低。此外，微軟商店本身的服務(wù)也很難讓人滿意，不少用戶都投訴稱微軟商店無法打開或者無法正常下載軟件，而根據(jù)小雷的使用經(jīng)驗(yàn)，即使是千兆電信寬帶，在微軟商店也經(jīng)常碰壁，下載速度以KB/s為單位更是常有的事情。
不過，B站似乎也意識到了在桌面領(lǐng)域的缺失，5月10日B站正式上線了桌面版客戶端，這個客戶端的使用體驗(yàn)到底如何？它又能否取代老舊的UWP版和體驗(yàn)尚存缺陷的網(wǎng)頁版，成為PC用戶的新入口呢？
對于B站的客戶端，小雷和大家最關(guān)心的應(yīng)該就是它能否代替?zhèn)鹘y(tǒng)的網(wǎng)頁端，成為B站用戶的新入口，客戶端的體驗(yàn)又能否改善網(wǎng)頁端上的一些缺陷呢？下面小雷將會對比一下網(wǎng)頁端、客戶端以及UWP版的使用體驗(yàn)，為大家做一個參考。
首先是安裝過程，因?yàn)榫W(wǎng)頁端不需要此步驟，所以網(wǎng)頁端略過，而UWP版和客戶端版本的安裝體驗(yàn)則差別不小。
客戶端版本可以直接從B站的下載頁面里獲取安裝文件，速度方面基本可以跑滿寬帶的下行帶寬，安裝用時不到1分鐘（因電腦配置會有所不同，此處僅供參考）。
而UWP版則需要通過微軟商店安裝，今天的微軟還算給力，只用了半分鐘就完成了安裝程序的下載，自動開始安裝后，程序就十分尷尬的卡在了準(zhǔn)備頁面，在等待約3分鐘后，UWP版的安裝程序終于進(jìn)入到安裝階段，到安裝完成為止，整個過程用時約4分鐘。
單從安裝體驗(yàn)上來說，UWP版顯然被客戶端秒殺，首先微軟商店本身的服務(wù)就存在網(wǎng)絡(luò)問題，而安裝程序的卡頓更是讓小雷頗為費(fèi)解，這是2022年的一款軟件應(yīng)有的表現(xiàn)嗎？
接下來讓我們看看三個桌面端的主頁面觀感如何，網(wǎng)頁端大家應(yīng)該都很熟悉，小雷就不多介紹了，那么來看看UWP版和客戶端。
從主頁面的設(shè)計觀感來說，客戶端明顯要優(yōu)于UWP版，側(cè)邊欄分別是首頁、動態(tài)、我的空間、賬號動態(tài)、黑夜模式和設(shè)置。從功能模塊上來說很簡潔，基本上就是用戶常用到的幾個功能，其中黑夜模式的體驗(yàn)比預(yù)想中要好，確實(shí)是做到了全局設(shè)置。
（網(wǎng)頁端）
（客戶端）
（UWP版）
簡單對比后，UWP版的字體就讓小雷繃不住了，死亡芭比粉的配色加上突兀的字體風(fēng)格，讓這個官方UWP版客戶端看起來就像是一個大學(xué)生畢業(yè)作品，而且還是做得并不好的那種。而且，UWP版的界面布局一定程度上借鑒了網(wǎng)頁端，只不過右上角改為直播間推薦，下面才是個性化視頻推薦。
單從頁面的整潔度和便利度來看，客戶端暫時在小雷這里可以排第一，因?yàn)閭€性化推薦確實(shí)是小雷的剛需，而這個體驗(yàn)是網(wǎng)頁端無法提供的。但是，即使網(wǎng)頁端缺失好用的個性化推薦模塊，但是UWP版的“死亡芭比粉”設(shè)計也足以勸退小雷。
而且，客戶端的分區(qū)也更加合理，UWP版的分區(qū)給人一種明顯的混亂感，不僅僅是因?yàn)樵O(shè)計上的問題，提供的內(nèi)容篇幅占比也給人一種眼花繚亂的感覺，讓用戶很難快速找到自己想要看的視頻。
這一點(diǎn)主要體現(xiàn)在追番、影視兩個模塊，可以看到設(shè)計的水平有著明顯區(qū)別。
（UWP版）
（客戶端）
從UI設(shè)計來說，B站的客戶端版本對比UWP版有著明顯的改進(jìn)，不管是啟動速度還是UI設(shè)計都改善了許多，對于用戶來說這是一個真正可以正常使用的桌面客戶端，而不是UWP那樣的半成品。
看完UI設(shè)計，讓我們看看播放體驗(yàn)。
加載速度方面區(qū)別并不大，不過網(wǎng)頁端在一些硬件上會出現(xiàn)BUG，當(dāng)用戶打開Chrome等瀏覽器的硬件加速時，全屏觀看視頻有概率出現(xiàn)間歇性黑屏的問題。該問題還會出現(xiàn)在打開全屏和取消全屏的時候，并且當(dāng)鼠標(biāo)接近畫面邊緣也會出現(xiàn)，小雷猜測B站的視頻播放器與Chrome內(nèi)核的硬件加速功能在某些硬件上存在BUG。
而這個問題小雷在UWP版和客戶端上并沒有遇到，如果有用戶飽受黑屏問題的折磨，那么小雷建議你嘗試一下新推出的客戶端。
回到視頻播放體驗(yàn)上，客戶端的播放器采用單獨(dú)窗口設(shè)計，提供前進(jìn)和后退的記憶功能，同時可以讓播放器以小窗模式打開，將僅保留視頻畫面且支持自由放大和縮小，同時還提供了固定在最前列的功能，可以為用戶提供更好的摸魚體驗(yàn)。
而網(wǎng)頁版該有的播放器功能，客戶端的播放器都有提供，比如字幕、播放設(shè)置等，而UWP版并沒有提供以上功能，僅有簡單的倍速、字幕設(shè)置。
不過，在客戶端上，小雷依然沒有發(fā)現(xiàn)移動端支持的HDR畫面模式，不得不說是一個遺憾，也讓客戶端和網(wǎng)頁端的體驗(yàn)沒有本質(zhì)上的區(qū)別，如果是對個性化視頻推薦和桌面小窗口播放功能不太感興趣的用戶，可以繼續(xù)使用網(wǎng)頁端。
可以說，B站的客戶端確實(shí)是從UWP版的“難用”直接跨越到了“好用”的階段，小雷現(xiàn)在的日常使用已經(jīng)是從網(wǎng)頁端轉(zhuǎn)移到了客戶端，只不過客戶端目前顯然還無法完全取代網(wǎng)頁端。
首先是游戲中心、會員購、漫畫、賽事等模塊在客戶端上是不存在的，用戶想要使用還是需要打開網(wǎng)頁端，而且大會員、創(chuàng)作中心、消息、投稿等功能在客戶端上也是沒有的。簡單來說，客戶端版本目前只能作為一個單純的B站視頻播放器來使用，很多功能都有待后續(xù)完善。
不過，小雷最滿意的一點(diǎn)是客戶端沒有網(wǎng)頁端的橫幅廣告，也沒有移動端的“廣告”視頻，是目前最干凈。
上線新的客戶端，而且明顯比之前的UWP版更加用心（當(dāng)然也有消息稱是B站直接收購了一個魔改客戶端版本，業(yè)界稱之為“招安”），B站顯然不是為了給用戶多提供一個觀看通道這么簡單，畢竟從目前的B站用戶使用習(xí)慣來看，重心已經(jīng)逐漸轉(zhuǎn)向移動端，而網(wǎng)頁端作為一個補(bǔ)充雖然有一些缺陷，但是整體來說是完善的。
那么B站的目的是什么？小雷認(rèn)為是為用戶提供更好的播放體驗(yàn)，前面小雷就提到網(wǎng)頁端因?yàn)椴シ牌骺丶蜑g覽器版本之間的沖突，視頻觀看體驗(yàn)有時候會十分糟糕。而在客戶端上，B站只要保證客戶端本身不出現(xiàn)BUG即可，不會因?yàn)槠渌蛩囟鴮?dǎo)致嚴(yán)重影響體驗(yàn)的問題出現(xiàn)。
另外，網(wǎng)頁端的在線播放器存在不少的限制，未來將越來越難以支撐B站的視頻畫質(zhì)升級計劃，而客戶端可以定制一個功能更強(qiáng)大的播放器模塊，讓其在未來能夠支持諸如HDR、杜比視界、杜比全景聲等功能。
（圖為愛奇藝客戶端）
其實(shí)在長視頻網(wǎng)站中，B站的客戶端可以說是上線最遲的，對比騰訊、愛奇藝、優(yōu)酷，算是視頻巨頭里最后推出正經(jīng)客戶端的網(wǎng)站。B站姍姍來遲的原因，小雷認(rèn)為有兩個，一是B站視頻長期以用戶自制為主，對各種影音模式和畫質(zhì)要求并不高，二是B站用戶大多是新生代的移動互聯(lián)網(wǎng)用戶，他們更鐘情于移動端，而傳統(tǒng)的PC用戶網(wǎng)頁端已經(jīng)能夠滿足需求。
不過，隨著B站的版權(quán)計劃啟動，近年來B站已經(jīng)購入了大量的電影、電視劇、綜藝和紀(jì)錄片的版權(quán)，而這些正版影視版權(quán)帶來的不僅是更豐富的內(nèi)容，同時也有更好的影音體驗(yàn)，而網(wǎng)頁端顯然無法提供完善的影音體驗(yàn)，B站需要一個額外的桌面端為PC用戶提供更好的體驗(yàn)。
雖然B站以UGC內(nèi)容起家，未來也依然會以UGC內(nèi)容為核心擴(kuò)展自己的領(lǐng)域，但是正版影視所帶來的用戶增量也是B站不能忽視的。為不同設(shè)備的用戶提供更完善且相近的體驗(yàn)，能夠有效增加B站的用戶黏性，讓用戶不會因?yàn)榫W(wǎng)頁端的功能缺失而選擇愛奇藝、騰訊等桌面客戶端觀看電影。
不停收購版權(quán)的B站顯然打算攻入愛優(yōu)騰的腹地，打造一個以UGC內(nèi)容為主，同時兼顧自制動畫、綜藝和版權(quán)影視劇的全領(lǐng)域視頻網(wǎng)站。小雷認(rèn)為，如果B站真的能夠走通這條路，將會成為國內(nèi)視頻網(wǎng)站最具競爭力的存在，能夠同時服務(wù)于多個用戶群體，滿足不同人群的視頻需求。
隨著視頻網(wǎng)站之間的戰(zhàn)火越發(fā)激烈，愛奇藝、騰訊、優(yōu)酷、B站的各種動作都表明在未來的一段時間里，國內(nèi)的視頻網(wǎng)站競爭將會達(dá)到一個新的高峰，誰能夠?yàn)橛脩籼峁└玫膬?nèi)容和體驗(yàn)，誰就能夠從中脫穎而出。