我有简单的输入和带有iframe的HTML5视频播放器,我想添加多个事件以输入带有帖子的消息。
问题。
我希望on input focus event
如果用户延迟键入它应该播放video1,如果用户仍在延迟它应该播放视频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>
这是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 event
和setTimeOut function
解决了第一个问题。
现在,当用户开始键入时,正在努力添加一个事件,这将是第二个事件on keyup
,因此,当用户开始键入时,它应该使用发布消息来触发此事件,就像我关注焦点一样。
我需要添加什么才能使其按需运行?任何帮助,任何想法将不胜感激。谢谢
祝大家节日快乐!
答案 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
的控制台中引发错误。
如果这没有按预期进行,请说明应如何处理。精确点。引导我们完成所有步骤。