如何显示html5视频以覆盖整个屏幕并仅播放可见视频

Question

我想用离子来构建移动应用程序，我想显示每个视频以覆盖整个屏幕，并且还只播放屏幕上显示的视频并暂停所有其他视频，但视频却显示为全屏，但不显示一次播放一个视频，这是代码

<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>

现在的问题是，我一次只能播放一个视频，如何播放像tiktok这样的视点上的视频

Answer 1

签出这个很棒的插件： https://ionicframework.com/docs/native/video-player

它应该可以解决您的问题。祝你好运！