在进行多视频播放时，要确保所有视频都保持同步是一项重要的任务。本文将介绍如何使用 JavaScript 和 YouTube API 将两个 YouTube 视频保持同步。
步骤
- 创建两个
iframe元素和两个 YouTube 播放器对象：
-- -------------------- ---- -------
------- ------------ ----------- ------------ ----------------------------------------------------------------------
------- ------------ ----------- ------------ ----------------------------------------------------------------------
--------
--- --------
--- --------
-------- ------------------------- -
------- - --- -------------------- -
------- -
---------------- --------------------
-
---
------- - --- -------------------- -
------- -
---------------- --------------------
-
---
-
-------- --------------------------- -
-- ----------- -- ----------------------- -
--------------------
- ---- -- ----------- -- ---------------------- -
---------------------
-
-
-------- --------------------------- -
-- ----------- -- ----------------------- -
--------------------
- ---- -- ----------- -- ---------------------- -
---------------------
-
-
---------- 获取视频的当前时间，然后使用
seekTo将另一个视频调整到相同的时间：
-- -------------------- ---- -------
-------- ------------- -
--- ----------- - -------------------------
--- ----------- - -------------------------
-- --------------------- - ------------ - ---- -
-- ------------ - ------------ -
----------------------------
- ---- -
----------------------------
-
-
-
------------------------ ------ 现在，两个视频将保持同步。您可以通过以下方式启动和暂停两个视频之一：
player1.playVideo(); player2.pauseVideo();
总结
本文介绍了如何使用 JavaScript 和 YouTube API 保持两个视频同步的步骤。通过确保两个视频具有相同的播放状态和当前时间，这个技巧可以应用于任意数量的视频，并且可以用于许多类型的多媒体应用程序。
完整代码：https://codepen.io/chatgpt/pen/jOrJZjK
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27841