Как добавить кнопку отключения звука в фоновом режиме YouTube слайдер Rev - PullRequest
0 голосов
/ 16 марта 2020

Hy, мне нужно добавить, что у меня есть фоновое видео на YouTube. он настроен на автозапуск. в качестве chrome правил состояния автозапуска фоновых видеороликов не может быть аудио. поэтому мне нужно добавить кнопку отключения звука и включения звука, чтобы включить или отключить звук. Так что любой может помочь мне добавить эту кнопку.

<div  class="rs-background-video-layer"
            id="slide-2898-layer-11" 
             data-forcerewind="on" data-volume="1" data-ytid="xAEGDMeYz-Y" data-videoattributes="version=3&amp;enablejsapi=1&amp;html5=1&amp;hd=1&amp;volume=1;wmode=opaque&amp;showinfo=0&amp;rel=0;" data-videorate="1"

              data-videowidth="100%" data-videoheight="100%" data-videocontrols="controls" data-videostartat="00:00" data-videoendat="02:00" data-videoloop="loop" data-forceCover="1" data-aspectratio="16:9" data-autoplay="false"
              data-autoplayonlyfirsttime="false">
              </div>
            <!-- LAYER NR. 1 -->
            <div class="tp-caption tp-shape tp-shapewrapper  " id="slide-2898-layer-10" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
              data-width="full"  data-height="full" data-whitespace="nowrap" data-type="shape" data-basealign="slide" data-responsive_offset="on" data-responsive="off" data-frames='[{"from":"opacity:0;","speed":1500,"to":"o:1;","delay":750,"ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"ease":"nothing"}]'
              data-textAlign="['left','left','left','left']"     data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 5;text-transform:left;background-color:rgba(0, 0, 0, 0.25);border-color:rgba(0, 0, 0, 0.50);border-width:0px;">
            </div>

Это код html ползунка оборотов. У меня есть только одно видео на YouTube в качестве фона. javascript.

<script type="text/javascript">
      var tpj = jQuery;

      var revapi1042;
      tpj(document).ready(function() {
        if (tpj("#rev_slider_1042_1").revolution == undefined) {
          revslider_showDoubleJqueryError("#rev_slider_1042_1");
        } else {
          revapi1042 = tpj("#rev_slider_1042_1").show().revolution({
            sliderType: "standard",
            jsFileLocation: "revolution/js/",
            sliderLayout: "fullwidth",
            dottedOverlay: "none",
            delay: 9000,
            navigation: {
              onHoverStop: "off",
            },
            responsiveLevels: [1240, 1024, 778, 480],
            visibilityLevels: [1240, 1024, 778, 480],
            gridwidth: [1240, 1024, 778, 480],
            gridheight: [900, 500, 400, 270],
            lazyType: "none",
            parallax: {
              type: "scroll",
              origo: "slidercenter",
              speed: 2000,
              levels: [2, 3, 4, 5, 6, 7, 12, 16, 10, 50, 46, 47, 48, 49, 50, 55],
              type: "scroll",
            },
            viewPort: {
              enable: true,
              outof: 'pause',
              visible_area: '30%',
              presize: true
          },
            shadow: 0,
            spinner: "off",
            stopLoop: "on",
            stopAfterLoops: 0,
            stopAtSlide: 1,
            shuffle: "off",
            autoHeight: "off",
            disableProgressBar: "on",
            hideThumbsOnMobile: "off",
            hideSliderAtLimit: 0,
            hideCaptionAtLimit: 0,
            hideAllCaptionAtLilmit: 0,
            debugMode: false,
            fallbacks: {
              simplifyAll: "off",
              nextSlideOnWindowFocus: "off",
              disableFocusListener: false,
            }
          });
          revapi1042.on('revolution.slide.onvideoplay', function(event, data) {
            var player = $('#slide-2898-layer-11').data('player');

            player.unMute();
            player.setVolume(100);
          });
        }
      }); /*ready*/
    </script>
...