Встроенное HTML-видео хорошо воспроизводится на настольном компьютере, но на мобильном устройстве оно имеет задержку и зависает, если я проигрываю другое видео до его окончания.

Question

Все отлично работает при попытке его на рабочем столе, однако проблемы возникают, когда я тестирую его на мобильном телефоне.Если нажать кнопку, чтобы появилось видео, видео загружается за одну секунду, а затем воспроизводится.Кроме того, если я нажимаю вторую кнопку для воспроизведения второго видео до завершения первого, первое замирает и не возвращается к отображению кнопки.

Еще одна вещь - это способ назначенияпеременные для каждой кнопки и видео, и способ, которым я передаю эти переменные через функции, самый эффективный и «сухой» способ кодирования что-то вроде этого?

Спасибо.

            <div class="button col-lg-2 col-md-4 col-6">
              <p class="button-txt">YES</p>
              <input class="button-img" id="button1" type="image" src="assets/images/yes.png" height="155" width="155">
              <video class="button-vid" id="video1" width="155" height="155" playsinline>
              <source src="assets/videos/yes.mp4" type="video/mp4">
            </div>
            <div class="button col-lg-2 col-md-4 col-6">
              <p class="button-txt">NO</p>
              <input class="button-img" id="button2" type="image" src="assets/images/no.png" height="155" width="155">
              <video class="button-vid" id="video2" width="155" height="155" playsinline>
              <source src="assets/videos/no.mp4" type="video/mp4">
            </div>

    <script>
    // buttons/video & function to play video
    var img1 = document.getElementById("button1");
    var vid1 = document.getElementById("video1");
    img1.addEventListener("click", () => playVideo(img1, vid1));
    init(vid1);

    var img2 = document.getElementById("button2");
    var vid2 = document.getElementById("video2");
    img2.addEventListener("click", () => playVideo(img2, vid2));
    init(vid2);

// disappears image and brings up/plays video
function playVideo(img, vid) {
    img.style.display = "none";
    vid.style.display = "inline";
    vid.play();

// disappears video and brings up image again
    vid.onended = function() {
        vid.style.display = "none";
        img.style.display = "inline";
        vid.onended = "none";
    };
};

// disappears video initially
function init(vid) {
    vid.style.display = "none";
}
</script>