如何在帖子中为“输入”添加多个事件

时间:2018-12-20 22:11:04

标签: javascript jquery html html5 postmessage

我有简单的输入和带有iframe的HTML5视频播放器,我想添加多个事件以输入带有帖子的消息。

问题。

  1. 我希望on input focus event如果用户延迟键入它应该播放video1,如果用户仍在延迟它应该播放视频3,则它应该播放视频2。

  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>

这是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 );

        }

这是我正在做的演示multiple events on one input

所以我设法使用on focus eventsetTimeOut function解决了第一个问题。

现在,当用户开始键入时,正在努力添加一个事件,这将是第二个事件on keyup,因此,当用户开始键入时,它应该使用发布消息来触发此事件,就像我关注焦点一样。

我需要添加什么才能使其按需运行?任何帮助,任何想法将不胜感激。谢谢

祝大家节日快乐!

1 个答案:

答案 0 :(得分:0)

我能够让您的柱塞工作: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的控制台中引发错误。

如果这没有按预期进行,请说明应如何处理。精确点。引导我们完成所有步骤。