UIWebView с автозагрузкой видео HTML 5

Question

У меня проблема с автовоспроизведением, я использовал следующие две строки:

[webView setAllowsInlineMediaPlayback:YES];
self.webView.mediaPlaybackRequiresUserAction = NO;

Это работает отлично, но когда у меня несколько <video> на моем веб-представлении, с использованием системы слайдов, всевидео запущено, но я хочу запустить видео, когда оно отображается, поэтому другие видео будут запущены, когда мы включаем.

Пример без JS:

    <section class="main-slider">
    <div class="item video">
        <!--poster="img/loading.gif"-->
        <video class="slide-video slide-media" autoplay muted playsinline preload="metadata">
            <source src="video/video1.mp4" type="video/mp4" />
        </video>
        <p class="caption"></p>
    </div>
    <div class="item video">
        <video class="slide-video slide-media" autoplay muted playsinline preload="metadata">
            <source src="video/video2.mp4" type="video/mp4" />
        </video>
        <p class="caption"></p>
    </div>
    <div class="item video">
        <video class="slide-video slide-media" autoplay muted playsinline preload="metadata">
            <source src="video/video3.mp4" type="video/mp4" />
        </video>
        <p class="caption"></p>
    </div>
    <div class="item video">
        <video class="slide-video slide-media" autoplay muted playsinline preload="metadata">
            <source src="video/video4.mp4" type="video/mp4" />
        </video>
        <p class="caption"></p>
    </div>
    <div class="item video">
        <video class="slide-video slide-media" autoplay muted playsinline preload="metadata">
            <source src="video/video5.mp4" type="video/mp4" />
        </video>
        <p class="caption"></p>
    </div>
</section>

Answer 1

вы будете использовать javascript и судить о кадре:

<script>
    function playVideo(el) {
        var windowHeight = jQuery( window ).height();
        $(el).each(function(){
            var thisPos = $(this).offset().top;

            var topOfWindow = $(window).scrollTop();
            if (topOfWindow + windowHeight - 200 > thisPos ){
                //play your video in here
            }
        });
    }

    $(window).scroll(function() {
            playVideo('.video_class_name');
    });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

надеюсь, это поможет вам