How can I start a video once i'm entering the containing viewport?

[Thomas Handorf]

How can I start a video once i'm entering the containing viewport?

[Thomas Handorf]

assuming you have entered the video using the HTML video tag in the HTML code of the text element:

<video id="passionvideo" width="100%" preload="auto" autoplay="">

<source src="/static/dump/429/Marti.mp4" type="video/mp4">

</video>

The video tag has the id "passion video". You can choose your own id but then you have to replace them also in the code below:

in the hacker shell (ctrl+M) select the JS tab. enter:

$(app).on('view_changed', function(e, view) {

  if (view=='passion') {

    if ($('#passionvideo')[0]) setTimeout(function(){

      console.log('play video');

      $('#passionvideo')[0].currentTime = 0;

      $('#passionvideo')[0].play();

      },500);

  }
});

This will start the video "passion video" when you enter the viewport "passion". If your viewport has a different name, change it in the second line of above code.

[Shaun Ramkelawon]

How would I make the video pause when leaving the viewport, or stop completely?

[Falko]

You can for example remove the content of the src element

$(app).on('view_changed', function(e, view) {

  if (view=='passion') {

   $('#passionvideo').attr('src', '/static/dump/429/Marti.mp4');

   if ($('#passionvideo')[0]) setTimeout(function(){
      console.log('play video');
      $('#passionvideo')[0].currentTime = 0;
      $('#passionvideo')[0].play();
      },500);

  } else {
      $('#passionvideo').attr('src', '');
  }
});