Обнаружение мобильного устройства и скрытие iFrame

Question

У меня есть простое приложение, в котором у меня есть iframe с видео html5 и форма, когда пользователь получает доступ к моему приложению, оно автоматически воспроизводит видео.

Проблема:

на моих маленьких устройствах, яхочу, когда видео закончится, автоматически удаляйте iframe с видео из dom (что-то вроде display: none).

Вот мое решение

Обнаружение и скрытие демонстрационного плунжера

Index.html

<div class="content">
            <div class="row expanded collapse">
                <div class="video large-8 columns large-push-4">
                        <iframe width="100%" height="400px"  id="videoframe" src="videoframe.html" autoplay>   
                      </iframe>
                </div>
                <div class="columns large-4 main large-pull-8">
                    <div class="top-header">
                        <span class="logo"><img class="svg" src="img/logo-white.svg" alt=""></span>
                        <h1>Its too cold<span></span></h1>
                    </div>


                    <div class="form">
                        <span class="form-title">What is your name?</span>
                        <div class="centered">
                            <input name="client_name" id="client_name" type="text" placeholder="name" class="medium small-12" />
                        </div>
                    </div>
                </div>
            </div>
    </div>

videoframe.js

    var welcomeMovie1 = "http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4";
    var welcomeMovie2 = "http://mirrors.standaloneinstaller.com/video-sample/TRA3106.mp4"
    var welcomeMovie3 = "http://mirrors.standaloneinstaller.com/video-sample/Panasonic_HDC_TM_700_P_50i.mp4";

    var messageTime = new Date().getHours();
    var welcomeMsg = "";
    var vid = " ";

    //console.log(messageTime);
    if (messageTime >= 5 && messageTime <= 10) {
      welcomeMsg = "early bird";
      vid = welcomeMovie1;
      //console.log(welcomeMessage2);
    }
    else
    if (messageTime >= 10 && messageTime < 22) {
      welcomeMsg = "middle of day";
      vid = welcomeMovie2;
      //console.log(welcomeMessage2());
    }
    else
    if (messageTime >= 22 || messageTime < 5) {
      welcomeMsg = "night owl";
      vid = welcomeMovie3;
    }
    ////}, 1000 * 60);
    playVideo(vid);

    console.log("Hello! Your welcome message is " + welcomeMsg + " " + vid)
    // promise functionb to create custom video controls and play functions
    function playVideo(src) {
      console.log("Hello! Your welcome message is " + welcomeMsg + " " + vid)
      $("#playervideo").attr("src", src);
      $("#playervideo")[0].muted = false;

      if (autoplay == true) {

        var playPromise = $("#playervideo")[0].play();

        if (playPromise !== undefined) {

          playPromise.then(function() {}).catch(function() {

            if (autoplay == true) {
              $("#video-unmute-button").addClass("show");
              $("#playervideo")[0].muted = true;
              var playPromise2 = $("#playervideo")[0].play();

              playPromise2.then(function() {

              }).catch(function() {
                $("#video-start-button").addClass("show");


                $("#video-start-button").on("click", function() {
                  $("#playervideo")[0].muted = false;
                  $("#playervideo")[0].play();
                  $("#video-start-button").removeClass("show");

                });
              });

              console.log("pause force");
            } else {

            }
          });
        } else {}
      } else {

      }

    }

    // detetct mobile device using mobile detect js 

    var detector = new MobileDetect(window.navigator.userAgent)
  document.getElementById('#playerVideo').addEventListener('ended',myHandler,false);
        function myHandler(e) {
         if(detector.mobile == true){
          document.getElementsByTagName('iframe').style.display = 'none';
         }
        }

Вот videoframe.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Wideo iframe</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="css/style.css">

</head>

<body>
    <div id="videowrapper">
        <video  id="playervideo" playsinline controls autoplay height="500px"></video>
        <!-- <canvas id="videocanvas" width="1024" height="576"></canvas> -->
        <div class="fader"></div>
    </div>
</body>
<script src="lib/videoframe.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.3/mobile-detect.js"></script>

</html>

к сожалению, мое обнаружениеи метод hide не работает должным образом

Что я делаю не так с моими кодами ???спасибо любая помощь будет оценена

Answer 1

Так что я добавляю функцию обнаружения в ваш код, теперь она будет использовать iframe, когда ваша страница будет открыта на мобильном устройстве, например, Sony, iPhone и т. Д. Я не буду выполнять работу за вас, вам придется выяснить, как определить, когдавидео закончится: D GL xD

скрипт, который я добавлю:

$(function(){
  var md = new MobileDetect(window.navigator.userAgent);
if(md.phone()){
  $("#video").hide();
}
})

, если вам нужно добавить планшет.просто сделайте это так:

 if(md.phone() || md.tablet()){
      $("#video").hide();
    }

и это .. если пользователь будет использовать планшет или телефон, видео будет скрывать xD, вам не нужно указывать каждую модель телефона: D просто поставьте эти простые строки xD

Если вам нужно воспроизвести видео 1-го ... и поймать, когда закончите (без подключения API для стороны сервера)

// id of video
var vid = document.getElementById("myVideo");

// when video ends catch it and close iframe
$(function(){
  var md = new MobileDetect(window.navigator.userAgent);
  if(vid.ended && md.phone()){
    $("#video").hide();
  }
})

Answer 2

Я думаю, что самый надежный / перспективный способ сделать это -

//you can adjust the width to fine tune it to current devices
if(window.screen.width < 600){
   $("#video").hide();
}

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

Answer 3

Вы можете использовать объект навигатора для обнаружения устройства:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 $('#iframe-id').hide()
}