Is it possible to stop/pause video on iframe?

前端未结

关注

 3  1853

不要未来只要你来 2021-01-22 22:25

This is the video

 </script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5408099190056760"
     data-ad-slot="7305827575"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>        </div>
      </div>
      
      <div class="fly-panel detail-box" id="flyReply">
        <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
          <legend>3条回答</legend>        </fieldset>

        <ul class="jieda" id="jieda">
                    <li data-id="111" class="jieda-daan">
            <a name="item-1111111111"></a>
            <div class="detail-about detail-about-reply">
                         <a class="fly-avatar" href="">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000097.jpg" alt=" 天涯浪人 ">
              </a>
              <div class="fly-detail-user">
                <a href="" class="fly-link">
                  <cite> 天涯浪人</cite>
                                             
                </a>
                
                <span>(楼主)</span>
            
              </div>              <div class="detail-hits">
                <span>2021-01-22 22:57</span>
              </div>

            </div>
            <div class="detail-body jieda-body photos">
              <p>          
<p>I am giving you the solution for what i did to stop, play pause a video in a video gallery using this html and JS code.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    <script>
      var slideIndexVid = 1;
      showSlidesVid(slideIndexVid);
      
      function plusSlidesVid(n) {

        
        showSlidesVid(slideIndexVid += n);
      }
      
      function currentSlideVid(n) {
        showSlidesVid(slideIndexVid = n);
      }
      
      function showSlidesVid(n) {
        var i;
        var slidesVid = document.getElementsByClassName("vid-slides");
        var dotsVid = document.getElementsByClassName("dot-vid");

       
        $('#vidS1')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
        $('#vidS2')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
        $('#vidS3')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
        $('#vidS4')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
        $('#vidS5')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
        $('#vidS6')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
        
        
        if (n > slidesVid.length) {slideIndexVid = 1}
        if (n < 1) {slideIndexVid = slidesVid.length}
        for (i = 0; i < slidesVid.length; i++) {
          slidesVid[i].style.display = "none";
        }
        for (i = 0; i < dotsVid.length; i++) {
            dotsVid[i].className = dotsVid[i].className.replace(" active-vid", "");
        }
        
        slidesVid[slideIndexVid-1].style.display = "block";
        dotsVid[slideIndexVid-1].className += " active-vid";      
      }  
    </script></code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="video-container">
      <h2>Our Demo Sessions</h2>
      <div class="vid-slides">
        <iframe id="vidS1" src="https://www.youtube.com/embed/PGW3lgbGFc8?rel=0&&enablejsapi=1" frameborder="0" enablejsapi allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>