在提交表单之前显示视频 [英] Display the video before submitting the form

问题描述

我想允许用户在我的网站上传视频，我想在提交表单之前显示视频预览。

我用图片做了但视频脚本无法正常工作

HTML：

 < label for =upload-vid1>< span class =glyphicon glyphicon-filmrole =button>< / span> < input type =fileid =upload-vid1name =media-vidclass =hidden upload-vid file_multi_videoaccept =video / *>视频< / label>  

预览的div：

 < div class =preview> < a href =＃id =close-vidclass =close-buttonrole =button> < span class =glyphicon glyphicon-remove-circle>< / span> < / A> < video id =vid1width =200height =200controls> < source src =＃id =vid-srctype =video / *>您的浏览器不支持HTML5视频< / video> < / div>  

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 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();
				  }
			   }
		});

解决方案

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:

1. You did not put your PHP code here, so I used the one I updated for you from the recent post.

2. 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:

这篇关于在提交表单之前显示视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！