Как добавить несколько событий для «ввода» в сообщениях - PullRequest
Новая
       16

Как добавить несколько событий для «ввода» в сообщениях

0 голосов
/ 21 декабря 2018

У меня есть простой ввод и видео проигрыватель HTML5 с iframe, я хочу добавить несколько событий для ввода с сообщением.

Проблема.

  1. Я хочу on input focus event он должен воспроизводить видео1, если пользовательская задержка при наборе текста должна воспроизводить видео 2, если пользователь все еще задерживает его, должен воспроизводить видео 3.

  2. Предположим, пользователь начинает печатать, тогда он должен воспроизвести видео 4, так чтобудет on keyup событие.

поэтому вот мое решение, которое у меня есть.

HTML formpage.html: 

<div class="main-container">
    <iframe id="videoframe" src="videoframe.html"></iframe>


    <input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name" />

</div>

Здесьis videoframe.html 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Wideo iframe</title>
    <link rel="stylesheet" href="lib/style.css">

</head>

<body>
    <div id="videowrapper">
        <video  id="playervideo" controls></video>
        <canvas id="videocanvas" width="1024" height="576"></canvas>
    </div>
</body>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="lib/videoframe.js" type="text/javascript"></script>
</html>

Вот videofrme.js 

   // creating stage variables for animation

   var timeline = null;
   var autoplay = true;

   var movieName1 = 'https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4'
   var movieName2 = 'https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005610.mp4'
   var movieName3 = 'https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005611.mp4'
   var movieCzekanie ='https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005612.mp4'

   function resizeFunction() {
       $("#videowrapper").height($("#videowrapper").width() * 576 / 1024);

   }

   window.addEventListener("message", receiveMessage, false);
   function receiveMessage(eventPosted) {
       var values = eventPosted.data.split("&");
       var event = values[0].split("=")[1];
       var fieldtype = values[1].split("=")[1];
       var value = values[2].split("=")[1];

       console.log(event, fieldtype, value);

       switch (event) {
           case "fieldchanged":

               switch (fieldtype) {
                   case "name":

                       openSlide("nameSlide", {
                           value: value
                       });

                   default:
                       break;
               }
               break;
           default:
               console.log("Event not supported");
               break;
       }

   }

   function openSlide(slideName, params) {
       switch (slideName) {
               case "nameSlide":
               openName(params);
               break;
       }

   }

   var params = null;

   function openName(_params) {
    playVideo(movieName1);
    setTimeout(function(){
        playVideo(movieName2)
    }, 8000);

   setTimeout(function(){
       playVideo(movieName3)
     }, 9000);

     setTimeout(function(){
        playVideo(movieCzekanie)
      }, 3000);
      $(input)

   }

   function openNazwisko(_params) {
    playVideo(movieNazwisko1);
    setTimeout(function(){
        playVideo(movieNazwisko2)
    }, 3000);

   setTimeout(function(){
       playVideo(movieNazwisko3)
     }, 6000);


   }

   function playVideo(src) {
       $("#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 {

       }

   }

Здесь есть form.js, который имеет событие с сообщениями 

//form script

        $(document).ready(function () {
            $(window).resize(resizeIframe);
            $(window).resize();
            $("input#name").on("focus", function () {
                document.getElementById('videoframe').contentWindow.postMessage( "event=fieldchanged&fieldtype=" + "name" + "&value=" + $("input#name").val(), "*");
            });
             $("input#name").on("keyup", function () {
                 document.getElementById('videoframe').contentWindow.postMessage( "event=fieldchanged&fieldtype=" + "name" + "&value=" + $("input#name").val(), "*");
            });

        });

        function resizeIframe() {
            console.log($("iframe#videoframe").width()*576/1024 );
            $("iframe#videoframe").height( $("iframe#videoframe").width()*576/1024 );

        }

ЗдесьЭто демо Я делаю несколько событий на одном входе

Итак, мне удалось решить первую проблему, используя on focus event и setTimeOut function.

Теперь я пытаюсьдобавить событие, когда пользователь начинает печатать, это будет второе событие on keyup, поэтому, когда пользователь начинает печатать, он должен вызвать этоСобытие, использующее сообщение, такое же, как и в случае с фокусом.

Что мне нужно добавить, чтобы оно работало так, как я хочу?любая помощь, любая идея будет оценена.спасибо

С праздником всех!

1 Ответ

0 голосов
/ 21 декабря 2018

Я смог настроить ваш Plunker на работу: https://next.plnkr.co/edit/Pm4vWqp4n4kKIq5H?preview=formpage.html

Обязательно просмотрите файл formpage.html, так как index.html - это не то, где находится эта проблема.Вот изменения, которые я бы предложил для вашего файла form.js: 

$(function() {
    $(window).resize(resizeIframe);
    $(window).resize();
    $('#name').on('focus', function() {
        $('#videoframe')[0].contentWindow.postMessage(
            'event=fieldchanged&fieldtype=name&value=' + $('#name').val(),
            '*'
        );
    });
    $('#name').on('keyup', function() {
        $('#videoframe')[0].contentWindow.postMessage(
            'event=fieldchanged&fieldtype=name&value=' + $('input#name').val(),
            '*'
        );
    });
});

function resizeIframe() {
    console.log(($('iframe#videoframe').width() * 576) / 1024);
    $('iframe#videoframe').height(
        ($('iframe#videoframe').width() * 576) / 1024
    );
}

Это похоже на то, что вы хотели, когда он получил фокус, он начал играть.Когда я нажал клавишу, она снова заиграла с новым заголовком.

Если бы это был я, я бы рассмотрел формат JSON.Таким образом, вы можете создавать объекты или массивы событий и действий, а затем упорядочивать их для почтового сообщения.

Когда я просматриваю videoframe.js, я не могу определить, где определено $(input).В результате выдается сообщение об ошибке в консоли на keyup.

Если это не работает должным образом, пожалуйста, уточните, что должно происходить.Будь точным.Проведи нас через все шаги.

...