如何在帖子消息中为“输入”添加多个事件 [英] How to add multiple events for “input” in post messages
问题描述
我有简单的输入和带iframe的HTML5视频播放器，我想添加多个事件来输入帖子消息。
I have simple input and HTML5 video player with iframe, I want to add multiple events to input with post message.
问题。
-
我希望
输入焦点事件如果用户延迟输入它应该播放视频2它应播放视频2如果用户仍在延迟，则应该播放视频3.
I want
on input focus eventit should play video1 if user delay typing it should play video 2 if the user is still delaying it should play video 3.
假设用户开始输入然后应播放视频4，这将是关键字事件。
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：
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
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>
这是videofrme.js
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 {
}
}
这里有form.js，其中包含发布消息的事件
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 );
}
这是我正在做的演示一次输入多个事件
所以我设法在焦点事件和 setTimeOut函数上使用解决了第一个问题。
So I have managed to solve the first problem using on focus event and setTimeOut function.
现在我很难在用户开始输入时添加一个事件，这将是keyup 上的第二个事件，这样当用户开始输入时它应该使用与我在焦点上相同的帖子消息来触发此事件。
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 TO TO ALL !!!
HAPPY HOLIDAY's TO ALL !!!
推荐答案
我是能让你的Plunker工作： https://next.plnkr.co/edit /Pm4vWqp4n4kKIq5H?preview=formpage.html
I was able toget your Plunker to work: https://next.plnkr.co/edit/Pm4vWqp4n4kKIq5H?preview=formpage.html
确保预览formpage.html，因为index.html不是此问题所在的位置。以下是我建议您为form.js文件所做的更改：
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.
如果是我，我会考虑JSON格式。这样你就可以创建事件和动作的对象或数组，然后将它们用于发布消息。
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.
当我查看videoframe.js时，我无法确定 $（输入）已定义。这最终会在 keyup 中的控制台中抛出错误。
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.
这篇关于如何在帖子消息中为“输入”添加多个事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
