kentico youtube webpart used within slick.js -

-

i have repeater out puts panels slide show plugin, slick.js. far, things working planned.

the user, when creating custom page, enters in copy, either , image, video media library, or link tube.

what i'm trying write js function fire when user clicks play on youtube video.

the webpart injects youtube video via iframe method.

here's transformation:

<section class="slide">      <div class="copy">          <%# eval("slidecontent") %>      </div>      <asp:placeholder runat='server' id='slideimage' visible='<%# ifempty( eval("slideimage"), false, true )  %>'>          <div class="img">              <img class="img-responsive" src="<%# eval(" slideimage ") %>" alt="<%# eval(" slidecontent ") %>">          </div>      </asp:placeholder>      <asp:placeholder runat='server' id='slidevideo' visible='<%# ifempty( eval("slidevideo"), false, true )  %>'>          <div class='videoholder html5'>              <video id='video' class='html5video' controls>                  <source src='<%# eval("slidevideo") %>'>              </video>          </div>      </asp:placeholder>      <asp:placeholder runat='server' id='youtubevideo' visible='<%# ifempty( eval("youtubevideo"), false, true )  %>'>          <%@ register src="~/cmswebparts/media/youtubevideo.ascx" tagname="youtubevideo" tagprefix="webpart" %>              <div class='videoholder yt'>                  <webpart:youtubevideo runat="server" id="youtubevideowebpart" cssclass="ytvideo" videourl='<%# resolvemacros(eval("youtubevideo").tostring())%>' fullscreen='true' />              </div>      </asp:placeholder>  </section>

and here js (this includes code pause videos if slider changes)

$(function () {    'use strict';    var $slider = $('.slider'),      $slickjs = '/kffintranet/ui/bower_components/slick-carousel/slick/slick.min.js';      // check slider on page    if ($slider.length !== 0) {        // if there slider, load slick.js plugin      $.getscript($slickjs, function () {        // init  slider        $slider.slick({          dots: true,          infinite: true,          speed: 300,          slidestoshow: 1,          slidestoscroll: 1,          fade: false,          lazyload: 'ondemand',          adaptiveheight: true,          autoplay: true,          autoplayspeed: 5000,          responsive: [{              breakpoint: 1024,              settings: {}            }, {              breakpoint: 600,              settings: {}            }, {              breakpoint: 480,              settings: {                arrows: false              }            }            // can unslick @ given breakpoint adding:            // settings: "unslick"            // instead of settings object          ]        });      });        //        // video control. if slide has video, need pause        //bind our event here, gets current slide , pauses video before each slide changes.      $slider.on('beforechange', function (event, slick) {        var currentslide, player, command, videotype;          //find current slide element , decide player api need use.        currentslide = $(slick.$slider).find('.slick-current');          //determine type of slide looking video holder getting video type class        if (currentslide.find('.videoholder').length) {          videotype = $('.videoholder', currentslide).attr('class').split(' ')[1];          //get iframe inside slide.          player = currentslide.find('iframe').get(0);        }        // pause videos        if (videotype === 'yt') {          command = {            'event': 'command',            'func': 'pausevideo'          };          player.contentwindow.postmessage(json.stringify(command), '*');        } else if (videotype === 'html5') {          document.getelementbyid('video').pause();        }        });        // pause slider if video playing      // html 5 video click      $('.html5video').on('click', function () {        var $video = $(this).get(0);        // control pause play state of video        if ($video.paused) {          $video.play();        } else {          $video.pause();        }        // call slide pause function        pauseslide();      });      // youtube play      $('.ytvideo iframe').on('click', function () {        // call slide pause function        pauseslide();      });    }      // puse slider function    function pauseslide() {      $slider.slick('slickpause');      console.log('pause');    }  });

so i've created function pauseslide pause slider, i'm struggling capturing youtube play click.

check answer out. suggests using youtube iframe api.

<!doctype html> <html> <head> <script src="https://www.youtube.com/iframe_api"></script> </head> <body> <div id='vidwrapper'> <!-- <iframe> (and video player) replace <div> tag. --> <div id="ytplayer"></div> </div> <script> var player; function onyoutubeiframeapiready() { player = new yt.player('ytplayer', { height: '390', width: '640', videoid: 'm7lc1uvf-ve', events: { 'onstatechange': function(event) { if (event.data == yt.playerstate.playing) { pauseaudio(); } } } }); } function pauseaudio() { ... } </script> </body> </html>

Comments

Post a Comment

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

-
i created grid in admin xml ui components. need filter collection via url parameter , dont know how achieve that. tried inject requestinterface collection, filter didnt work. di.xml <virtualtype name="slidelistingdataprovider" type="magento\framework\view\element\uicomponent\dataprovider\dataprovider"> <arguments> <argument name="collection" xsi:type="object" shared="false">xxx\xxx\model\resourcemodel\grid\slide\collection</argument> <argument name="filterpool" xsi:type="object" shared="false">slidelistingfilterpool</argument> <!-- define new object filters --> </arguments> </virtualtype> <virtualtype name="slidelistingfilterpool" type="magento\framework\view\element\uicomponent\dataprovider\filterpool"> <arguments> <argument name="applier...
Read more

Android volley - avoid multiple requests of the same kind to the server? -

-
i using volley upload list of images server. happens within service. once image uploaded remove list. problem arises when internet connection breaks. when internet connection breaks , comes again thinking of adding images yet uploaded request queue. this can result in more 1 copy of same image saved on server request same image might have gone through before getting rseponse. how can address scenario? i'm not quite sure why you're using service schedule requests volley automatically runs it's request in seperate thread. nevertheless can listen both request results, successful , unsuccessful adding listeners. you can remove image list schedule request using volley. if succeeds can carry on desired, if fails can add again list. public static request getimageuploadrequest(final string image) { response.listener<t> responselistener = new response.listener<t>() { @override public void onresponse(t response...
Read more

Combining PHP Registration and Login into one class with multiple functions in one PHP file -

-
i'm trying combine registration, activation , login scripts php website backend script front end developer can pass variables different forms to. my question whether appropriate approach this. don't want have lot of php files different pieces of application developing. far have written following 2 functions login, register , activate user front end developer can call: <?php /** * created phpstorm. * user: karl * date: 26/07/2016 * time: 02:25 */ class users { function register_user($email, $password, $user_name) { $server_name = "localhost"; $u_name = "root"; $db_password = "root"; $db_name = "betamath_graspe"; //email notification variable $from_address="info@slack.com"; //registration form $msg_reg_user='username taken. please choose different username'; $msg_reg_email='email registered'; $msg_reg_active=...
Read more