Иони c 3 мобильное приложение видео автоматически воспроизводить и приостанавливать прокрутку, как видео на Facebook

Question

Я хочу автоматически воспроизвести видео, когда оно появляется в окне просмотра, и должно прекратить воспроизведение видео, когда оно выходит из окна просмотра с помощью ioni c 3, кто-нибудь может подсказать, как это сделать?

Answer 1

Может просто вызвать функцию JS при прокрутке.

<div onscroll="myFunction()">

И функция JS будет выглядеть примерно так:

if (end of viewport > document.body.scrollTop > start of viewpoint || end of viewport > document.documentElement.scrollTop > start of viewpoint) {
    vid.play();
  }else{vid.pause();}

Answer 2

Да, вы можете сделать это.

$(window).scroll(function(){
  var trackerOffset = $('.tracker').offset().top; // offset in document
  var trackerPosition = trackerOffset - $(window).scrollTop(); // offset in viewport
  $('.debug-status').html('video status: ' + checkTrackerPos(trackerPosition));
}).trigger('scroll');

function checkTrackerPos(trackerPosition){
  var triggerTop = $('.trigger-top').position();
  var triggerBottom = $('.trigger-bottom').position();
  if (trackerPosition >= triggerTop.top && trackerPosition <= triggerBottom.top ) {
    return 'playing!';
  }
  return 'paused';
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  text-align:center;
  font-family:Arial,sans-serif;
}
.debug {
  font-size:20px;
  position:fixed;
  left:50%;
  top:50%;
  width:30vw;
  margin-left:-15vw;
  margin-top:-35px;
  padding:15px;
  background:rgba(0,0,0,0.05);
}
.viewport {
  position:relative;
  width:100vw;
  height:200vh;
  border:2px dashed red;
  display:flex;
  justify-content:center;
  flex-direction:column
}
/* Position these two as you please */
.trigger-top,
.trigger-bottom {
  width:100%;
  text-indent:-50%;
  position:fixed;
  top:25%;
  border-top:1px dotted #000;
}
.trigger-bottom {
  top:auto;
  bottom:25%;
}
.video-wrapper {
  position:relative;
  color:blue;
  border:1px solid blue;
  width:400px;
  height:300px;
  margin:0 auto;
}
.video-wrapper .tracker {
  position:absolute;
  top:50%;
  left:50%;
  width:1px;
  height:1px;
  padding:1px; /* these 3 attributes are here just for the show */
  border:1px solid red;
  color:red;
  line-height:1px;
  text-indent:5px; /* again, just for the show */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="viewport">
  <div class="debug">
    <div class="debug-trigger"></div>
    <div class="debug-pos"></div>
    <div class="debug-status"></div>
  </div>
  <div class="trigger-top">top trigger</div>
  <div class="trigger-bottom">bottom trigger</div>
  <div class="video-wrapper">
    video
    <div class="tracker">tracker</div>
  </div>
</div>

См. Этот ответ: { ссылка }