How to add multiple events for “input” in post messages

问题

I have simple input and HTML5 video player with iframe, I want to add multiple events to input with post message.

Problem.

I want on input focus event it should play video1 if user delay typing it should play video 2 if the user is still delaying it should play video 3.
Assume user start typing then it should play video 4 so this will be on keyup event.

so here is my solution I have so far .

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>

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

Here is 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 {

       }

   }

Here there is form.js which have an event with post messages

//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 );

        }

Here is demo I am doing multiple events on one input

So I have managed to solve the first problem using on focus event and setTimeOut function.

Now am struggling to add an event when the user starts typing this will be the second event on keyup so that when a user starts typing it should trigger this event using post message the same as I did with on focus.

what do I need to add to make it work as I want? any help, any idea will be appreciated. thanks

HAPPY HOLIDAY's TO ALL !!!

回答1:

I was able toget your Plunker to work: https://next.plnkr.co/edit/Pm4vWqp4n4kKIq5H?preview=formpage.html

Make sure to Preview the formpage.html as the index.html is not where this issue lays. Here are the changes I would suggest for your form.js file:

$(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
    );
}

This appears to do what you wanted, when it got focus, it started playing. When I pressed a key, it started playing again at the new header.

If it were me, I would consider JSON format. This way you can create objects or arrays of the events and actions and then stringify them for the post message.

When I review videoframe.js, I cannot determine where $(input) is defined. This ends up throwing an error in console on keyup.

If this is not working as expected, then please clarify what should be happening. Be precise. Walk us through all the steps.

来源：https://stackoverflow.com/questions/53876735/how-to-add-multiple-events-for-input-in-post-messages

标签

javascript

jquery

html

html5

postmessage