无法通过单击按钮暂停页面动画

Question

我在这个页面上有一个动画。在生产现场版本中的版本“https://www.accenture.com/us-en/smreferencepages/thoughtleadershiparticle-reference-page"”按钮暂停动画不起作用。尽管你按下按钮，动画仍然继续。下面是页面的链接和图像，这就是我在页面上谈论的动画。

Image of the Animation that I am talking about

编辑:在此阶段版本的网站上，按钮正在工作。在PROD版本的网站上，按钮不起作用。我看了看，一切似乎都是一样的。找不到根本原因。

现场生产：https://www.accenture.com/us-en/smreferencepages/thoughtleadershiparticle-reference-page

这是视频的代码

<video id="ytim-player-videoplayermodule 1" 
src="//acnstg.accenture.com/t20191113T200411Z__w__/us-en/_acnmedia/Thought-Leadership- 
Assets/Videos/Accenture-AI-Built-To-Scale-video.mp4" aria-label="Video: Video: Video Iframe 
Title" class="video-player-youtube video-animation video-animation-stretch" tabindex="-1" 
data-src="//acnstg.accenture.com/t20191113T200411Z__w__/us-en/_acnmedia/Thought-Leadership- 
Assets/Videos/Accenture-AI-Built-To-Scale-video.mp4?rel=0&amp;enablejsapi=1" data-src- 
orig="//acnstg.accenture.com/t20191113T200411Z__w__/us-en/_acnmedia/Thought-Leadership- 
Assets/Videos/Accenture-AI-Built-To-Scale-video.mp4" autoplay="" muted="" playsinline="" 
loop="" data-linkcomponentname="video-player-module" data-analytics-link-name="pause" data- 
linktype="engagement" data-analytics-content-type="cta" data-analytics-module-name="video- 
player-module" data-analytics-link-type="cta" data-analytics-content-class="content" data- 
analytics-engagement="false" aria-hidden="true" style="pointer-events: none;"></video>

这是按钮的代码，当按下该按钮时，应停止动画。

<p class="video-control-focus soundless-playpause-button playBttn ion-ios-pause play-icon 
play-pause-enabled" tabindex="0" data-frame-title="Video: Video Iframe Title" aria- 
label="Video: Video Iframe Title Pause" role="button" data-analytics-link-name="pause" data- 
analytics-engagement="false" data-linktype="cta" data-linkcomponentname="video-player-module" 
data-analytics-module-name="video-player-module"></p>

我使用Google chrome中的google Developer Tools "Ctrl+Shift+I“进行检查。

这个页面上的按钮不工作的原因可能是什么？

该按钮在此实时站点上无法工作的根本原因是什么？

Answer 1

我没有看到任何JS函数来暂停您的按钮代码上的视频，您必须使用这样的代码来执行此操作

视频的超文本标记语言

<video id="ytim-player-videoplayermodule" 
src="//acnstg.accenture.com/t20191113T200411Z__w__/us-en/_acnmedia/Thought-Leadership- 
Assets/Videos/Accenture-AI-Built-To-Scale-video.mp4" aria-label="Video: Video: Video Iframe 
Title" class="video-player-youtube video-animation video-animation-stretch" tabindex="-1" 
data-src="//acnstg.accenture.com/t20191113T200411Z__w__/us-en/_acnmedia/Thought-Leadership- 
Assets/Videos/Accenture-AI-Built-To-Scale-video.mp4?rel=0&amp;enablejsapi=1" data-src- 
orig="//acnstg.accenture.com/t20191113T200411Z__w__/us-en/_acnmedia/Thought-Leadership- 
Assets/Videos/Accenture-AI-Built-To-Scale-video.mp4" autoplay="" muted="" playsinline="" 
loop="" data-linkcomponentname="video-player-module" data-analytics-link-name="pause" data- 
linktype="engagement" data-analytics-content-type="cta" data-analytics-module-name="video- 
player-module" data-analytics-link-type="cta" data-analytics-content-class="content" data- 
analytics-engagement="false" aria-hidden="true" style="pointer-events: none;"></video>

按钮的HTML

<p class="video-control-focus soundless-playpause-button playBttn ion-ios-pause play-icon 
play-pause-enabled" tabindex="0" data-frame-title="Video: Video Iframe Title" aria- 
label="Video: Video Iframe Title Pause" role="button" data-analytics-link-name="pause" data- 
analytics-engagement="false" data-linktype="cta" data-linkcomponentname="video-player-module" 
data-analytics-module-name="video-player-module" onclick="stateVideo();"></p>

JS脚本

function stateVideo()
{
   var vids=document.getElementById('ytim-player-videoplayermodule');
   if(vids.paused) {
      vids.play();
   }
   else
   {
      vids.pause();
   }
}