Как отобразить html5 видео, чтобы покрыть весь экран и воспроизвести только видимое видео

Question

Я хочу создать мобильное приложение с ioni c, я хочу отображать каждое видео, чтобы покрыть весь экран, а также воспроизводить только видео, которое отображается на экране, и приостанавливать все остальные, видео отображается как полное экран, но не воспроизводит одно видео за раз. Вот код

<style>
        main{
        overflow-y: auto;
        width: 100%; 
        height: 100%; 
        position: absolute; 
        top: 0; 
        left: 0;
        right: 0;
        bottom: 0;
        display:block;
    }
    video{        
        background-color: transparent;
        width:100%;
        height:100%;
        z-index:5;
        object-fit:fill;
    }
            </style>
            <main></main>   
            <script>
                let url='http://localhost/test/'
                $(document).ready(()=>{
                    $.get(url,data=>{
                        data.map(video=>$('main').append(`<video src="${url}${video.src}"></video>`))
                    })
                })
            </script>

Теперь проблема в том, как я могу воспроизводить только одно видео за раз, как я могу воспроизвести видео, которое находится в точке обзора, как тикток

Answer 1

проверьте этот замечательный плагин: https://ionicframework.com/docs/native/video-player

он должен решить вашу проблему. Удачи!