Question

我有一个带有视频API的HTML 5表单，我想在用户单击“提交”按钮时播放视频

这是演示HTML表单输入。

HTML 5

<form>
                    <div class="form-group">
                        <label for="name" class="cols-sm-2 control-label">E-mail</label>
                        <div class="cols-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                                <input type="email" class="form-control" name="name" id="email" placeholder="Enter email" />
                            </div>
                        </div>
                    </div>

                    <button type="submit" id="button" class="btn btn-primary btn-lg btn-block login-button">Submit</button>


                </form>

这是js

// play a video after the user enter an input email works perfect
        $("input#email").on("change", function () {
            document.getElementById('videoframe').contentWindow.postMessage( "event=fieldchanged&fieldtype=" + "email" + "&value=" + $("input#email").val(), "*");
        });

        //play a video when a user clicks submit button this is not working !!!!!!!
        $("#button").on("click", function () {
            document.getElementById('videoframe').contentWindow.postMessage({
              event: "openSubmit"
            });
            console.log(openSubmit);
        });

除了“提交”按钮之外，所有其他功能都可以正常使用。

当用户单击提交按钮时，不会播放视频。

为了实现自己的目标，我需要更改什么？

Answer 1

postMessage仅接受message参数的字符串。在发送对象之前，您需要将其转换为JSON。示例：

document.getElementById('videoframe').contentWindow.postMessage(
  JSON.stringify({
    event: 'openSubmit'
  }),
  '*'
)

postMessages添加提交事件监听器

1 个答案: