Question

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

我用图片做了，但视频的脚本无效

HTML：

＆＃13;

 <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>

＆＃13;

预览的div：

＆＃13;

<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>

＆＃13;

PHP：

＆＃13;

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

＆＃13;

Answer 1

好的，所以你想在上传视频之前向人们展示他们所选择的内容。

由于您最近发布的帖子here，以及您同时实施这两个帖子的请求。完整的代码如下。

HTML＆amp; JavaScript代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

PHP代码

<?

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;

            }
        }
    }

}

?>

注意：

你没有把你的PHP代码放在这里，所以我在最近的帖子中使用了我为你更新的代码。
提交按钮类/ ID在这里与另一个不同，但它不是问题。我修好了一切。

只需使用此代码就可以了。

来自我的网站/屏幕的图片示例：

在提交表单之前显示视频

1 个答案: