本文作者：星空無限

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

GoEasy已獲作者授權轉載，GoEasy轉載時有改動，感謝作者的分享。

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

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

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

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

功能介紹&特性：

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

演示demo:

web版同步效果

客戶端與web版同步效果

原理：

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

項目所用到的

node.js
socketio
html5 video API
vue.js

如何使用：

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

1、自己部署：

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

websocket服務端部署方法：安裝node.js環境，將server目錄移動到服務器上，進入server目錄，執行以下命令：

安裝項目依賴包

# 安裝項目依賴包

npm install 

# 啟動websocket服務

node index.js

2、使用GoEasy的websocket服務

注冊GoEasy開發者賬號并創建一個應用，獲得appkey，復制到本項目相應位置即可。

GoEasy官網：https://www.goeasy.io

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

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

你可以將web服務部端署到以下位置：

具有公網IP的服務器
github-pages或國內的碼云提供的靜態web服務
localhost(本地服務器)，同一個局域網內的設備訪問該服務器內網IP

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

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

使用場景1：

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

使用場景2：

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

使用場景3：

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

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

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

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

射手影音官網：https://splayer.org

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

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

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

具體方法請看：修改教程

本項目部分圖標樣式來源于此項目: coplay

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