本文作者：星空無(wú)限
原文鏈接：https://liyangzone.com/2020/09/20/%E5%89%8D%E7%AB%AF/sync-player/
GoEasy已獲作者授權(quán)轉(zhuǎn)載芽死，GoEasy轉(zhuǎn)載時(shí)有改動(dòng)鸟召，感謝作者的分享饥努。
前段時(shí)間我有這樣一個(gè)需求拧额，想和一個(gè)異地的人一起看電影来氧，先后在網(wǎng)上找了一些方案舒憾，不過(guò)那幾個(gè)案都有一些缺點(diǎn)
coplay: 一個(gè)瀏覽器插件，只能播放各大視頻網(wǎng)站的視頻居灯，視頻資源有限祭务，我想要看的視頻沒(méi)有内狗，比如一些經(jīng)典電影和美劇之類
微光APP: 還是上面的問(wèn)題，而且只有手機(jī)端
向日葵等遠(yuǎn)程桌面: 受限于網(wǎng)絡(luò)問(wèn)題义锥，卡頓很嚴(yán)重柳沙，體驗(yàn)不好
作為一個(gè)對(duì)用戶體驗(yàn)有追求的切圖仔，我是一個(gè)下載黨拌倍，看電影必須下載到本地看赂鲤，基本不看視頻網(wǎng)站上的玩意
那么有沒(méi)有能實(shí)現(xiàn)同步播放本地文件的方案呢，答案是肯定的柱恤，經(jīng)過(guò)我的一些摸索和研究数初，我實(shí)現(xiàn)了本地文件的同步播放，同時(shí)支持PC和手機(jī)端梗顺，而且還支持外掛字幕等高級(jí)功能泡孩，如何實(shí)現(xiàn)請(qǐng)往下看。
功能介紹&特性：
一個(gè)可以同步看視頻的播放器荚守，可用于異地同步觀影珍德、觀劇，支持多人同時(shí)觀看矗漾。
本項(xiàng)目有兩個(gè)版本锈候，web版運(yùn)行在瀏覽器上，可跨平臺(tái)敞贡，不限操作系統(tǒng)泵琳、設(shè)備，功能簡(jiǎn)單適用于要求不高的用戶誊役。還有基于SPlayer(射手影音)DIY的客戶端版本(windows获列、MAC)，播放4K高清文件蛔垢、外掛字幕击孩，統(tǒng)統(tǒng)沒(méi)問(wèn)題。
演示demo:
web版同步效果
客戶端與web版同步效果
原理：
基于websocket實(shí)現(xiàn)鹏漆，與一些用websocket實(shí)現(xiàn)的聊天室類似巩梢，只不過(guò)這個(gè)聊天室里的消息換成了播放暫停的動(dòng)作和時(shí)間信息，客戶端收到消息后執(zhí)行相應(yīng)的動(dòng)作:播放艺玲、暫停括蝠、快進(jìn)，以達(dá)到同時(shí)播放的效果饭聚。
項(xiàng)目所用到的
- node.js
- socketio
- HTML5 video API
- vue.js
如何使用：
本項(xiàng)目的核心是websocket忌警，所以至少需要一臺(tái)服務(wù)器提供websocket服務(wù)，websocket服務(wù)可以自己部署秒梳，可以使用第三方平臺(tái)GoEasy提供的websocket服務(wù)法绵。
1箕速、自己部署：
websocket服務(wù)器可以是一臺(tái)具有公網(wǎng)IP的云服務(wù)器，也可以是一臺(tái)具有公網(wǎng)IP的普通PC礼烈，沒(méi)有公網(wǎng)IP也可以弧满。你也可以使用zerotier或其他VPN工具將兩臺(tái)設(shè)備組成一個(gè)大局域網(wǎng)婆跑，讓它們能互相通信此熬。websocket服務(wù)器操作系統(tǒng)不限，只要有node.js環(huán)境滑进。
websocket服務(wù)端部署方法：安裝node.js環(huán)境犀忱，將server目錄移動(dòng)到服務(wù)器上，進(jìn)入server目錄扶关，執(zhí)行以下命令：
安裝項(xiàng)目依賴包
# 安裝項(xiàng)目依賴包
npm install
# 啟動(dòng)websocket服務(wù)
node index.js
2阴汇、使用GoEasy的websocket服務(wù)
注冊(cè)GoEasy開發(fā)者賬號(hào)并創(chuàng)建一個(gè)應(yīng)用，獲得appkey节槐，復(fù)制到本項(xiàng)目相應(yīng)位置即可搀庶。
GoEasy官網(wǎng)：https://www.goeasy.io
無(wú)論是使用哪種websocket服務(wù)都可以，本項(xiàng)目寫了兩套代碼铜异，只需將不用的那套注釋掉即可(默認(rèn)GoEasy)哥倔。
除了websocket服務(wù)器之外，還需要兩個(gè)http服務(wù)端揍庄，一個(gè)是web服務(wù)端(提供html咆蒿、css、js等文件的訪問(wèn))蚂子，一個(gè)是視頻服務(wù)端(提供視頻文件訪問(wèn))沃测。
你可以將web服務(wù)部端署到以下位置：
- 具有公網(wǎng)IP的服務(wù)器
- github-pages或國(guó)內(nèi)的碼云提供的靜態(tài)web服務(wù)
- localhost(本地服務(wù)器)，同一個(gè)局域網(wǎng)內(nèi)的設(shè)備訪問(wèn)該服務(wù)器內(nèi)網(wǎng)IP
視頻文件只需一個(gè)視頻地址就行食茎，也有以下幾種選擇：
- 具有公網(wǎng)IP的服務(wù)器
- localhost(本地服務(wù)器)蒂破，同一個(gè)局域網(wǎng)內(nèi)的設(shè)備訪問(wèn)該服務(wù)器內(nèi)網(wǎng)IP
- 第三方視頻地址
使用場(chǎng)景1：
云服務(wù)器帶寬足夠大(至少要大于播放視頻的碼率)，云服務(wù)器既可以作為websocket服務(wù)端别渔，也可以作為http服務(wù)端附迷。上圖中所有設(shè)備都訪問(wèn)云服務(wù)器的ip或域名。
使用場(chǎng)景2：
云服務(wù)器的帶寬很小钠糊，這時(shí)候它只能作為websocket服務(wù)端挟秤，這時(shí)可以用上圖中的PC1和PC2作為http服務(wù)端，PC1和PHONE1在一個(gè)內(nèi)網(wǎng)訪問(wèn)PC1的內(nèi)網(wǎng)IP抄伍，PC2和PHONE2在一個(gè)內(nèi)網(wǎng)訪問(wèn)PC2的內(nèi)網(wǎng)IP艘刚，PC3可作為自己的http服務(wù)端，PHONE3若是有提供視頻文件的服務(wù)端截珍，也可以使用攀甚。
使用場(chǎng)景3：
需要使用zerotier或其他VPN工具將異地設(shè)備組成一個(gè)大局域網(wǎng)箩朴，其中任意一臺(tái)PC均可作為websocket服務(wù)端和http服務(wù)端(需要上傳帶寬足夠大)。上圖中各設(shè)備都訪問(wèn)那臺(tái)PC的內(nèi)網(wǎng)ip即可秋度。
最簡(jiǎn)單的使用方法炸庞，下載nginx開啟一個(gè)本地服務(wù)器，下載本項(xiàng)目client文件夾放到到nginx根目錄里荚斯，視頻文件也放到里面埠居。注冊(cè)goeasy開發(fā)者賬號(hào)并創(chuàng)建一個(gè)應(yīng)用，獲得appkey事期，并填入到appkey到代碼(script/main.js)相應(yīng)位置滥壕。然后瀏覽器打開 192.168.3.58/client/，填入你的視頻地址192.168.3.58/movie/xxx.mp4或網(wǎng)絡(luò)視頻地址兽泣，對(duì)方也這樣操作一番绎橘，即可實(shí)現(xiàn)同步播放視頻。
web版本的功能比較簡(jiǎn)單唠倦，而且受限于網(wǎng)絡(luò)問(wèn)題称鳞，快進(jìn)之類的操作需要緩沖一段時(shí)間。如果你不滿足web版功能稠鼻，對(duì)用戶體驗(yàn)有更高的要求冈止，如支持更多文件格式、播放高清本地視頻文件枷餐、外掛字幕等靶瘸，我也找到了另一種方式來(lái)滿足你的需求。
那就是DIY一個(gè)開源的播放器的源碼：SPlayer(射手影音)毛肋。
射手影音官網(wǎng)：https://splayer.org
源碼地址：https://github.com/chiflix/splayerx
在以electron + 播放器為關(guān)鍵字一番搜索之后怨咪，我找到了這個(gè)基于electron實(shí)現(xiàn)的開源播放器，并下載了源碼來(lái)研究润匙。
經(jīng)過(guò)一番研究之后诗眨，我找到了控制視頻播放、暫停孕讳、快進(jìn)的代碼位置匠楚，并將控制同步的代碼移植了進(jìn)去，從而也實(shí)現(xiàn)了同步功能厂财，并且與web版兼容芋簿。
具體方法請(qǐng)看：修改教程
本項(xiàng)目部分圖標(biāo)樣式來(lái)源于此項(xiàng)目: coplay
本項(xiàng)目github地址：點(diǎn)擊前往 ，歡迎???STAR???
關(guān)于GoEasy：
GoEasy是一個(gè)成熟穩(wěn)定的企業(yè)級(jí)websocket PAAS服務(wù)平臺(tái)璃饱，開發(fā)人員不需要考慮websocket服務(wù)端的搭建与斤，只需要幾行代碼，就可以輕松實(shí)現(xiàn)客戶端與客戶端之間，服務(wù)器與客戶端之間的的websocket通信撩穿。
GoEasy作為國(guó)內(nèi)領(lǐng)先的第三方websocket消息推送平臺(tái)磷支，具備極佳的兼容性。除了兼容所有常見的瀏覽器以外食寡，同時(shí)也兼容uni-app雾狈，各種小程序，以及vue抵皱、react-native善榛、cocos、laya叨叙、egret等常見的前端框架锭弊。
同時(shí)GoEasy已經(jīng)內(nèi)置websocket中必備的心跳，斷網(wǎng)重連擂错，消息補(bǔ)發(fā)，歷史消息和客戶端上下線提醒等特性樱蛤，開發(fā)人員也不需要自己搭建websocket服務(wù)處理集群高可用钮呀，安全和性能問(wèn)題。GoEasy已經(jīng)穩(wěn)定運(yùn)行了5年昨凡，支持千萬(wàn)級(jí)并發(fā)爽醋，成功支撐過(guò)很多知名企業(yè)的重要活動(dòng)，安全性和可靠性都是久經(jīng)考驗(yàn)便脊。
有興趣自己搭建websocket的話蚂四，可以參考這篇技術(shù)分享《搭建websocket消息推送服務(wù)，必須要考慮的幾個(gè)問(wèn)題》
