HTML 5视频无法播放

时间:2018-12-17 09:25:51

标签: javascript jquery html button iframe

我有一个简单的表单,用户可以输入名称并提交,当用户输入用户名时,视频将自动在iframe中播放,当用户单击提交时,我想打开一个包含视频的新页面用户单击“提交”后,视频将自动播放。

这是我到目前为止所要做的:

表单页面HTML。

<!DOCTYPE html>
<html>

<head>
    <title>Wideo iframe</title>
    <!-- Website Font style -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <!-- Google Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/form.css">

</head>

<body>

    <iframe id="videoframe" src="videoframe.html"></iframe>
    <br />
    <div class="container">
        <div class="row main">
            <div class="main-login main-center">
                <h5>WYP: Formularz.</h5>
                <form id="formData" name="contact" role="form" method="post" action="thankspage.html" target="_blank">

                    <div class="form-group">
                        <label for="name" class="cols-sm-2 control-label">Imie</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="text" class="form-control" name="name" id="name" placeholder="Enter your Name" />
                            </div>
                        </div>
                    </div>

                    <input type="submit" id="button" value="submit" class="btn btn-primary btn-lg">


                </form>
            </div>
        </div>
    </div>



</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
<script src="js/form.js" type="text/javascript"></script>

</html>

这是form.js

//form script

        $(document).ready(function () {
            $(window).resize(resizeIframe);
            $(window).resize();

            //play a video when user enter aa name
            $("input#name").on("change", function () {
                document.getElementById('videoframe').contentWindow.postMessage( "event=fieldchanged&fieldtype=" + "name" + "&value=" + $("input#name").val(), "*");
            });

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

            })


        });

        function resizeIframe() {
            console.log($("iframe#videoframe").width()*576/1024 );
            $("iframe#videoframe").height( $("iframe#videoframe").width()*576/1024 );

        }

这是videogframe.js

   var autoplay = true;


   var movieName1 = "./videos/videoplayback.mp4"
   var movieThanks = "./videos/darasa.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
                       });

                       case  "submit":
                       openSlide("submitSlide", {
                           value: value,

                       });
                       break;

                   default:
                       break;
               }
               break;
           default:
               console.log("Event not supported");
               break;
       }

   }

   function openSlide(slideName, params) {
       switch (slideName) {
               case "nameSlide":
               openName(params);
               break;

               case "submitSlide":
               openSubmit(params);
               break;
       }

   }

   var params = null;

   function openName(_params) {
    playVideo(movieName1);
   }
   function  openSubmit(_params){
     playVideo(movieThanks);
   }


 // function top play video
   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 {

       }

   }

此处是视频帧html页面。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Wideo iframe</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="css/style.css">

</head>

<body>
    <div id="videowrapper">
        <video  id="playervideo" controls></video>
        <canvas id="videocanvas" width="1024" height="576"></canvas>
        <div id="testform"><input type="text"/></div>
    </div>
</body>
<script src="jslibs/howler.min.js"></script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="js/videoframe.js" type="text/javascript"></script>

</html>

我正在使用邮差进行交流。

一切正常,但当我单击“提交”时,它只是打开新页面而不播放视频。

  
    

更新:请任何人都不了解我想要的内容

         

以下是我要执行的操作:Video frame

  
     

只需克隆仓库即可运行名为formpage.html的页面,开始填充   您将看到自动播放视频的表格,但是当您单击   提交按钮只是对页面进行操作,但视频无法播放:测试   是你自己

更新:更具体地说,我想通过添加事件列表器来使用这样的帖子

  // play a video after the user click submit button
            $("input#button").on("click", function () {
                document.getElementById('videoframe').contentWindow.postMessage( "event=fieldchanged&fieldtype=" + "submit" + "&value=" + $("input#button").val(), "*");
            });

为什么我的视频无法播放?我究竟做错了什么?谢谢。

1 个答案:

答案 0 :(得分:2)

问题实际上非常简单,无法解决,因为您正在将视频标签放在thankspage.html的iframe标签内,删除iframe标签并添加了静音标志,就可以了。

所以改变这个

<iframe id="videoframe" src="videoframe.html">
  <video width="320" height="240" controls autoplay>
    <source src="./video/janusz.mp4" type="video/mp4">
  </video>
</iframe>

对此:

<video width="320" height="240" controls autoplay muted>
    <source src="./videos/janusz.mp4" type="video/mp4">
</video>

这当然会破坏CSS,但是您可以通过将video标签放入div并操作div来轻松地相应地调整其大小。

如您所见:https://jsfiddle.net/8xfq9urh/