本文作者：星空無限
原文鏈接：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⭐⭐⭐
關於GoEasy：
GoEasy是一個成熟穩定的企業級websocket PAAS服務平台，開發人員不需要考慮websocket服務端的搭建，只需要幾行代碼，就可以輕松實現客戶端與客戶端之間，服務器與客戶端之間的的websocket通信。
GoEasy作為國內領先的第三方websocket消息推送平台，具備極佳的兼容性。除了兼容所有常見的瀏覽器以外，同時也兼容uni-app，各種小程序，以及vue、react-native、cocos、laya、egret等常見的前端框架。
同時GoEasy已經內置websocket中必備的心跳，斷網重連，消息補發，歷史消息和客戶端上下線提醒等特性，開發人員也不需要自己搭建websocket服務處理集群高可用，安全和性能問題。GoEasy已經穩定運行了5年，支持千萬級並發，成功支撐過很多知名企業的重要活動，安全性和可靠性都是久經考驗。
有興趣自己搭建websocket的話，可以參考這篇技術分享《搭建websocket消息推送服務，必須要考慮的幾個問題》