我想允许用户在我的网站上上传视频，并且我想在提交表单之前显示视频预览。
我用图片做了，但视频脚本不工作
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>预览的div:
<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>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();
}
}
});最佳答案
好吧，所以您想在人们上传视频之前向他们展示他们所选择的内容的预览。
由于您最近的帖子 here ，以及您同时实现两者的要求。完整代码如下。
HTML 和 JavaScript 代码
(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 代码
<?
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 与另一个不同，但这不是问题。我修好了一切。
只要使用这段代码，你就会很好。
来 self 的网站/屏幕的图片示例:
关于javascript - 在提交表单之前显示视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45773272/