php open video using jwplayer upon select from input type file

Question

I have html with a form and an input with type="file". I'm trying to play an mp4 file after choosing the file with jwplayer before uploading it. I need to play video immediately. This is the code:

 <script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#test2').attr('src', e.target.result);
                var fuData = document.getElementById('creative_file_video');
                var FileUploadPath = fuData.value;
                //   alert( FileUploadPath);

                playvideo( FileUploadPath);
            }

            reader.readAsDataURL(input.files[0]);
        }

        document.getElementById('asd').style.display = 'block';
    }
</script>

<input type="file" name="creative_file_video" id="creative_file_video" onchange="readUrl(this)" />

<div id="asd" style="display: none;">
<script type="text/javascript" src="jw/jwplayer.js"></script>

<div id="player">Loading the player...</div>

<script type="text/javascript">
    function playvideo(fileInput)
    {
        jwplayer("player").setup({ file:fileInput,
            image:"",
            autostart: true,
            height: 100,
            width: 100
        });
    }
</script>
</div>

When I load the page, the JWPlayer appears, but it shows the error text "Error loading media".

Answer 1

It is just a random guess for the problem, you are facing since you have not given ful information I am going to go with my guess after looking at your code.

please try below code

    <div id="asd" style="display: none;">
    <script type="text/javascript" src="jw/jwplayer.js"></script>

    <div id="player">Loading the player...</div>
    </div>
    <script type="text/javascript">
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#test2').attr('src', e.target.result);
                    var fuData = document.getElementById('creative_file_video');
                    var FileUploadPath = fuData.value;
                    //   alert( FileUploadPath);

                    playvideo( FileUploadPath);
                }

                reader.readAsDataURL(input.files[0]);
            }

            document.getElementById('asd').style.display = 'block';
        }
           function playvideo(fileInput)
        {
            jwplayer("player").setup({ file:fileInput,
                image:"",
                autostart: true,
                height: 100,
                width: 100
            });
        }
    </script>

If that works then problem is as this question here

If error still occurs then check

If your player does not appear at all, please check if you:

• Uploaded jwplayer.js and included the tag for loading jwplayer.js in the head of your page.

• Included a container with an id attribute and referred to that id in the jwplayer(id).setup() call.

• Correctly formatted all options in the jwplayer(id).setup() call. We often see issues with commas, brackets or curly braces.

Check for more info here