本文作者：星空無限

原文鏈接：https://liyangzone.com/2020/09/20/前端/sync-player/

GoEasy已獲作者授權(quán)轉(zhuǎn)載，GoEasy轉(zhuǎn)載時有改動，感謝作者的分享。

前段時間我有這樣一個需求，想和一個異地的人一起看電影，先后在網(wǎng)上找了一些方案，不過那幾個案都有一些缺點

coplay: 一個瀏覽器插件，只能播放各大視頻網(wǎng)站的視頻，視頻資源有限，我想要看的視頻沒有，比如一些經(jīng)典電影和美劇之類
微光App: 還是上面的問題，而且只有手機(jī)端
向日葵等遠(yuǎn)程桌面: 受限于網(wǎng)絡(luò)問題，卡頓很嚴(yán)重，體驗不好

作為一個對用戶體驗有追求的切圖仔，我是一個下載黨，看電影必須下載到本地看，基本不看視頻網(wǎng)站上的玩意

那么有沒有能實現(xiàn)同步播放本地文件的方案呢，答案是肯定的，經(jīng)過我的一些摸索和研究，我實現(xiàn)了本地文件的同步播放，同時支持PC和手機(jī)端，而且還支持外掛字幕等高級功能，如何實現(xiàn)請往下看。

功能介紹&特性：

一個可以同步看視頻的播放器，可用于異地同步觀影、觀劇，支持多人同時觀看。本項目有兩個版本，web版運(yùn)行在瀏覽器上，可跨平臺，不限操作系統(tǒng)、設(shè)備，功能簡單適用于要求不高的用戶。還有基于SPlayer(射手影音)diy的客戶端版本(windows、mac)，播放4K高清文件、外掛字幕，統(tǒng)統(tǒng)沒問題。

演示demo:

web版同步效果

客戶端與web版同步效果

原理：

基于websocket實現(xiàn)，與一些用websocket實現(xiàn)的聊天室類似，只不過這個聊天室里的消息換成了播放暫停的動作和時間信息，客戶端收到消息后執(zhí)行相應(yīng)的動作:播放、暫停、快進(jìn)，以達(dá)到同時播放的效果。

項目所用到的

node.js
socketio
html5 video API
vue.js

如何使用：

本項目的核心是websocket，所以至少需要一臺服務(wù)器提供websocket服務(wù)，websocket服務(wù)可以自己部署，可以使用第三方平臺GoEasy提供的websocket服務(wù)。

1、自己部署：

websocket服務(wù)器可以是一臺具有公網(wǎng)IP的云服務(wù)器，也可以是一臺具有公網(wǎng)IP的普通PC，沒有公網(wǎng)IP也可以。你也可以使用zerotier或其他VPN工具將兩臺設(shè)備組成一個大局域網(wǎng)，讓它們能互相通信。websocket服務(wù)器操作系統(tǒng)不限，只要有node.js環(huán)境。

websocket服務(wù)端部署方法：安裝node.js環(huán)境，將server目錄移動到服務(wù)器上，進(jìn)入server目錄，執(zhí)行以下命令：

安裝項目依賴包

# 安裝項目依賴包

npm install 

# 啟動websocket服務(wù)

node index.js

2、使用GoEasy的websocket服務(wù)

注冊GoEasy開發(fā)者賬號并創(chuàng)建一個應(yīng)用，獲得appkey，復(fù)制到本項目相應(yīng)位置即可。

GoEasy官網(wǎng)：https://www.goeasy.io

無論是使用哪種websocket服務(wù)都可以，本項目寫了兩套代碼，只需將不用的那套注釋掉即可(默認(rèn)GoEasy)。

除了websocket服務(wù)器之外，還需要兩個http服務(wù)端，一個是web服務(wù)端(提供html、css、js等文件的訪問)，一個是視頻服務(wù)端(提供視頻文件訪問)。

你可以將web服務(wù)部端署到以下位置：

具有公網(wǎng)IP的服務(wù)器
github-pages或國內(nèi)的碼云提供的靜態(tài)web服務(wù)
localhost(本地服務(wù)器)，同一個局域網(wǎng)內(nèi)的設(shè)備訪問該服務(wù)器內(nèi)網(wǎng)IP

視頻文件只需一個視頻地址就行，也有以下幾種選擇：

具有公網(wǎng)IP的服務(wù)器
localhost(本地服務(wù)器)，同一個局域網(wǎng)內(nèi)的設(shè)備訪問該服務(wù)器內(nèi)網(wǎng)IP
第三方視頻地址

使用場景1：

云服務(wù)器帶寬足夠大(至少要大于播放視頻的碼率)，云服務(wù)器既可以作為websocket服務(wù)端，也可以作為http服務(wù)端。上圖中所有設(shè)備都訪問云服務(wù)器的ip或域名。

使用場景2：

云服務(wù)器的帶寬很小，這時候它只能作為websocket服務(wù)端，這時可以用上圖中的PC1和PC2作為http服務(wù)端，PC1和PHONE1在一個內(nèi)網(wǎng)訪問PC1的內(nèi)網(wǎng)IP，PC2和PHONE2在一個內(nèi)網(wǎng)訪問PC2的內(nèi)網(wǎng)IP，PC3可作為自己的http服務(wù)端，PHONE3若是有提供視頻文件的服務(wù)端，也可以使用。

使用場景3：

需要使用zerotier或其他VPN工具將異地設(shè)備組成一個大局域網(wǎng)，其中任意一臺PC均可作為websocket服務(wù)端和http服務(wù)端(需要上傳帶寬足夠大)。上圖中各設(shè)備都訪問那臺PC的內(nèi)網(wǎng)ip即可。

最簡單的使用方法，下載Nginx開啟一個本地服務(wù)器，下載本項目client文件夾放到到nginx根目錄里，視頻文件也放到里面。注冊goeasy開發(fā)者賬號并創(chuàng)建一個應(yīng)用，獲得appkey，并填入到appkey到代碼(script/main.js)相應(yīng)位置。然后瀏覽器打開 192.168.3.58/client/，填入你的視頻地址192.168.3.58/movie/xxx.mp4或網(wǎng)絡(luò)視頻地址，對方也這樣操作一番，即可實現(xiàn)同步播放視頻。

web版本的功能比較簡單，而且受限于網(wǎng)絡(luò)問題，快進(jìn)之類的操作需要緩沖一段時間。如果你不滿足web版功能，對用戶體驗有更高的要求，如支持更多文件格式、播放高清本地視頻文件、外掛字幕等，我也找到了另一種方式來滿足你的需求。

那就是DIY一個開源的播放器的源碼：SPlayer(射手影音)。

射手影音官網(wǎng)：https://splayer.org

源碼地址：https://github.com/chiflix/splayerx

在以electron + 播放器為關(guān)鍵字一番搜索之后，我找到了這個基于electron實現(xiàn)的開源播放器，并下載了源碼來研究。

經(jīng)過一番研究之后，我找到了控制視頻播放、暫停、快進(jìn)的代碼位置，并將控制同步的代碼移植了進(jìn)去，從而也實現(xiàn)了同步功能，并且與web版兼容。

具體方法請看：修改教程

本項目部分圖標(biāo)樣式來源于此項目: coplay

本項目github地址：點擊前往，歡迎???STAR???

關(guān)于GoEasy：

GoEasy是一個成熟穩(wěn)定的企業(yè)級websocket PAAS服務(wù)平臺，開發(fā)人員不需要考慮websocket服務(wù)端的搭建，只需要幾行代碼，就可以輕松實現(xiàn)客戶端與客戶端之間，服務(wù)器與客戶端之間的的websocket通信。

GoEasy作為國內(nèi)領(lǐng)先的第三方websocket消息推送平臺，具備極佳的兼容性。除了兼容所有常見的瀏覽器以外，同時也兼容uni-app，各種小程序，以及vue、react-native、cocos、laya、egret等常見的前端框架。

同時GoEasy已經(jīng)內(nèi)置websocket中必備的心跳，斷網(wǎng)重連，消息補(bǔ)發(fā)，歷史消息和客戶端上下線提醒等特性，開發(fā)人員也不需要自己搭建websocket服務(wù)處理集群高可用，安全和性能問題。GoEasy已經(jīng)穩(wěn)定運(yùn)行了5年，支持千萬級并發(fā)，成功支撐過很多知名企業(yè)的重要活動，安全性和可靠性都是久經(jīng)考驗。