HTML 5 video not playing

Question

I have a simple form where a user can enter input a name and submit , when user enter the user name, automatically the video is played in iframe, when user click submit, I want to open a new page which contain a video automatically the video should play when user click submit.

Here is what I have gone so far:

Form page HTML.





    Wideo iframe
    
    

    
    
    
    
    
    





    
    

    
        
            
                WYP: Formularz.
                

                    
                        Imie

here is 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 );

        }

here is 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 {

       }

   }

Here video frame html page.




    
    Wideo iframe

Am using post messege for communication.

Everything works as expected except when I click submit , it just open new page without playing a video .

UPDATE: please any one does not understand what I want , down

Here is repo for what I am trying to do : Video frame

just clone the repo run the page named formpage.html, start filling the form u will see automatically video plays, but when u click the submit button just opnes the page but the video is not playing : Test it your self

UPDATE: to be more specific I want to use post message like this by adding event listner.

  // 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(), "*");
            });

Why my video is not playing? what am I doing wrong? thanks.

user_9942418 · Answer

The problem is actually very simple, it's not working because you're putting the video tag inside the iframe tag in your thankspage.html, remove the iframe tag and add the muted flag and it should work.

So change this


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

to this :

This will of course break your CSS, but you can easily manage to resize it accordingly afterwards by putting the video tag inside a div and manipulate the div.

As you can see here : https://jsfiddle.net/8xfq9urh/

HTML 5 video not playing

1 Answers