Display the video before submitting the form

Question

I want to allow user to upload videos on my website and I want to show a preview of the video before submitting the form.

I did it with the images but the script for the video is not working

HTML:

 <label for="upload-vid1">
<span class="glyphicon glyphicon-film" role="button" ></span>
                   
<input type="file"  id="upload-vid1" name="media-vid" 
class="hidden upload-vid file_multi_video" accept="video/*">
    Videos
 </label>

The div for the preview:

<div class="preview">
  <a href="#" id="close-vid" class="close-button" role="button">
    <span class="glyphicon glyphicon-remove-circle"></span>
  </a>
 
  <video id="vid1" width="200" height="200" controls> 
   <source src="#" id="vid-src" type="video/*">
     Your browser does not support HTML5 videos
 </video> 
       
</div>

The PHP:

$("#upload-vid1").on("change", function(){
  
  var this_ = $(this).parent();
  var dataid = $(this).attr('data-id');
  var files = !!this.files ? this.files : [];

  if (!files.length || !window.FileReader) return; 
     
   if (/^video/.test( files[0].type)){ 
      var reader = new FileReader(); 
  reader.readAsDataURL(files[0]); 
  reader.onloadend = function(){ 
       
    var video = document.getElementById('vid-src');
     video.src = this.result;
     $("#vid1").show();
      }
      }
  });

I think you want to run the view from the local file system File://C:\path\to\video\file\on\disk and it should be done with JS. Alas, never did it myself, so up to you to figure if possible — Itay Moav -Malimovka, Aug 19 '17 at 15:30
https://stackoverflow.com/questions/8885701/play-local-hard-drive-video-file-with-html5-video-tag - for a working example look into the jsfiddle linked in the accepted answer — Evil_skunk, Aug 19 '17 at 20:46

score 4 · Accepted Answer · edited Aug 22 '17 at 06:12

Alright, so you want to show people a preview of what they choose before they upload the video.

Due to your recent post here, and from your request of implementing both together. The full code would be as follows.

HTML & JavaScript Code

(function Preview_Video() {
 'use strict'
  var URL = window.URL || window.webkitURL
 
 
  var Play_Video = function (event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')
    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', Play_Video, false)
})()

<div id="video"></div>
<video controls autoplay></video>

<form method="POST" enctype="multipart/form-data" name="form">
<input type="file" class=" file_multi_video" name="media-vid" accept="video/*"/>
<input type="submit" name="submit" value="submit"/>
</form>

PHP Code

<?

if (isset($_POST['submit'])) {

    if (file_exists($_FILES['media-vid']['tmp_name']) && is_uploaded_file($_FILES['media-vid']['tmp_name'])) {

        $targetvid     = md5(time());
        $target_dirvid = "videos/";

        $target_filevid = $targetvid . basename($_FILES["media-vid"]["name"]);

        $uploadOk = 0;

        $videotype = pathinfo($target_filevid, PATHINFO_EXTENSION);

//these are the valid video formats that can be uploaded and
              //they will all be converted to .mp4

        $video_formats = array(
            "mpeg",
            "mp4",
            "mov",
            "wav",
            "avi",
            "dat",
            "flv",
            "3gp"
        );

        foreach ($video_formats as $valid_video_format) {

            if (preg_match("/$videotype/i", $valid_video_format)) {
                $target_filevid = $targetvid . basename($_FILES["media-vid"] . ".mp4");
                $uploadOk       = 1;
                break;

            } else {
          //if it is an image or another file format it is not accepted
                $format_error = "Invalid Video Format!";
            }

        }

        if ($_FILES["media-vid"]["size"] > 500000000) {
            $uploadOk = 0;
            echo "Sorry, your file is too large.";
        }

        // Check if $uploadOk is set to 0 by an error
        if ($uploadOk == 0 && isset($format_error)) {

            echo $message;

            // if everything is ok, try to upload file

        } else if ($uploadOk == 0) {


            echo "Sorry, your video was not uploaded.";

        }

        else {

            $target_filevid = strtr($target_filevid, 'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ', 'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
            $target_filevid = preg_replace('/([^.a-z0-9]+)/i', '_', $target_filevid);

            if (!move_uploaded_file($_FILES["media-vid"]["tmp_name"], $target_dirvid . $target_filevid)) {

                echo "Sorry, there was an error uploading your file. Please retry.";
            } else {

                $vid = $target_dirvid . $target_filevid;

            }
        }
    }

}

?>

Notes:

You did not put your PHP code here, so I used the one I updated for you from the recent post.
submit button class/id here differs from the other one, but it is not a problem. I fixed everything.

Just use this code and you will be good.

Example picture of the picture from my website/screen:

With pleasure. Also, if you need anything else, please let me know! ;) — Mr Pro Pop, Aug 19 '17 at 23:56

Display the video before submitting the form

1 Answers1

Linked